Adding product dimensions and weight to the WooCommerce cart page can help customers better understand the products they’re purchasing. This feature is particularly useful for stores selling physical goods like furniture, appliances, or parcels where size and weight matter for shipping.
In this guide, we’ll show you how to dynamically display product dimensions and weight on the WooCommerce cart page, all without using a plugin.
Step 1: Add Dimensions and Weight Data to Cart Items
To display dimensions and weight, you first need to pass this data to each cart item so it’s accessible on the cart page.
Code to Include Dimensions and Weight in Cart Data
Add the following code to your theme’s functions.php file or a child theme:
/*
* Snippet: How to Display Product Dimensions and Weight on the WooCommerce Cart Page – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1763
* Tested with WooCommerce 10.7.0
* "This function adds product dimensions and weight to cart item data"
*/
function wcsuccess_add_dimensions_to_cart_item( $cart_item_data, $product_id, $variation_id ) {
$product = wc_get_product( $variation_id ? $variation_id : $product_id );
$cart_item_data['dimensions'] = $product->get_dimensions();
$cart_item_data['weight'] = $product->get_weight();
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'wcsuccess_add_dimensions_to_cart_item', 10, 3 );
Explanation:
- Cart Item Data: Adds dimensions and weight to each cart item when it’s added to the cart.
- Dynamic Product Type: Handles both simple and variable products by checking
$variation_id.
Step 2: Display Dimensions and Weight on the Cart Page
Next, use a WooCommerce hook to display the dimensions and weight below each product name in the cart table.
Code to Display Dimensions and Weight
Add this code to your functions.php file:
/*
* Snippet: How to Display Product Dimensions and Weight on the WooCommerce Cart Page – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1763
* Tested with WooCommerce 10.7.0
* "This function displays product dimensions and weight on the cart page"
*/
function wcsuccess_display_dimensions_in_cart( $cart_item, $cart_item_key ) {
$product = $cart_item['data'];
$dimensions = $product->get_dimensions();
$weight = $product->get_weight();
if ( ! empty( $dimensions ) || ! empty( $weight ) ) {
echo '<div class="product-meta" style="font-size: 14px; color: #555; margin-top: 5px;">';
if ( ! empty( $dimensions ) ) {
echo '<strong>Dimensions:</strong> ' . esc_html( wc_format_dimensions( $dimensions ) ) . '<br>';
}
if ( ! empty( $weight ) ) {
echo '<strong>Weight:</strong> ' . esc_html( $weight ) . ' ' . get_option( 'woocommerce_weight_unit' ) . '<br>';
}
echo '</div>';
}
}
add_action( 'woocommerce_after_cart_item_name', 'wcsuccess_display_dimensions_in_cart', 10, 2 );
Explanation:
- Dimensions and Weight Display: Fetches and formats the dimensions and weight for each product in the cart.
- Dynamic Units: Automatically applies WooCommerce settings for weight units (e.g., kg or lbs).
Step 3: Add Optional Styling for Dimensions and Weight
To ensure the dimensions and weight display neatly on the cart page, add some custom CSS.
CSS for Dimensions and Weight
Add this CSS to your theme’s style.css file or the WordPress customiser:
.product-meta {
font-size: 14px;
color: #555;
margin-top: 5px;
}
.product-meta strong {
font-weight: bold;
color: #333;
}
Explanation:
- Font and Colour: Sets the dimensions and weight text to a smaller font size with a light grey colour for subtlety.
- Styling for Labels: Highlights the labels (e.g., “Dimensions” and “Weight”) in bold.
Step 4: Test the Functionality
Example Workflow:
- Add Products to Cart:
- Add one or more products with dimensions and weight to the cart.
- View the Cart Page:
- Confirm that the dimensions and weight are displayed under each product name.
- Adjust Styling:
- Use the provided CSS to ensure the layout matches your store’s design.
Example Use Case
- Product Setup:
- Ensure your products have dimensions (length, width, height) and weight configured in WooCommerce.
- Front-End Display:
- Dimensions like “10 x 20 x 30 cm” and weight like “2 kg” appear below each product in the cart table.
- Enhanced User Experience:
- Provides customers with important details, improving transparency and satisfaction.
Conclusion
Displaying product dimensions and weight on the WooCommerce cart page is a simple way to provide customers with useful information. By following this guide, you can enhance the shopping experience while making your store more transparent and user-friendly.
Test these changes in a staging environment before deploying them to your live site. For more WooCommerce customisation tips, check out our WooCommerce Visual Hooks Guide or use our wp-config generator for advanced configurations.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
