Size Chart Not Showing on Product Pages? Here’s How to Add It Using a Shortcode

If you are using a custom page builder such as Elementor, Beaver Builder, or any custom WooCommerce single product template, you may notice that the size chart button does not appear automatically on the product page.

This happens because custom templates often bypass WooCommerce’s default hooks.

To fix this, you can manually insert the size chart using a shortcode, allowing you to place the size chart button exactly where you want.

Why the Size Chart Button Is Missing

The size chart button may not appear when:

• You use Elementor or another page builder for single product pages
• Your theme overrides WooCommerce default templates
• Default WooCommerce hooks are not included in the layout

In such cases, using a shortcode is the recommended solution.

Shortcode to Display the Size Chart

Use the following shortcode to display the size chart button anywhere on the product page:

[scfw_product_size_chart]

This shortcode automatically loads the assigned size chart for the product.

How to Add the Size Chart Shortcode

Follow these steps to insert the shortcode into your custom product template:

Step 1: Copy the Shortcode

Copy the shortcode below:

[scfw_product_size_chart]

Step 2: Open Your Page Builder or Template

• Open Elementor, Beaver Builder, or your custom product template
• Edit the Single Product Page

Step 3: Paste the Shortcode

• Add a Shortcode widget (or text block)

• Paste the shortcode where you want the size chart button to appear

  (for example, below the price or near the Add to Cart button)

Step 4: Save and Preview

• Save your changes
• Visit the product page to confirm the size chart button is visible and working

Important Notes

• The shortcode will only work if a size chart is assigned to the product
• The shortcode displays the chart using the selected display style (popup, tab, or inline)
• You can use this shortcode multiple times if needed

Showcase Size Chart on a Custom Template ( Troubleshooting Guide )

1. Size Chart Not Showing? Check for Theme or Plugin Conflicts

If the size chart is enabled but not appearing on the product page, the issue is often caused by a theme or plugin overriding WooCommerce hooks.

Some themes and page builders replace the default WooCommerce product layout. When this happens, the plugin cannot insert the size chart automatically using hooks.

How to test for theme conflict:

1. Temporarily switch to the Storefront theme.
2. Visit the affected product page.
3. If the size chart appears → your theme is overriding WooCommerce hooks.
4. In this case, use the shortcode method to display the size chart manually.

This is not a plugin error. It is caused by template overrides in the theme.

2. How to Check If Your Theme Supports WooCommerce Hooks

WooCommerce uses action hooks to display content such as price, title, and additional elements like the size chart.

Some themes remove or replace these hooks.

If your theme:

• Uses a custom product template
• Uses a page builder for product layout
• Overrides single-product.php  

Then, hook-based placement may not work.

Recommended solution:

Use the shortcode method inside:

• Product description
• Custom product tab
• Page builder text module
• Directly in the template file

The shortcode works independently of WooCommerce hooks.

3. Page Builder Compatibility (Divi, Elementor, Flatsome, etc.)

If you are using a page builder to design the single product page:

• The default WooCommerce layout is usually replaced.
• Hook-based insertions may not execute.

In this case:

1. Edit your product template in the builder.
2. Add a Text/HTML module.
3. Insert the size chart shortcode manually.
4. Save and test.

Builder-based templates require manual shortcode placement.

Conclusion

When the size chart does not appear on WooCommerce product pages built with custom templates or page builders, using the [scfw_product_size_chart] shortcode is the easiest and most reliable solution.

It gives you full control over placement and ensures the size chart is visible exactly where customers need it.

FAQs

1. Why is the size chart not showing on my product page?

This usually happens when you are using a custom single product template built with Elementor, Beaver Builder, or another page builder that does not load WooCommerce default hooks.

2. Will the shortcode work with all page builders?

Yes. The shortcode works with Elementor, Beaver Builder, Gutenberg, and most custom WooCommerce templates.

3. Do I need to assign a size chart before using the shortcode?

Yes. The shortcode will only display a size chart if one is assigned to the product (via product, category, or tag).

4. Can I place the size chart button anywhere on the page?

Yes. You can place the shortcode anywhere in your template, such as below the price, near the Add to Cart button, or inside a custom section.

5. Does the shortcode support popup, tab, and inline display styles?

Yes. The shortcode follows the display style selected in the size chart settings.

6. Can I use the shortcode multiple times on the same page?

Yes, but it is recommended to use it once to avoid duplicate size chart buttons.

7. Will this shortcode affect other products?

No. The shortcode only displays the size chart for the current product being viewed.

8. Is coding knowledge required to use this shortcode?

No. You only need to copy and paste the shortcode into your page builder or template.

9. Why is the size chart not appearing even though it is enabled?

This usually happens because:

• The theme overrides WooCommerce hooks
• A page builder replaces the product layout
• There is a plugin conflict
• Cache is preventing updates

Switch to Storefront to confirm if the issue is theme-related.

10. How do I know if my theme supports WooCommerce hooks?

Temporarily activate the Storefront theme.

If the size chart appears there but not in your theme, your theme overrides WooCommerce hooks.

Use the shortcode method in that case.

11. Which themes are known to cause conflicts?

Themes that heavily customize WooCommerce product templates may override hooks.

Examples include:

• Divi custom product layouts
• Elementor Pro product templates
• Flatsome custom builder layouts

In such cases, use shortcode placement.

12. How can I force the size chart to appear in a specific position?

If your theme supports hooks, you can adjust hook priority.

If not, insert the shortcode manually in the exact position you want inside the template or builder layout.