Shop hover image not working with Plugin

In your theme options > shop settings. Turn the product image ratio off. That will remove the theme edit and let woocommerce output the images.

What is the link to the plugin?

Kadence Themes

I turned the product image ratio off, still no hover image.

https://codecanyon.net/item/woocommerce-color-or-image-variation-swatches/7444039

Do you know what this plugin is looking for in terms of a class? I don’t know the plugin can don’t have a copy to see the scripts but the theme isn’t touching shop-frontend.js and I can’t think of what class they would be using that isn’t there? Can you see what css class the plugin is looking for?

Kadence Themes

I don’t know what the plugin is looking for. How do I find out that information?

Ask the plugin author, since your saying the plugin author has said:
“The author said that this theme (Pinnacle) has completely different structure for shop page divs”

What is there plugin looking for in terms of div classes?
Kadence Themes

If it were an open source plugin I could just look but it’s not so I can’t see there code.

Kadence Themes

@Kadence Themes ,

I can provide you plugin if you give me your email id. our plugin loads only shop-frontend.js file on archive pages.

https://phppoet.com/swatch/wp-content/plugins/woocommerce-colororimage-variation-select/js/shop-frontend.js?ver=4.3.1

frontend functionality at https://phppoet.com/swatch/ .

best regards

[email protected]

I’ll see if I can add in support for the plugin.

Kadence Themes

That would be awesome, thanks!

To the author phppoet. I’ve got an update which will make the swatches work on the single product page.

For the shop page can I suggest updating your js to this:

(function($) {

       	 $(document).on( 'mouseover', '.wcvaswatchinput',
       	 	function( e ){
              var hoverimage    = $(this).attr('data-o-src');
              var parent        = $(this).closest('li');
              var parentdiv     = $(this).closest('div.shopswatchinput');
              var productimage  = $(this).closest('.product').find("img").attr("src"); 

               if (hoverimage) {
                $(this).closest('.product').find("img").attr("src",hoverimage);
                $(parentdiv).attr("prod-img",productimage);
               }
             }

         );       

})(jQuery);

That would make it work with pinnacle and other Themes that have a more custom shop output.

Kadence Themes

great. it works with all themes including pinnacle and virtue. I am going to apply this changes to upcoming update.

Thanks a lot Kadence Themes
cheers

I have the Kadence “Pinnacle Premium” theme and have installed the Woocommerce Color or Image Variation Swatches plugin.

It seems to work fine on the individual product pages but will not display the swatch options on the category pages.

I understand the setting is in Woocommerce => Settings => Swatches => Shop swatches location

however changing this does not make a difference. The swatches will not display on the category pages, they’ll only display on the product page.

Is this a known issue or am I missing something?

update,

ah I think I’ve worked it out…

need to tick a checkbox on the Product -> Variation Select page

called “Enable one attribute swatches On shop/archive pages”

its displaying now, but not quite working yet as image wont change on click or hover on shop page

and solved that by adding hover images into the custom color/image swatches but a new problem has emerged…

The image loaded after the hover goes to a lower resolution than the original image regardless of the color selected???

…

update

and the answer to this is that color/image swatches uses the thumbnail version of the image to load on the category page via the swatches

so i just made the thumbnails a higher resolution in both woocommerce and media settings and regenerated the thumbnails

all good.

Glad you got everything worked out!