3 new ways to display product dimensions in WooCommerce

In the world of WooCommerce, small details can make a big difference. And if your buyers love custom items, displaying WooCommerce product dimensions may be as important as other product attributes like shape, color, and material.

For many shop owners, product dimensions are an afterthought, an under-utilized tool they could put to much better use. For others, the limitations present in the default WooCommerce system prevent them from selling products in a way customers find appealing.

In this tutorial, we’ll explore:

• The limits of setting product dimensions in default WooCommerce.
• An easy way to add a 'Dimensions' tab to WooCommerce product pages using the WooCommerce Product Tabs plugin.
• How to use WooCommerce Product Table to display dimensions directly on the shop and product category pages.
• How to use WooCommerce Product Options to allow customers to enter their dimensions and calculate custom prices for made to measure products.
• Give you some tips on how to make the most of your product dimensions.

Understanding the limitations of WooCommerce product dimensions

Most physical items you’ll sell on WooCommerce will require product dimensions. You probably have multiple physical products with different shapes and sizes. For instance, when ordering furniture online, customers need to know the dimensions of the product. However, WooCommerce itself isn't great at displaying product dimensions.

The problem is that dimensions in WooCommerce are focussed heavily on calculating shipping prices. This helps to determine things like the WooCommerce shipping class and shipping rates. They're not designed to provide clear information to customers about the dimensions of the product.

Here's why:

Customers need to know the actual product dimensions, not the shipping dimensions.

Let’s say you sell computer parts and accessories. In this business, every little detail matters. If a customer wants to order a replacement screen for a 14-inch laptop, product dimensions will be helpful. Without precise dimensions on the single product page, this customer may order the wrong screen size. This leads to returns and a poor customer experience.

Even if you have multiple listing pages for each item size as a workaround, that comes with its own problems. That approach can quickly become confusing and burdensome for your customers. If you have variable products with 100 different screen brands with six fixed-size variations each, you’ll have to list 600+ extra pages. This can also hurt customer experience and performance.

Differently sized products may be shipped in the same size box, leading to confusion.

Here’s another example. Suppose your eCommerce store features multiple lamps of different sizes in their product images. If they are knocked-down kits that fit an identical shipping box, the product description must be clear about the dimensions.

If it only features the product dimensions of one variation, your customers may be underwhelmed upon delivery, especially if they want something smaller or larger.

Since product dimensions are fixed, customers cannot choose between multiple sizes of an item on a single page.

Another instance where you may need product dimensions is if you run a store that sells cloth material or protective plastic films that vary in length or size.

By default, the WooCommerce product dimensions feature may not capture product attributes like variety and lengths accurately.

Without a built-in system that allows buyers to order custom amounts of fabric or protective sheeting, your products may not display appealingly or intuitively.

Customers might need to enter custom dimensions and be charged by the size they require.

Just entering dimensions data for your WooCommerce products is only useful for displaying them as static information on your website. So what happens if you need to allow customers to enter their required dimensions, for example for cut-to-size products? And what if you need to charge custom product prices based on the dimensions they enter?

This is not at all possible in WooCommerce as it comes.

Using custom code to customize the default product dimension features can be expensive and time-consuming.

You can always customize the WooCommerce plugin code to add these features. This involves knowing about things like child themes, code snippets, and how to edit the functions.php file. You might also need some CSS and HTML knowledge. If you're not a developer then you will have to fork out tons of cash for a contractor or an in-house WordPress or PHP developer. Even where that’s possible, you’ll still need time to implement a complete solution.

Since most WooCommerce store owners lack the technical know-how and budget, it's often better to explore other options.

As you can see, simply adding product dimensions for shipping purposes fails to meet customers' needs. Fortunately, there are several excellent plugins that make it easy to handle product dimensions more effectively. I'll tell you about these next.

Solution 1: Add a 'Dimensions' tab to the WooCommerce product page

Customers expect to be able to find information about product dimensions quickly and easily. However, it's important not to clutter up the product page with too much information.

The solution is to use the WooCommerce Product Tabs plugin to add a Dimensions tab to the product page. You can call this anything you like, for example "Size Chart", "Size Information", and so on:

Adding custom tabs to the product page is an excellent idea because you can add as much information as you like to each tab, without making the page look too long. There are no limits to what content you can add to the Dimensions tab. For example, you could add:

• Text-based information about the product dimensions.
• Structured information such as size charts or downloadable documents.
• Any further guidance to help the customer measure up before placing an order.

As well as being able to add extra tabs, this tab manager plugin provides several other ways to enhance the product page. For example, you can add an icon to each tab so that customers have a more visual way of finding information. In the screenshot above, you can see that I added a ruler icon to illustrate the Size Chart tab.

For full setup instructions, read our tutorial about adding custom tabs to the WooCommerce product page. 

You can also follow the setup guide in this video:

Solution 2: Display product dimensions directly on the WooCommerce shop page

