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" ?

• woocommerce-offtopic

1 Answer 1

You'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.)