Display WooCommerce product variation image upon selection from variation dropdown menu

How to Exclude Categories From Default WordPress Loop
How to Exclude Categories From Default WordPress Loop
June 25, 2015
Changing the starting and end tags of the products loop in main shop page of a WooCommerce theme
Changing starting and ending tags of the products loop in main shop page of a WooCommerce theme
December 15, 2015
Show all

Display WooCommerce product variation image upon selection from variation dropdown menu

Display WooCommerce product variation image

If you ever need to display WooCommerce product variation image, somewhere in single product page, upon selection from variation dropdown menu then use this technique to achieve that objective. This solution can be useful in situation when you use a third party product slider and that product slider doesn’t support the feature to show the corresponding image upon user’s choice from variations dropdown menu. “Product Gallery Slider for WooCommerce” is one such third party product slider, at the time of writing of this post, which doesn’t show the corresponding image of the selected variation from the dropdown menu.

First of all make a copy of woocommerce/templates/single-product/add-to-cart/variable.php at woocommerce/single-product/add-to-cart/variable.php and then add the following code in the variations.php file after the variations table:

<?php
        // get the product variations
        $product_variations = $product->get_available_variations();
        if ( !empty( $product_variations ) ) {
            ?>
        <div class="product-variation-images">
        <?php
        foreach($product_variations as $product_variation) {
            // get the slug of the variation
            $product_attribute_name = $product_variation['attributes']['attribute_pa_material'];
            ?>
            <div class="product-variation-image product-variation-<?php echo $product_attribute_name ?>" id="product-variation-<?php echo $product_variation['variation_id']; ?>" data-attribute="<?php echo $product_attribute_name ?>">
            <img src="<?php echo $product_variation['image_src']; ?>" alt="">
            </div><!-- #product-variation-image -->
        <?php } ?>
        </div>
        <?php } ?>

Note: If have never overrode woocommerce files then read more about it at https://docs.woothemes.com/document/template-structure/.

Now add the following js code to your theme’s javascript file:

// watch out of change event on a specific select element by id
    jQuery(document).on('change', 'select#pa_material', function() {
        var value = "";
        
        // get the option that has been selected
        value += ".product-variation-" + $( "select#pa_material option:selected" ).val();
        
        // Hide all custom_variation divs
        $( '.product-variation-images .product-variation-image').css( 'display', 'none' );
        
        // Display only the variation image which matches the criteria
        $( '.product-variation-images ' + value ).css( 'display', 'block' );
    });

The last thing to do is to hide the variation images by default so add the following css rule to your theme’s style.css file:
.product-variation-image {
    display: none;
}

Update all the three files on your website and if you followed the steps exactly then you should be able to see the variation image when you choose a variation from the dropdown menu.

Sher Ali Saafi
Sher Ali Saafi
Sher Ali Saafi is a software engineer, WordPress Rockstar and Envato Elite Author. When he is not found in front of machines then he is most probably somewhere in the mountains to explore new territories. You can find his travel photography at http://sheraliphotography.com/ and read about his travel experiences at http://thesilenttraveler.com/

Leave a Reply

Your email address will not be published. Required fields are marked *