How to Display Dimensions of the Product Storefront

Are you looking for a quick solution to display the dimensions of a product? This post discusses how you can do that. WooCommerce offers you the power to design your site with several add-ons and functionality codes.

Table of Contents

You can display the dimensions of products in your WooCommerce store to gain trust in the customer’s eyes. Adding this feature will make the size and weight of the product more distinct and give the buyer an option to plan before buying.

Storefront Display Dimensions of the Product

This post shows you how it is easy to display measurements like the height, width, and weight of a product on the Shop page. Moreover, I will show you how to set the height, width, and weight of a product.

Steps to Display Dimensions of a Product on the WooCommerce Storefront Shop Page

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to display a product’s dimensions on the WooCommerce Storefront Shop Page.
Add the following code to the functions.php file of the Storefront theme.

/**
 *       Display Product Height, Length, Width @ Shop Page - WooCommerce
 */

add_action( 'woocommerce_after_shop_loop_item', 'njengah_show_product_dimensions_loop', 20 );

function njengah_show_product_dimensions_loop() {

   global $product;

   $dimensions = $product->get_dimensions();

   if ( ! empty( $dimensions ) ) {

      echo '<div class="dimensions"><b>Height:</b> ' . $product->get_height() . get_option( 'woocommerce_dimension_unit' );

      echo '<br><b>Width:</b> ' . $product->get_width() . get_option( 'woocommerce_dimension_unit' );

      echo '<br><b>Length:</b> ' . $product->get_length() . get_option( 'woocommerce_dimension_unit' );

      echo '</div>';       

   }
}

After the addition of the code, make sure that you input the product’s dimensions by going to Dashboard > Products > All Products.
Select the product, click This will open the Edit Product page. Scroll down to the product data section and click on Shipping and enter the dimensions of the product.
Remember to update the changes. The dimension will be shown in centimeters and will be in the following order, Length, Width, and Height.
This will be the outcome on the frontend:

Conclusion

In this post, you have learned how to display a product’s dimensions on the WooCommerce Storefront shop page. Although it is a small addition, showing dimensions can save time and money on both ends of the order. If you have any problems, please seek help from a WordPress developer.

Editorial Staff

How to Display Dimensions of the Product Storefront Theme

Storefront Display Dimensions of the Product

Steps to Display Dimensions of a Product on the WooCommerce Storefront Shop Page

Conclusion

Similar Articles

Related