How to create a WooCommerce size guide

Clothing is the number one most-purchased product category for US consumers in eCommerce stores, and apparel sales in eCommerce stores account for over $60 billion in revenue in the US alone.

As clothing is the most popular item in eCommerce stores, you may be offering it to your customers (even if it’s just swag tee shirts with your logo). However, one of the worst parts about buying apparel online is getting sizing right, which is where a size chart or size guide comes into play. These can help customers determine what size to purchase, reducing confusion for them and increasing sales for you.

Displaying a size guide on a product page is expected by your customers when purchasing clothing, and you can add a size guide via several methods. We’ll focus on creating a WooCommerce size guide in this article, but it’s important to note that you could use option 2 or option 3 with any eCommerce plugin to display a size chart to your customers.

Many times, shop owners want to display a size guide in table form, but they’re not sure how to create a table they can use on their websites. If you don’t know how to create an HTML table, you can use a table generator to help you out — they typically give you a GUI to create your table so you can add rows, columns, and cell data.

Once you’ve created your table, you probably want to disable CSS and copy the HTML for the table to your clipboard (or put it in a text document) so we can add it to your site.

One thing I would add is a unique class to the table element (like class="wc-size-chart" or similar) so you can style this table if needed later. Replace <table> with:
<table class="wc-size-chart">

Before we talk about any of the different approaches you can take to add this to your site, note that you can simply paste this HTML table anywhere into the WordPress editor if you’d like to. Put it right into the product description and you’re done smile

This is helpful if you only need one or two size guides added to your site; the solutions I’m about to outline here are more helpful if you have several products that need size guides, so keep this in mind.

This is the only solution here that’s WooCommerce-specific. You can easily display size guides in a product tab using the Tab Manager plugin ($99). This is especially helpful if you want to show a size guide automatically on all products, or if you have a couple of size guides to choose from that you’ll add to several products.

You can create one or more size guide tabs by pasting your HTML table into a new tab. Go to “Add Global Tab” to add a new tab that will be accessible for all products, then add your size guide table and any other text here.

This tab is now available for all products in your shop. If you automatically want to display it on all or most of your products, you can add it to your default tab layout. Go to the “Default Tab Layout” tab and then add your new global tab to this layout. You can drag and drop the tab order to determine how they’re displayed on your product page.

If you needed to remove the size guide for a few products, you can override the tab layout for those products alone and remove this default tab.

You can also use overriding to add the tab to individual product pages. This is also helpful if you have a few versions of your size chart that you’ll need to add to products.

While editing a product, you can override the tab layout, and add your global tab as needed.

If your size guide only relates to a single product, you can also add a custom tab instead and skip all of the steps to create a global tab, as you won’t need to reuse it among other products.

Once your size guide tab has been added, you can now view it as one of your product tabs:

If you want to display your size guide elsewhere, such as part of a product description or short description, you could consider creating a custom shortcode to output the style guide. A shortcode approach will work for WooCommerce along with any other eCommerce plugin. However, you should be familiar with adding custom code to your site to use an approach like this.

The benefit to using a shortcode is that, if you need to update your table in the future, you can update the contents in one place (the code that adds the shortcode), and the change is immediately reflected across all products.

Adding a shortcode is pretty straightforward, and you could use something like this code to create one (replacing the <table> part with your table HTML of course):

This will now make the [wc_size_guide] shortcode available on your site. This shortcode is not specific to WooCommerce, so you could use it anywhere or with any plugin; it just outputs your table HTML to the page.

You can add this to your product description or short description as desired:

When it’s been added, it will render your WooCommerce size guide where it’s been placed:

Note that I did have to add a tiny bit of CSS to my site to fix the table layout, so you may need to add some CSS to your custom stylesheet or custom CSS plugin if your table is too wide for its container. Here’s the CSS I used with the Storefront theme:

table.wc-size-chart {
    table-layout: fixed;
}

table.wc-size-chart th, 
table.size-chart td { 
    padding: 0.6em;
}

Any eCommerce plugin will allow you to insert size guides by:

• pasting an HTML table into the product description
• using a shortcode to output the table HTML

If you use WooCommerce, you can use the above strategies to add a WooCommerce size guide, or you can also use a product tab to output your size guide for customers. As they’re very easy to include, there’s no reason to omit them from your products and leave customers wondering which size they should purchase for any apparel that you sell.