For products where customers need to know the dimensions, it's important to display this information in a prominent location. The WooCommerce Product Table plugin is perfect for this.

Instead of hiding away the product dimensions, this plugin takes your products and lists them in a conversion-boosting table layout. The table can contain as many columns of product data as you like and - you guessed it - you can include the product dimensions:

As well as displaying WooCommerce product dimensions, the product list view also enables buyers in your store to:

• Add other columns, such as product weight information - using whatever weight unit you like.
• Order several different sizes or product variations from a single page.
• Quickly search and sort products to find what they’re looking for.
• Explore an unlimited number of products straight from one page.
• Add items to the cart with one click of a button.

WooCommerce Product Table is easy to use and intuitive, regardless of tech skills or coding knowledge.

How to display product dimensions with WooCommerce Product Table

Want to get started with displaying product dimensions to on your main WooCommerce store pages? Here’s how to do it with WooCommerce Product Table:

1. First, you need to add the dimensions information to your WooCommerce products. Go to the 'Edit' screen for each product and open up the 'Shipping' tab in the 'Product Data' section. Enter the product width and length here.
2. Purchase and download the WooCommerce Product Table plugin.
3. Go to your WordPress admin site, then go to Plugins → Add New → Upload Plugin.
4. Install and activate the downloaded file, then follow the steps in the startup wizard to choose how you want your tables to behave. When you choose your table columns, make sure you include a 'dimensions' column. Tick the boxes to display the product table layout on your shop and category pages.

Now visit your main WooCommerce shop page on the front end of your website. You'll see the products listed in a table layout, complete with their dimensions information. Perfect!

Solution 3: Let customers enter their product dimensions

So far, you've learned how to display WooCommerce product dimensions on your main shop pages. That's fine if you just need to provide customers with clear information about the size of your products.

But what if you sell customizable products where customers need to enter their required dimensions? What if you need to change the cost of a product based on the dimensions that the customer inputs? To do this, you need the WooCommerce Product Options plugin.

WooCommerce Product Options lets you add a wide range of extra add-ons to your products. Most importantly, you can use it to add number fields to your product pages allowing customers to enter dimensions. You can either collect this infomration without changing the price, or you can create a custom price formula that dynamically changes the price based on the dimensions entered.

Let's illustrate this using the example of custom made curtains. The following screenshot shows some made-to-measure curtains where the customer can enter the required width and length in cm. They can also select various other personalization options. A custom price formula then calculates the correct price behind-the-scenes. This dynamically appears on the page, so the client can add the custom product to their cart and proceed to the checkout.

Similarly, let’s say you sell custom picture frames. Customers can create custom shapes and sizes or give you custom measurements. For this use case, they can add these measurements to their orders using a number field. 

WooCommerce Product Options is equally useful for many other types of cut-to-size products, such as fabric, wood, plastic sheeting, and so on.

By allowing customers to order by custom measurements, they can order the exact size and quantity needed and pay the correct amount.

Tips on optimizing your WooCommerce store product dimensions

Setting up product dimensions in your shop can be incredibly useful to customers. But, as the store owner, you must ensure the product dimensions displayed are clear and useful to your customer.

To do that efficiently, you need to present product data accurately. Also, ensure you double-check all product dimensions for accuracy, and include every relevant dimension. This will be different depending on the type of product. For example:

• Take the example of protective plastic wallpaper and fabric discussed earlier. These items are often flat sheets, which means you may only need two dimensions - the length and width. Ensure each type of product has accurate lengths and widths listed. That way, customers can order custom sizes based on their unique needs.
• In the case of lamps, kitchenware, or any other three-dimensional item, ensure to include height. That allows your customers to visualize and anticipate the size of an item. That also removes any confusion in case you ship items in a standard package or box.

Improve your WooCommerce store with better product dimensions

By now, you should understand how important it is to display clear information about product dimensions in your WooCommerce store. This can boost your business and grow your customer base. Clear product dimensions increase order accuracy and reduce customer complaints and costly return processes.

Getting this right can also enhance your competitive advantage. Better product dimensions open your business up to new customers who need items that meet specific units of measurement. That can propel you to the top of your niche, especially if your competitors aren’t displaying product dimensions clearly.

There are two excellent tools for improving how your WooCommerce store handles product dimensions, depending on the type of products you sell:

• WooCommerce Product Table lists products in a structured table layout, complete with product dimensions information. It's perfect for displaying product dimensions directly on your main shop pages, where customers can't miss them.
• The WooCommerce Product Tabs plugin improves how product dimensions are displayed on product pages. Add a 'Dimensions' tab with size information for each product, plus helpful extras like size charts.
• And finally, the WooCommerce Product Options plugin lets customers enter their own dimensions for custom products. This is perfect if you sell made-to-measure or cut-to-size items.

Ready to take your product dimensions to the next level? Choose one of the plugins listed above, and start making your customers' lives easier 😄