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

Variation Swatches not bluring out of stock products on frontpage.

Mihai Ghinoiu

Hello,

I’m using this variation swatches for woocommerce in combination with elementor and jet engine (crocoblock) listing grid.

On archive pages, the out of stock variations blur out properly. On front page, the variation blur out in the product sliders only if out of stock products load first, if they are at the end of the sliders, the variation options won’t blur out the out of stock ones until clicking upon any of the options.

Is there any way you can point me to the piece of code that checks this? I want to write myself a function to run this check after couple of seconds (so add a delay before disabling variations).

 

Thank you/

Hakik Zaman

Hi Mihai,

Thanks for reaching out to us. You can reinitialize the swatches scripts by using the following trigger:

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

After changing the slide the above trigger can be called to reinitialize the swatches data.

I hope it will help.

Thank You

Mihai Ghinoiu

Thank you for your answer, the thing is that the actual variation swatches launches, it’s just not bluring out the out of stock products. Let me show you 2 images.

 

Before clicking any of variations

For example in this scenario A2/A3 do not have any quantity. Once clicking any of them.

It refreshes itself and loads correctly.

My question is, is there any way I can do this kind of variation check with a script ? Or what workaround around that would it be. Everywhere else it loads correctly archive/product page etc.

 

Hakik Zaman

Hi Mihai,

Unfortunately, the screenshots were not attached properly.

Please upload your screenshot here: https://paste.pics/ and post the screenshot link on this thread.

You can also 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

Hakik Zaman

Hi Mihai,

Thanks for the screencast. Unfortunately, there is no way to make it work without JavaScript.

You are using a product slider. It renders products inside the slider loop. When you click on the arrow or it slides automatically it re-renders/clones product cards (it is very common in slider). So, initially, our script doesn’t load after re-rendering the product cards. There must be some event by the slider which is firing after the new product comes.

You have to fire our trigger $(document).trigger('woo_variation_swatches_pro_init'); after finishing the rendered product card.

You may be confused then why it displays a cross when you are clicking. Because it fires our script when you click on a swatch. So, a click event is firing to trigger our script.

By the way, you will not face this issue if you load product cards without a product slider.

I hope this explanation will help.

Thank You

Mihai Ghinoiu

Hello, yes that explanation helps.

Indeed if I load it without carousel it works on archive pages, but on the front page I need the carousels.

I tried this -> $(document).trigger('woo_variation_swatches_pro_init'); but it doesn’t actually blur and cross out the out of stock variations maybe there’s something else i’m missing?

You can talk to me more in depth, i can write my own javascript, i just need a bit of a guidance for that.

Thank you for the help! Much appreciated.

Hakik Zaman

Hi Mihai,

You have to find out this: “There must be some event by the slider which is firing after the new product loads.”

To fire this $(document).trigger('woo_variation_swatches_pro_init');, you have to find the event that is fired when new product loads from your carousel/slider.

So, please contact the plugin/slider author to get the exact event that is fired after the new product loads on the slider.

Thank You