fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Uncode theme integration – archives page

Anna Lynch

Hi there,

I am using uncode theme. But it appears on the archives listing page that the swatches are appearing above the image in the wrong spot. How can I move them down? Is there some standard code you could please provide to fix?

https://woocommerce-151851-2441033.cloudwaysapps.com/dresses

Hakik Zaman

Hi Anna,

Thanks for reaching us. We are sorry for your inconvenience.

Could you send us the latest version of the theme that you are using on your site? We’ll try to investigate your issue by installing your theme on our local setup.

You can upload the theme file to Dropbox or Google Drive and send the download link here directly.

Looking forward to hearing from you soon.

Thank you

Anna Lynch

Here is the link to the theme ; )

https://drive.google.com/file/d/1ZBihctnERldSp46A3JXJxSQXFCoB0THy/view?usp=sharing

Uncode mentions your plugin on their site here: https://support.undsgn.com/hc/en-us/articles/360018828237

With these notes:

Please note that its authors have designed the plugin to work with images embedded using the regular <img> tag as it usually happens in WooCommerce and most layouts. So if you are using an advanced and creative Uncode layout like Metro or Carousel Fluid, where images are applied in the background, the image variation will not work.

Separately, I also want the image to change when the colour is selected but it won’t work. I tried with 2 different layouts:

https://woocommerce-151851-2441033.cloudwaysapps.com/product/eva-sequin-kimono-top
and https://woocommerce-151851-2441033.cloudwaysapps.com/product/eva-sequin-kimono-top-copy

Any ideas?

Hakik Zaman

Hi Anna,

Thanks for providing the theme file. Please use the below snippet inside your child theme’s functions.php or create a snippet using the Code Snippets plugin–

add_action('woo_variation_swatches_pro_archive_page_loaded', function($wvs_pro){
remove_action('woocommerce_init', array( $wvs_pro, 'enable_swatches' ), 1);
add_action('woocommerce_after_shop_loop_item_title', array( $wvs_pro, 'after_shop_loop_item' ), 9);
}, 10, 1);

Thank You

Anna Lynch

Thank you that worked! However I can’t get the swatch colours to change the image on the archive page?

https://woocommerce-151851-2441033.cloudwaysapps.com/shop

I have ticked the box to have this change at archive level too but it isn’t working. I’ve definitely associated the variables with a colour too so not sure what’s happening?

Also on the individual pages, I’m assuming I can only get the swatch to change the image on this layout: https://woocommerce-151851-2441033.cloudwaysapps.com/product/eva-sequin-kimono-top-copy

As it doesn’t work on this one (which is our preferred layout): https://woocommerce-151851-2441033.cloudwaysapps.com/product/eva-sequin-kimono-top

Any tricks?

 

 

Anna Lynch

Thank you. That does change the image now on archive level. Except the image is now stretched. Any ideas why? It wasn’t before.

Also I did deactivate the plugin to test if I could change the image on the preferred layout and it doesn’t even change without the plugin. Should I contact Uncode theme instead? Maybe that layout just doesn’t change it?

Hakik Zaman

Hi Anna,

That does change the image now on archive level. Except the image is now stretched. Any ideas why? It wasn’t before.

Please clear your cache like Browser Cache, Caching Plugin Cache, and Server-Side Cache. I have tested from my side, everything is working fine.

Should I contact Uncode theme instead? Maybe that layout just doesn’t change it?

I don’t think they made that layout to change images. Still, you can contact them.

Thank You

Anna Lynch

Hi there. Definitely not a cache issue. I have tried several different browsers too. As you can see the 2 products using the plugin have stretched images… ever since we added that last bit of code. Any ideas how to fix this? See below

Hakik Zaman

Hi Anna,

Could you record me reproducing your issue using a tool like this? https://www.useloom.com
It helps me to quickly figure out the issue.

Thank you

Anna Lynch

Hi there. So I have fixed the image size issue, but now for some reason your swatch change does not work on the archive level! Gah. Any ideas. It seems like your plugin is conflicting with the theme but I’m not sure how to fix it ; (

Anna Lynch

I’ve tried changing it under appearance to all the options… It either doesn’t work, or stretches height or width wise. I’m lost as to what I can try now? I just recommended your plugin to another Uncode user, so I’m sure this is something that will come up regularly? Really appreciate if you can help in any other way???!

Anna Lynch

Hi. Just wondering if you have any more thoughts? I’m stuck as to what to do.

Hakik Zaman

Hi Anna,

Basically, the images are displayed as you setup size in Appearance > Customize > WooCommerce > Product Images 

I found you have selected Layout Mode Fit Row. Though not familiar with Uncode features, it can be a reason.

Thank You

Hakik Zaman

Hi Anna,

Thanks for using another plugin.

Are you facing any other issues?

or, Can I close this ticket?

Thank You