Home › Forums › WoodMart support forum › Problems with add to cart button if product out of stock
Problems with add to cart button if product out of stock
- This topic has 13 replies, 3 voices, and was last updated 1 year, 3 months ago by Elise Noromit.
-
AuthorPosts
-
June 25, 2023 at 2:47 pm #477105
metuzaParticipantHello,
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
RuneJune 26, 2023 at 1:02 am #477128
Elise NoromitMemberHello,
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
June 26, 2023 at 9:21 am #477172
metuzaParticipantHello,
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
RuneJune 27, 2023 at 2:19 am #477419
Elise NoromitMemberHello,
Please provide the URL of our of-stock product and a screen of what I should test.
Best Regards
June 27, 2023 at 9:55 am #477481
metuzaParticipantThe 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
June 27, 2023 at 10:14 am #477484
metuzaParticipantAnd 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
June 28, 2023 at 12:06 am #477749
Elise NoromitMemberHello,
We are glad you have solved the issue.
If you have any questions please feel free to contact us.
Best Regards
June 28, 2023 at 12:32 am #477763
metuzaParticipantHmm, 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?
June 30, 2023 at 12:37 am #478334
Elise NoromitMemberHello,
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
June 30, 2023 at 11:44 am #478442
metuzaParticipantSorry, 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 1 year, 3 months ago by metuza.
July 2, 2023 at 4:40 pm #478718
metuzaParticipantAlso 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
July 3, 2023 at 9:27 am #478778
Bogdan DonovanKeymasterHello,
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
July 3, 2023 at 9:32 am #478782
metuzaParticipantSounds great, thank you 🙂
Brgds
RuneJuly 4, 2023 at 2:02 am #478974
Elise NoromitMemberYou are welcome!
Wish you a wonderful day!
-
AuthorPosts
The topic ‘Problems with add to cart button if product out of stock’ is closed to new replies.
- You must be logged in to create new topics. Login / Register