CODEWITHSUNDEEP
wordpresswoocommerce
Rain
Rain

Reputation: 259

Change WooCommerce attribute table to two columns

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.

enter image description here

Where can I actually modify the style and css for Product Page, so that I can have them in 2 columns?

enter image description here

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

Any guidance is very appreciated.

Upvotes: 0

Views: 827

Answers (1)

Kensai
Kensai

Reputation: 11

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>

Upvotes: 1

Related Questions