I'm new to Wordpress/WooCommerce and I'm trying to do something I thought would have been simple.
The very basic WooCommerce Single Product page has the Product Attributes, they all appear under one big column.
Where can I actually modify the style and css for Product Page, so that I can have them in 2 (or more) columns instead of one big row?
I see the table is itself is generated under class "woocommerce-product-attributes" and "shop_attributes" ?
I'm new to Wordpress/WooCommerce and I'm trying to do something I thought would have been simple.
The very basic WooCommerce Single Product page has the Product Attributes, they all appear under one big column.
Where can I actually modify the style and css for Product Page, so that I can have them in 2 (or more) columns instead of one big row?
I see the table is itself is generated under class "woocommerce-product-attributes" and "shop_attributes" ?
Share Improve this question asked Sep 29, 2020 at 19:21 RainRain 1112 bronze badges1 Answer
Reset to default 1You've actually done most of the work finding this by identifying the classes (good job!). All you then had to do was to grep the WooCommerce code for those two - and you'll find them both in templates/single-product/product-attributes.php.
So all you need to do to restructure the table is to override the single-product/product-attributes.php template and build the table as you'd like. You'll need to add this to your theme, or make a child theme, and include the modified version there. From the WooCommerce docs:
- Template structure & Overriding templates via a theme - How to edit files
- Declaring WooCommerce support in themes
(I don't think it's possible to restructure the table by CSS alone, since this is an HTML table with one TR per attribute - I think you'll have to change the HTML. But I may be wrong.)