WooCommerce Additional Variation Images Conflict with Custom Themes [ Solution ]

WooCommerce Additional Variation Images

Recently, I was working on Woocommerce based site and the customer wanted to use the WooCommerce Additional Variation Images. They were using a premium theme called “Royal from 8themes”.

I just did what normally we do install the plugin, read the documentation, and added a couple of product variable products as defined in the documentation.

As soon as, I viewed the product on a single page. The thumbnail product slider broke. And the reasons are

• WooCommerce Additional Variation Images plugin is developed around Woocommerce, thus it’s using all the core classes, ids of Woocommerce.
• As the Royal theme used custom product sliders ( using owl-carasoul ), The core classes of Woocommerce were missing.

If you look at the Plugin and theme conflicts Guide, It specifically says.

Almost half of the interactions we receive are related to issues caused by conflicts with third-party themes and plugins.

Now, to solve this issue. we needed to update the layout of the single product page by adding the woocommerce default classes.

The first, is to add the default classes. I’m writing the following solution as compared to the Royal theme, but you can follow the same pursuit in any other custom theme.

I created a child theme called “royal-child” and copied the content-single-product.php from /themes/royal/woocommerce/ to /themes/royal-child/woocommerce/. And replace line #113

<div class="<?php echo esc_attr( $image_class ); ?> product-images">

to

<div id="product-<?php the_ID(); ?>" <?php wc_product_class($image_class, $product); ?>>

This piece of code allowed the woocommerce classes to be applied on the product page. Then the next step is to allow default theme support of lightbox and slider from woocommerce. For which we added the following piece of code in /themes/royal-child/functions.php

add_action('after_setup_theme', 'royalchild_setup');

function royalchild_setup()
{
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');
}

This allowed the lightbox and slider from Woocommerce to apply on the product page. And lastly, some CSS updates to handle the layout and view.

.flex-control-thumbs {
width: 90%;
bottom: 0px; 
text-align: center;
display:flex;
flex-wrap:wrap;
}

.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;

}

.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 15%;
vertical-align: top;
margin: 15px 4% 0 0;
min-width:100px;
}

.flex-control-thumbs img {
width: 100%;
display: block;
opacity: s.7;
cursor: pointer;
}

.flex-control-thumbs img:hover {
opacity: 0.5;
}

.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}

.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}

Now, we are using the default woocommerce features, which allow WooCommerce Additional Variation Images to work perfectly.

I hope this would help some, If you need any help then please contact me.