How to Create A Product Size Chart in Woocommerce?

In this short tutorial I’ll show you how to create a product size chart in Woocommerce. It is fairly easy and will take only a couple of minutes to set up. And, the solution is totally free, although with the help of a premium code snippet manager (WpCodebox, for example) you can achieve much more. Nevertheless, let’s jump in.

Video: How to Create A Product Size Chart in Woocommerce?

In case you haven’t used any snippets manager before, and you would like to know more about it, then see this video here below. In it I will demonstrate how to create a product size chart in Woocommerce.

How to Create A Product Size Chart in Woocommerce?

Now, in order to add size carts to a single product page in Woocommerce, there are a couple of steps we need to do.

Step 1: Install Reusable Blocks Extended plugin

This plugin extends the Reusable Blocks admin interface, and it provides you a Reusable Blocks Shortcode to use your block anywhere you want in your Post types (even if they use the Classic Editor rather than Gutenberg!).

So, download and install Reusable Blocks Extended plugin because we need it to create product size charts in a way that we can add it to our single product pages later.

Step 2: Code Snippets or WpCodebox plugin

Before we start, I have to mention that all the snippets you see below should be added to your child theme’s functions.php file or better yet, use a snippet manager like Code Snippets or WpCodeBox (my favorite). If you’re interested, then grab WPCodeBox with a nice 20% discount here (SAVE 20% Coupon WPSH20).

Step 3: Create size chart

Since we installed Reusable Blocks Extended plugin we can use it to create a nice size chart. Just go to the Blocks >> Add new and create a size chart.

Now, if you publish it, then you’ll see a shortcode for this chart. It’s under Blocks >> All reusable blocks menu. See the screenshot.

How to create product size chart in woocommerce

Step 4: Add a new snippet

Now go to Snippets >> Add new and paste this code inside your snippets box. This will create a nice button that opens your size chart like the one here below.

How to Create A Product Size Chart in Woocommerce?

Pay attention, that you have to change the shortcode in line 7. Also, if you would like to rename the button title then rename it in lines 5, 16 and 21.

// Adds a size chart on your Woocommerce Single product page
add_action( 'woocommerce_product_meta_end', 'wpsh_size_chart', 30 );
function wpsh_size_chart() {
echo '<button type="submit" id="trigger_cf" class="button alt" style="margin-top: 1em;">Size chart</button>';
echo '<div id="product_inq" style="display:none">';
echo do_shortcode("[reblex id='465']");
echo '</div>';
add_action( 'woocommerce_single_product_summary', 'wpsh_size_chart_1', 40);
function wpsh_size_chart_1() {
    <script type="text/javascript">
        jQuery('#trigger_cf').on('click', function(){
        if ( jQuery(this).text() == 'Size chart' ) {
        } else {
            jQuery("#trigger_cf").html('Size chart');

How to Display A Product Size Chart in Woocommerce Custom Tab?

Previous solution created a button that opens your size chart. But what if you would like to display it in a separate produc tab? See the screenshot.

How to Display A Product Size Chart in Woocommerce Custom Tab?

In this case, use this snippet here below. Pay attention that you can change your tab title in 6. Also, replace the shortcode in line 15 accordingly.

// Display A Product Size Chart in Woocommerce Custom Tab
add_filter( 'woocommerce_product_tabs', 'wpsh_sizechart_tab' );
function wpsh_sizechart_tab( $tabs ) {	
	// Adds the new tab
	$tabs['test_tab'] = array(
		'title' 	=> __( 'Measurement charts', 'woocommerce' ),
		'priority' 	=> 20,
		'callback' 	=> 'wpsh_sizechart_tab_content'
	return $tabs;
function wpsh_sizechart_tab_content() {
	// The new tab content
	echo '<h2>Measurement charts</h2>';
	echo do_shortcode("[reblex id='465']");	

How to Display A Product Size Chart in Woocommerce Conditionally?

Both of these solutions I described above will display your size chart for all products. If you would like to know how to display a product size chart in Woocommerce conditionally, then you would need to tweak your code. So, in order to keep it short, you can take a look at the thorough tutorial on conditional logic here.

There is also a much easier way to accomplish all that. And that is, you can use WPCodebox plugin I have mentioned a couple of times already. This way you can use the same code I showed you above without any issues. If you would like to know how to add these conditional rules then see the video above (watch at 6min 54sec mark).

Useful Woocommerce tips

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). Btw, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Best selling plugins

Janek T.
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 102