[Oxley-2014Participant]

Rad,
Hello,

Actually this code is also modifying the “Cart page” table and the “Checkout page” table.

table.shop_attributes seems to be the name of the single product page table.
table.shop_table.shop_table_responsive seems to be the name of the cart page table.
table.shop_table.woocommerce-checkout-review-order-table seems to be the name of the checkout page table.

I tried using these names in order to modify one table without modifying the others without success…

Could you help me with this last request, please?
Thanks in advance.

Regards,

[RadModerator]

Hi there,

You can use these

.woocommerce div.product .woocommerce-tabs table for product tables

.woocommerce .cart.shop_table for cart upper table

.woocommerce .cart-collaterals .cart_totals for cart lower table (total)

.shop_table.woocommerce-checkout-review-order-table and cor checkout table.

What modification and styling you’re adding to them? Some styling is deeply implemented to table cells, hence, just styling the main table may not work.

Thanks!

[Oxley-2014Participant]

Rad,
Hello,
Sorry for a late answer.

My goal at this stage is to set a background color for the text you can read when you use the nav-tabs “Information complementaire” on the single product page. More precisely the background of the table that is displayed there.

When using “.woocommerce div.product .woocommerce-tabs table, table th, table td” I get the result I am looking for but unfortunately that also modifies the tables that are displayed on the cart page and on the checkout page.

I would like to be able to target the specific single product page (nav-tabs) table without affecting the cart and the checkout page tables. Or being able to affect the cart page table without impacting the single product page (nav-tabs) table and the checkout page table.

For this attempt the background is supposed to be green and the text is in dark grey. Here is what I got:
Picture 1 is what I wish.

https://www.dropbox.com/s/q0dylmh9k5d87bh/8%20-%20Code%20.woocommerce%20div.product%20.woocommerce-tabs%20table%2C%20table%20th%2C%20table%20td%20-%20SINGLE%20PRODUCT.png?dl=0

But you can see on picture 2 (cart page) and picture 3 (checkout page) that other tables are affected too and I don’t want these tables being affected:

https://www.dropbox.com/s/z7geyxt4ax1a9wq/9%20-%20Code%20.woocommerce%20div.product%20.woocommerce-tabs%20table%2C%20table%20th%2C%20table%20td%20-%20CART%20PAGE.png?dl=0

https://www.dropbox.com/s/v5x3h6s3c857wmv/10%20-%20Code%20.woocommerce%20div.product%20.woocommerce-tabs%20table%2C%20table%20th%2C%20table%20td%20-%20CHECKOUT%20PAGE.png?dl=0

Can you help me with the code, please?

Regards,

[LelyModerator]

Hello There,

Please use this custom CSS:

.single-product .woocommerce-tabs .x-tab-content table.shop_attributes th,
.single-product .woocommerce-tabs .x-tab-content table.shop_attributes td {
    background: #5faa37;
}

As you can see .single-product at the start of the css will make sure that it will not affect other woocommerce pages too.

Hope this helps.

[Oxley-2014Participant]

Lely,

Thank you for your answer.
This is exactly what I needed.

And again thanks to Rad for his help and patience.

Awesome job, guys!

Regards,

[Rue NelModerator]

Hello There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[Author]

Posts