swatches not showing on archiv page

Hi sara,

Thanks for getting back to us. I have visited your website and swatches are displaying: https://prnt.sc/VuDqaQABKNwc

Please clean your caches like browser cache, caching plugin cache, and server-side cache.

BTW, I have also checked you have enabled catalog mode and you have selected “color”.

Now, on the archive/shop page, you can only see the color variations. So, the product that has color variations will display color swatches on the shop/archive page.

I hope it will clear up your confusion.

Thank You

Hi sara,

From my inspection, you are using Ajax Pagination.

We need an event from your Ajax Pagination plugin that should be triggered after new products are loaded.

Just send this plugin to your plugin developer (which Ajax Pagination plugin you are using): https://wordpress.org/plugins/malinky-ajax-pagination/

If it comes from your theme, please contact your theme developer and ask for a trigger that fires after new products are loaded.

And ask them to send triggers like the following as the Malinky Ajax Pagination plugin provides.

document.addEventListener(‘malinkyLoadPostsComplete’, function(e) {
console.log(‘LoadPostsComplete’);
});

Thank You

Hi sara,

After your confirmation, I have rechecked your archive page.

Indeed you are using Ajax pagination. Kindly check this screencast as proof: https://www.loom.com/share/87185b970f374116a382ad36d8530b5f

Thank You

Hi sara,

Your archive page product is loading with the Jet Listing Grid Loader.

Unfortunately, the event you gave is not working with their grid.

I have already tested it. You can give them this screenshot- https://prnt.sc/uQmq4Deu0nJv

Thank You

Hi sara,

I have added the following snippet using Code Snippets plugin:

// GetWooPlugins Support
add_action( 'wp_footer', 'wvs_jet_product_grid_support', 99 );
function wvs_jet_product_grid_support(){
?>
<script id="gwp-jet-grid">
jQuery(document).on('jet-engine/listing-grid/after-load-more', function(){
jQuery(document).trigger('woo_variation_swatches_pro_init');
});

</script>
<?php
};

Then added the necessary product wrapper, image selector, and button selector as per your grid markup here: https://prnt.sc/xC19D_2b2vX3.

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

Thank You

Hi sara,

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

Hi sara,

Will you please give an exact page URL as you showed me on your screencast?

Hope to hear from you soon!

Thank You

Hi sara,

Can you please flush your object cache from the hosting settings?

If you don’t know how to do this, please contact hosting support to flush the object cache.

You have a console error on your site: https://prnt.sc/UitoHWZtqsg6

It is coming from your child theme. Can you please fix this to avoid any unexpected behavior?

Thank You

Hi sara,

We didn’t release any updates in recent weeks. Please try to flush your object cache again.

Also, make sure you are using any caching plugin. If so, please disable the Defer JS option from the caching plugin settings.

Thank You

Hi sara,

Temporarily deactivate all the caching plugins like- eZcache and WP-Optimize.

Then try it on a browser’s incognito/private mode.

Thank You

Hi sara,

Did you flush your object cache after disabling the plugins?

If not, please kindly flush your object cache.

Thank You