Hide product variants that are crossed out

Hello,

On our website, we have products that have many different selectable variants. You can make different combinations with things such as color, weight, and diameter. For some colors, we have more different weights available than others.

We are currently using the tile layout from your theme for the selectable variables. What happens, however, is that some weights are crossed out when selecting a color that offers fewer different weights.

What we would like to happen is that those options disappear entirely when selecting the product. I’ve linked a page from our website as an example. If you require further information please don’t hesitate to let me know.

Hello,

Sorry for the delay.

Try to use the below code to achieve such behavior.

.single-product .wd-swatch.wd-disabled {
    display: none;
}

Kind Regards

Hello,

Thank you so much, that resolved our issue completely.

I do have 1 more question. For some reason most CSS that I paste in the “Theme File Editor” field does not work. But it does work if we paste in the “Customize” field with this theme. Would you be able to tell me why this is?

Hello,

I cannot tell you exactly, but I suggest you paste all CSS code to Theme Settings -> Custom CSS.

In the meantime, feel free to ask me any questions you may have.

Kind Regards

Hello Luke,

Sorry to take you up on your offer for more questions :).

We have recently discovered that when a specific product variant is out of stock. The cart only states the general product name and not the specific variant of that product. Please see the attached screenshot as an example. As you can see in the screenshot there are 2 “EasyFil ePETG” products in the cart, but the cart message simply states to remove EasyFil ePETG from the cart.

As you can imagine, this causes a lot of trouble for customers as we have many variants that customers order from 1 general product. Do you know if there is a way to get the cart to show the specific variant that is not in stock instead of the general product?

Thank you so much.

Attachments:

You must be logged in to view attached files.

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Kind Regards

Hello,

Yes, please find below the information.

Hello,

On my side, I have an alert message that does not allow me to confirm adding a product to the cart.

https://prnt.sc/zFfaJ57lf4NM

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Kind Regards

Hello Luke,

This is correct, a product can’t be added to the cart if it is not in stock. But if you happen to have filled your cart before, and come back later and 1 of the products is no longer available. The website will ask you to remove that product from your cart. This is when the problem from my previous screenshot occurs.

I’m not sure about other themes, as some themes do not allow variable products like Woodmart does. When you checkout or view your cart in this theme for example, you do see all the variance for the products. In our case diameter, weight, and color. If the cart and invoice etc. is able to display this, is there no way for the cart message to display this as well?

Hello,

The thing is that the prices, stock, such alerts in the cart as you describe above, etc. come from WooCommerce so would be better to check how it works with some default WordPress themes like WooCommerce Storefront to understand is it our theme issue or not.

Let me know the result.

Kind Regards

[Author]

Posts