By default, WooCommerce shows product dimensions in a single line like this:
Dimensions: 20 × 10 × 5 cm
While this works, it’s not always the clearest format—especially if you want your customers to quickly understand which value is the length, which is the width, and which is the height.
A simple code tweak can make WooCommerce display each measurement with a label. Once added, your product’s Additional Information tab will display dimensions in a much clearer way:
PHP Snippet: Show Length, Width, and Height with Labels in WooCommerce Product Dimensions
/**
* @snippet Show Length, Width, and Height with Labels in WooCommerce Product Dimensions
* @author Anjan Phukan
* @testedwith WooCommerce 10.0.2
* @theme Storefront
* @tutorial https://www.zealopers.com/woocommerce-tutorials/how-to-show-length-width-and-height-with-labels-in-woocommerce-product-dimensions/
*/
add_filter( 'woocommerce_display_product_attributes', 'zlp_length_width_height_with_labels', 10, 2 );
function zlp_length_width_height_with_labels( $product_attributes, $product ) {
$length = $product->get_length();
$width = $product->get_width();
$height = $product->get_height();
$unit = get_option( 'woocommerce_dimension_unit' );
if ( $length || $width || $height ) {
$values = array();
if ( $length ) {
$values[] = __( 'Length', 'woocommerce' ) . ': ' . wc_format_localized_decimal( $length ) . ' ' . $unit;
}
if ( $width ) {
$values[] = __( 'Width', 'woocommerce' ) . ': ' . wc_format_localized_decimal( $width ) . ' ' . $unit;
}
if ( $height ) {
$values[] = __( 'Height', 'woocommerce' ) . ': ' . wc_format_localized_decimal( $height ) . ' ' . $unit;
}
// Replace default "Dimensions" row with labeled version
$product_attributes['dimensions'] = array(
'label' => __( 'Dimensions', 'woocommerce' ),
'value' => implode( ', ', $values ),
);
}
return $product_attributes;
} Where to add this snippet?
You can place this PHP snippet at the end of your child theme’s functions.php file. Please make sure you know what you are doing and take a backup of the file before making any changes. Please do not add custom code directly to your parent theme’s functions.php file becasue whenever you update the theme the codes will be deleted.
Did it work for you?
Please let us know in the comments section below if the tutorial was helpful to you and the codes worked out for you as anticipated.
