Change WooCommerce attribute table to two columns

Question

I'm very 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 columns?

I see the table is itself is generated under class "woocommerce-product-attributes" and "shop_attributes" ?

Any guidance is very appreciated.

You can overwrite the following template file (see explanation in the template file on how to do this correctly). There you can adjust the html output of the table to your wishes — 7uc1f3r

Kensai Kensai · Accepted Answer · 2020-11-30T14:57:36

Had the same issue, solved it by editing woocommerce/templates/single-product/product-attributes.php. To make the change permanent between woocommerce updates, copy the file contents to yourtheme/woocommerce/single-product/product-attributes.php.

Change:

<table class="woocommerce-product-attributes shop_attributes">
    <?php foreach ( $product_attributes as $product_attribute_key => $product_attribute ) : ?>
        <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
            <th class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $product_attribute['label'] ); ?></th>
            <td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $product_attribute['value'] ); ?></td>
        </tr>
    <?php endforeach; ?>
</table>

to:

<table>
<?php foreach (array_chunk($product_attributes, 2) as $product_attribute_key => $product_attribute) :{ ?>
    <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
    <?php foreach ($product_attribute as $value) :{ ?>
              <th class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $value['label'] ); ?></th>
              <td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $value['value'] ); ?></td>
    <?php } endforeach; ?>
    </tr>
<?php } endforeach; ?>
</table>

Change WooCommerce attribute table to two columns

1 Answers