Search code examples
csswordpresswoocommercehtml-tableproduct

How target only WooCommerce single product pages with CSS?

When I add tr { display: inline-grid; } it causes issues in cart page and other pages. How to apply it only in product page?

I need to put the variations under the attribute name. Please see the following screenshots:

Screenshot 1:

enter image description here

Screenshot 2:

enter image description here

I also need to reduce the space between variations if the product has 2 variations:

tr { display: inline-grid; }
Solution

  • To target single product pages, use the body class: single-product.

    To target the attribute dropdowns table for variable products, use: table.variations

    All together:

    .single-product table.variations tr { display: inline-grid; }

    It should work as desired.