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' ) {
                    jQuery('#product_inq').css("display","block");
            jQuery("#trigger_cf").html('Close');
        } else {
            jQuery('#product_inq').hide();
            jQuery("#trigger_cf").html('Size chart');
        }
        });
    </script>
    <?php    
}

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

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Code Snippets manager: WPCodeBox allows you to add code snippets to your site. Also, it allows you to build and manage your WordPress Code Snippets library 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 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 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 of 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.

Choose amount

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: 89