John Davidson

Message:

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.

---

My Answer:
To customize the attribute table on WooCommerce to display in two columns, you can use the following code snippet in your theme's functions.php file:

php
// Customize WooCommerce attribute table to two columns
add_filter( 'woocommerce_display_product_attributes', 'custom_display_product_attributes', 10, 2 );
function custom_display_product_attributes( $html, $product ) {
$attributes = $product->get_attributes();

if ( ! $attributes ) {
return $html;
}

$output = '';
$i = 0;

foreach ( $attributes as $attribute ) {
$i++;

if ( $i % 2 == 1 ) {
$output .= '';
}

$output .= '';

if ( $i % 2 == 0 || $i == count( $attributes ) ) {
$output .= '';
}
}

$output .= '

' . wc_attribute_label( $attribute->get_name() ) . '	' . wpautop( wptexturize( $attribute->get_options() ) ) . '

';

return $output;
}


This code will display the product attributes in a two-column table format. You can customize the table styling further by adding CSS to your theme's stylesheet.

Please note that modifying the functions.php file directly is not recommended as it can break your site if not done correctly. It's always a good idea to create a child theme or use a custom plugin to add custom code.