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.
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.
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.
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).
