WooCommerce Product Page css

admin管理员组

文章数量:1328031

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

Share Improve this question asked Sep 29, 2020 at 19:21 RainRain 11122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.)

本文标签： WooCommerce Product Page css