How to hide variation on store page?

Hi @moroboro,

When an attribute is being used for variations, your customers must select a value for each attribute before a matching variation is shown to them – even if your variations don’t specify a value for that attribute. If you hide the attribute with CSS, the customer would not be able to add the item to the cart, because they could not select a value for the attribute.

If you don’t need your ‘Shipping Estimate’ attribute for variations, then you should either uncheck ‘Used for Variations’ or remove the attribute entirely. You can do that in the Product Edit screen under the attribute’s options.

To charge your customer shipping based on their location, you can configure your shop’s Shipping methods to do that.

If you have a specific plugin that you need help with (it looks like you have a variation swatches plugin), you might want to contact that plugin author for further assistance.

I hope that helps, let me know if you have any further questions!

Thank you for your quick response. I can’t remove variations and attributes, as the plugin works with automatic synchronization with another site. I can’t delete variations – the synchronization will be lost. But if, for example, I chose one of the default variation attributes, then a good option would be to hide this variation. But how?

Hi @moroboro,

Interesting problem! If you for some reason can’t disable the variation, then you can like you say set a default value for the attribute, ensuring that your variations will be accessible by either assigning them to the default value or to the ‘Any …’ value for that attribute.

It will look like this:

Direct Link: https://d.pr/i/KapL5l

This attribute can then be hidden with some custom CSS. Under Customize → Additional CSS, you can add the following code to hide the 2nd row of the variations selection table on single product pages (You can change the number innth-child to 1 for the 1st child, 3 for the third, etc.):
?

/* Hide 2nd variation attribute selection | LDG forums */
.single-product .variations tr:nth-child(2) {
  display:none;
}

This is an example that works in default WooCommerce with Storefront. You may be able to use it on your site, or use it as an example to extend yourself if your theme or plugins prevent it from working as-is. You can also contact the theme/plugin author for advice if you find that is the case.

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

I hope that helps, let me know if you have further questions!

• This reply was modified 3 years, 5 months ago by lionel.a11n.

Thank you very much. Interesting option!
In my theme (Flatsome), this code work. )) But Can this code be linked to the name of the attribute, and not to the number of lines? Because the attributes can be not two, but three, for example.

• This reply was modified 3 years, 5 months ago by Moroboro.
• This reply was modified 3 years, 5 months ago by Moroboro.
• This reply was modified 3 years, 5 months ago by Moroboro.
• This reply was modified 3 years, 5 months ago by Moroboro.

Yes. this code hides the 2nd row. This works, but not correctly. Because sometimes there are 3 or 4 attributes. It is necessary that a particular row is hidden. How do I link this code to the row name?

Hello @moroboro,

Unfortunately the attribute names are not actually in the HTML as CSS IDs or class names, which is why I went with the nth-child approach.

To achieve what you want, you can limit your CSS to certain post/product IDs by examining the body classes for the product, such as postid-85. Different themes may apply those individual body classes differently (or not at all), so you may have to examine your product pages for the exact format.

Once you have that class, you can stack the CSS rules as follows (note the last rule should not have a comma after it):

/* Hide nth attribute for some products | LDG forums */
.postid-85 .variations tr:nth-child(2), 
.postid-92 .variations tr:nth-child(2), 
.postid-104 .variations tr:nth-child(3) {
  display:none;
}

These product IDs are just samples – from here you can customize the code to your needs, and if you have trouble you may have to contact the theme author or a developer for more advanced help.

I hope that helps!

You’ve been very helpful, thank you.