Want To Add Extra Images Per Product Variation? Download This Free Plugin

variation are not showing on shop / archive page.

Aliya Anwar

We have purchased variation swatches for woocommerce pro plugin, but it’s not showing the variation on the shop / archive page even after enabling “show swatches on the shop / archive page” option. Is there any hook that I need to add on the site?

Hakik Zaman

Hi Aliya,

Thanks for reaching out to us. You are using a Custom theme.

Inside your “woocommerce > content-product.php” there is a missing hook:

do_action( 'woocommerce_after_shop_loop_item' );

Swatches plugin archive swathes are hooked with that hook. So, keeping the above hook inside content-product.php will bring the swatches to the archive page.

Thank You

Aliya Anwar

It’s working now. How do I customise the template? also in some products variation button is not working even if it is in stock.

Hakik Zaman

Hi Aliya,

How do I customise the template?

Can you please give me an example of what kind of customization you want?

You can give me a screenshot to understand it clearly. You can upload your screenshot here: https://paste.pics/ and post directly the screenshot links.

also in some products variation button is not working even if it is in stock.

Please give me some product links to check. So that, I can check this for you.

Thank You

Aliya Anwar

https://paste.pics/88cf89ba9771a142a9f15aff652d1064

I have attached a screenshot that has the issue, and I will upload another screenshot below that shows how I want to customise the product.
https://paste.pics/ff68b65d2c7ff515220a7a6a9b0e88fb.

I will attach some product links below, and the issue was on the shop page.
https://test.dubaiaudio.com/product/f302i-floorstanding-speakers/
https://test.dubaiaudio.com/product/concept-mm-turntable/

Here is the link to the shop page, Please a have look here also : https://test.dubaiaudio.com/shop/

Hakik Zaman

Hi Aliya,

You are using the AJAX load more button to display more products. That’s why we need to reinitiate our scripts after loading the new products.

So, we need an event from your “load more” plugin/theme that should be triggered after new products are loaded.

Just send this plugin to your plugin developer: https://wordpress.org/plugins/malinky-ajax-pagination/

And ask them to send triggers like the following as the Malinky Ajax Pagination plugin provides.
document.addEventListener(‘malinkyLoadPostsComplete’, function(e) {
console.log(‘LoadPostsComplete’);
});

 I will upload another screenshot below that shows how I want to customise the product.

Do you want to change the product card/block visualization? If so, it is not the purpose of our plugin. Please contact your theme regarding this request.

Thank You

Aliya Anwar

we are using a custom button for load more on shop page. can you let me know the initialisation code or event that need to bind to the load more button.

Hakik Zaman

Hi Aliya,

Please add the following trigger after new products are loaded:

jQuery(document).trigger('woo_variation_swatches_pro_init');

Thank You

Aliya Anwar

It works, but after new products are loaded, the images of those new products do not change on the shop page according to the variation swatches button click. I will provide the link to the shop page below. Please have a look :-https://test.dubaiaudio.com/shop/

Hakik Zaman

Hi Aliya,

After pushing the new products our plugin’s image selector is not pushing to the product image tag.

So, I have added the selector .size-woocommerce_thumbnail here: https://paste.pics/MG4J8

Please check now and don’t forget to clear your caches before checking.

Thank You

Hakik Zaman

Hi Aliya,

You are using your custom theme and missed several standards to bring the new outlook to your site. So, you didn’t add do_action( 'woocommerce_after_shop_loop_item' ); that’s why I have asked you to add it.

But, other plugins you have installed also use this hook to push their data. So follow the following steps:

Replace this:

do_action( 'woocommerce_after_shop_loop_item' );

to

this:

do_action( 'gwp_woocommerce_after_shop_loop_item' );

Then add the following code using 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('gwp_woocommerce_after_shop_loop_item', array( $wvs_pro, 'after_shop_loop_item' ), 9);

}, 10, 1);

Thank You

Aliya Anwar

I just need to remove the add-to-cart and other texts that come extra, but this removes the swatches button also.

Hakik Zaman

Hi Aliya,

It is beyond our support scope to fix the theme issue. Still, for your convenience, I have listed the steps you need to follow.

Please check carefully my last reply.

Thank You