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.

Generating Your Size Guide

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.

Generate HTML table

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">

The Quick Solution: Paste this Table

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 🙂

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.

Option 1: Create a WooCommerce Size Guide Tab

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.

WooCommerce Tab Manager tabs

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.

Create WooCommerce size guide tab

Create size guide tab

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.

Add WooCommerce size guide tab to default

Add tab to default layout

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.

Add WooCommerce size guide tab to product

Add tab to product layout

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:

WooCommerce size guide tab displayed

Option 2: Create a WooCommerce Size Guide Shortcode

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 straight forward, 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:

WooCommerce size guide shortcode

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

WooCommerce size guide shortcode displayed

Shortcode displayed

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;
}

Option 3: Create a WooCommerce Size Guide Image

If your size guide probably won’t change much in the future, you can consider using an image since you won’t need to update its content. This makes it super easy to put your size guide image anywhere on your site. You can also use this approach with any eCommerce plugin.

Once you’ve uploaded your site guide image to your media folder, you can add it to your product description or short description.

WooCommerce size guide image

However, it may not display the way you want it to, depending on the size of the space in which you display the image.

WooCommerce size guide image

The good news is that using an image makes it very easy to open your image in a lightbox instead of putting it directly into the page. WooCommerce loads the prettyPhoto lightbox for its product images, so since we’ll be adding the size guide to product pages, we can piggyback off of this.

If you use something other than WooCommerce, you might be able to use this trick, but you you’ll need to see if your theme or another plugin makes a lightbox script available, or you’ll need to install a lightbox plugin.

In order to use the WooCommerce lightbox on a product page, we’ll need to apply the data-rel="prettyPhoto" attribute to our image link. The reason I like this is that we can use a text link (like “View size chart”) and open the image in a lightbox. We’ll add our link to the product short description by using the text editor like this:

<a data-rel="prettyPhoto" href="img_url.png">View Size Chart</a>

WooCommerce size guide lightbox link

Link to open in lightbox

This will display in our short description as a text link:

WooCommerce size guide link

When clicked, it will open the size guide image in a lightbox:

WooCommerce size guide lightbox

Lightbox Size Guide

Adding Size Guides to Your Products

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

  • pasting an HTML table into the product description
  • adding an image of a size guide into the product description (or using a lightbox)
  • 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.


Cover Photo Credit: bradhoc (CC BY 2.0 license)
Note: This post may contain affiliate links, which means we get a commission from the plugin, theme, or service provider if you choose to purchase. Regardless of this, we are committed to providing high quality, unbiased resources. Have more questions? See our affiliate policy. You can use the plain links below if you prefer that we not receive a referral commission:
Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

3 Comments

  1. Thank you so much!! Just wanted to know about the light box and glad it works!! 😀

  2. Amardev Singh May 3, 2016 at 4:20 pm

    Thanks, very help solve my problem

  3. My image opens in the same tab and there is no option to close the image. The only get back to product is clieck Back on browser which is poor UI.. can you help ?

It's been over 2 years since this post was published, so comments have been closed. Thanks for reading!