Variable product Add to Cart button displays briefly when switching between 'out of stock' variations

Question

Please take a look at http://www.bestvapestore.com/product/goblin-juice-krazak/

All variations are out of stock, but as you can see, when switching between them it shows the Add to Cart button briefly - this is not desirable. I'm using a theme and can't seem to find the code responsible for this.

There is also an issue when no variation is selected, and then a user selects an out of stock variation. It doesn't quite show the add to cart button, but it displays some content after the 'out of stock' message briefly before displaying correctly.

Cany anyone help?

Domain Domain · Accepted Answer · 2016-01-14T05:20:51

Just check the site and and the issue is clearly visible to me here.

As per my analysis it is a theme issue.

And yes there is a solution to it.

Tried the code from my end and done the basic level of testing. Now from here you can go forward with this solution.

JQuery code:

jQuery('.variations_button').change(function() {
      if(jQuery('.variations_button').prev().children('.in-stock').length){
           jQuery('.variations_button').css('display','block');
      }else{
           jQuery('.variations_button').css('display','none');
      }
});

The procedure here is to add the above code into a js file which load on Single product page or create your own and load the js of the single product pages.

To test the code just open you developer console while viewing your page which has issue. Paste this code in console. Now toggle between the variations and now you can see that the error is gone.

Variable product Add to Cart button displays briefly when switching between 'out of stock' variations

1 Answers