How to add a Size Guides (charts)?

You are here:
Estimated reading time: 2 min

Using Rey’s “Size Guides for products” internal module

Enabling the module

Please access the backend and visit Rey theme > Modules Manager and enable Size Guides for Products module, ex: .

Creating the first size guide

Simply visit Rey theme > Size Guides and create a new Size Guide ex: .

You can also import a sample guide just by clicking the “Import Sample guide” from the top toolbar, right next to the “New” button.

This will create a new post pre-filled with 3 tables for different types of measurements.

You can edit the tables just by clicking the cells and filling them up with values ex: .

Assigning a global size guide

Access Customizer > WooCommerce > Product page > Components in Summary > Size guides and pick the newly created guide ex: . You can customize the button’s position and display properties.

If you don’t want a traditional position, you can embed the button or content with either of these two shortcodes [rey_size_guide id="99"] or [rey_size_guide_button id="99"] .

Assigning per product, per category etc.

You can pick specific product categories, tags or attributes ex: .

Or, you can pick per product, in the product’s backend ex: .

Editing in Elementor and using ACF Table widget

If you want more customisation freedom, you can edit the guides with Elementor and be more creative.

If you want to replace the tables in Elementor, please hide the tables ex: and than edit the guide with Elementor, where you can insert an ACF Table element ex: . To pick the correct field name, simply search for “table” or “size” etc.

Adding inside a Custom tab / Accordion item in product page

Adding the size guide template inside of a Accordion item in the product page (ex: ) will require the use of the shortcodes ex: [rey_size_guide] .

Please visit Customizer > WooCommerce > Product page > Tabs/Blocks and create a new custom tab and inside the content paste the shortcode. Publish and reload Customizer and create an accordion item afterwards selecting the newly Size guide. Here’s a short recording .

If you want you can add an id attribute on the shortcode in order to specify the guide ID ex: [rey_size_guide id=”99″] . This is useful if you didn’t select a default guide in Customizer > WooCommerce > Product page > Components in Summary > Size guides.

Using a plugin

There’s the plugin called “Product Size Charts Plugin for WooCommerce” . It’s probably the best plugin for this sort of functionality. It has custom templates, assignment per category etc.

To install, go to Plugins > Add new and search for “Product Size Charts Plugin for WooCommerce” and you should find it listed there. Click on Install and activate.

Rey has a custom layer on top of this plugin, for example to use Rey’s own modal window to optimize this plugin’s frontend CSS and JS. Also, there are a few settings located in Customizer > WooCommerce > Plugin : Size Charts , in order to change the button style and position in the product page.

Was this article helpful?
Dislike 4
Views: 2290

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!