Customize WooCommerce attribute table to two columns - php

Question

I'm looking for some help getting customize the attribute table on WooCommerce.
<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>
I tried modify the above snippet in order to break line between Attribute Name and Attribute Value to display the attributes like it is in the below picture.
attributes
Is there any easy hook to get this work?
Thanks in Advance.

Answer 1

Create child-theme in case of theme update to not lose your settings.
Create in child-theme folders /woocommerce/single-product/ and copy from woocommerce/templates/single-product the file product-attributes.php.
Change:
defined( 'ABSPATH' ) || exit;
if ( ! $product_attributes ) {
return;
}
?>
<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
defined( 'ABSPATH' ) || exit;
if ( ! $product_attributes ) {
return;
}
$i = 0;
?>
<div class="woocommerce-product-attributes shop_attributes">
<?php foreach ( $product_attributes as $product_attribute_key => $product_attribute ) : ?>
<div class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
<div class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $product_attribute['label'] ); ?></div>
<div class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $product_attribute['value'] ); ?></div>
</div>
<?php
if ($i % 2 != 0){
echo '<div class="clear"></div>';
}
$i++;
endforeach; ?>
</div>
add CSS
/*2 Columnt style on product attributes*/
.woocommerce-product-attributes.shop_attributes .woocommerce-product-attributes-item {
float: left;
width: 50%;
margin-bottom: 8px;
padding-right:10px;
}