Problems with add to cart button if product out of stock

Hello,

I have noticed that when quick shop grid design is used and the viewed product is out of stock the related products in show an eye in the add to cart button instead of a shopping basket. This happens when viewed using a mobile unit.

You can see the issue here, just use your smartphone and scroll down to the related products area:
https://www.arctic-fritid.no/produkt/ferie-og-fritid/sol-og-fiskebriller/hurricane-premium-solbriller-rod/

Brgds
Rune

Hello,

I have checked the product page and I am afraid I do not get the problem.

Could you describe the actions step by step?

Best Regards

Hello,

Make sure you are in mobile view, either in a phone or using the browsers tool. Screen width less than 1024px.

Then when you are visiting the single product which are out of stock, scroll down to the related product grids. There you will find a lot of products with a blue add to cart button. To the left in the button you will see the quantity selector and in the right of the button you will see an eye icon, NOT the basket icon.

If you then visit a product that is in stock and scroll down to the related product section you will see that all products in the grid has a basket icon in the add to cart button, unless sold out products.

So it seems like add to cart button inherit the icon from the single product as when single product is sold out the button icon is an eye.

Brgds
Rune

Hello,

Please provide the URL of our of-stock product and a screen of what I should test.

Best Regards

The url is provided in my first message and a detailed explanation for what you should look for you can read in my second message. As mentioned when a single product is out-of-stock then related product get the wrong icon in add to cart button. There is nothing for you to test, just fix the issue.

Rune

And this is the CSS that override the button with the wrong icon:

.product-type-simple.outofstock .wd-add-btn-replace .add-to-cart-loop::before, .wd-add-btn-replace .add-to-cart-loop.product_type_grouped::before {
content: “\f11a”;
font-family: “woodmart-font”;
}

The above css override the css for instock products.

Rune

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

Hmm, i have not solved the issue. In my last message i tried to explain what is happening and what need to be fixed. As you can see the mentioned outofstock CSS is overwriting the instock CSS so all add to cart buttons gets the wrong icon.

Why it is so damn difficult to understand?

Hello,

This is not a bug, the theme change of the products cannot be purchased directly from the grid and they are marked as eye icons or link if it is an external product.
If you do not like that, use this code to get the default icons:

Please add the code to the Theme Settings > Custom CSS > Global:

body .product-type-simple.outofstock .wd-add-btn-replace .add-to-cart-loop:before, 
body .wd-add-btn-replace .add-to-cart-loop.product_type_grouped:before {
content: "\f123";
}

If you have any questions please feel free to contact us.

Best Regards

[metuza]

Sorry, but I am using the quick shop options from woodmart settings. That means all products can be purchased from grid unless bundles, external. grouped etc. But ALL simple products can be purchased from the grid and should have the correct icon.

But on our sites ALL products get the eye icon which is a bug with woodmart. Tested on 4 sites. And you can check the issue on every single product which is out of stock, you will then see that ALL products in the related grid get the eye icon, no matter which product type.

Then you can check the store page and you will see that all instock products has the correct icon and is purchasable from the grid.

You can even see the issue on your desktop. The button show text KJØP and if you hover the grid item then it changes to an eye icon. Then you can view all the same products in shop or archive pages and you will see that the basket icon appear, wich is correct behavior.

So please learn how woodmart theme works.

Rune

• This reply was modified 10 months ago by metuza.

[metuza]

Also the css you refer to is completely wrong as it will show the basket icon on all products regardless of whether the single product has status outofstock or not.

A more correct css to use will be this one:

.single-product .outofstock .products .product-type-simple.instock .wd-add-btn-replace .add-to-cart-loop::before,
.single-product .outofstock .products .product-type-variable.instock .wd-add-btn-replace .add-to-cart-loop::before {
  content: "\f123";
}

Then the correct icon will appear in the product-grid if the single product has status outofstock.

The css itself explain the issue with woodmart very well, you should easily see the problem caused by woodmart when a single product has status outofstock.

As mentioned many times, the issue appear ONLY when single product has status outofstock. When it has status instock then everything works perfectly fine.

Rune

• This reply was modified 10 months ago by metuza.
• This reply was modified 10 months ago by metuza.

Hello,

Sorry for misunderstanding, we are found following issue with single product out of stock product. You can use the following custom code to fix this issue:

.single-product-page.product-type-simple.outofstock .product-grid-item:is(.product-type-simple,.product-type-variable).instock .wd-add-btn-replace .add-to-cart-loop:before {
	content: "\f123";
}

Or use your solution that will work the same. This issue will be fixed in the next theme update.

Kind Regards

Sounds great, thank you 🙂

Brgds
Rune

You are welcome!

Wish you a wonderful day!

[Author]

Posts