Attribute table – every second line grey

Hello!

I found website online, which is using Woodmart theme as well.
How can I achieve the same effect – every second line in attributes table are with grey background?

See photo attached. And the link from the website, where I saw this effect, in privata content.

Attachments:

You must be logged in to view attached files.

Hello,

The Additional Information tab on the WooCommerce Single Product Page displays information about product dimensions, weight, and possible attribute terms. Please add these terms into your site and share the page url so i will check it on your site and give you a possible solution.

Best Regards.

Hello, Aizaz!

You didn’t get what I asked 😉 I have added all the attributes already. I am asking about visual formatting (CSS). How to achieve effect like in picture I have added as sample from another site, which uses Woodmart theme- one attribute with no background, second attribute with grey background, third – white background, fourth – grey background and so on.. 😉

Hello,

Inspect your attribute, and see which class relates. I am inspecting “pa_valsts”. See the all attributes classes and add the background color:
https://ibb.co/tK6K6K8

Add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

tr.woocommerce-product-attributes-item--attribute_pa_valsts {
    background-color: #d9baba;
}

tr.woocommerce-product-attributes-item--attribute_pa_zimols {
    background-color: gray;
}

Best Regards.

Hello, Aizaz!

Thanks.. This css adds the code, but it looks really bad (see attached, and it doesn’t matter, that color can be changed) and it is not working the same way as in the site, I have sent You.. :/ I inspected the code and when I compare, with this css code, this one adds extra line with background color info, which is not finded in that other site..

And to use css like this for each seperate attribute is difficult, because there is a lot of products with different attributes – some attributes are all the same for all the products, some are not. And some are global attributes, some are not as well.

I was hoping to use some css for all the attribute table (for example with this .shop_attributes).

And in that other site height for all the rows is smaller… Can that be adjusted as well?

Attachments:

You must be logged in to view attached files.

Hello,

Add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.shop_attributes th {
    padding-left: 15px !important;
    padding-top: 15px !important;
    calc(var(--wd-attr-v-gap) / 1);
}

tr.woocommerce-product-attributes-item--attribute_pa_valsts {
    background-color: #fdfafa !important;
}
tr.woocommerce-product-attributes-item--attribute_svars-gb {
    background-color: #fdfafa !important;
}

tr.woocommerce-product-attributes-item--attribute_garums-mm {
    background-color: #fdfafa !important;
}

tr.woocommerce-product-attributes-item--attribute_lietderabgais-platums-mm {
    background-color: #fdfafa !important;
}

Best Regards.

[Author]

Posts