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: https://d.pr/i/BHlHv8 .
Creating the first size guide
Simply visit Rey theme > Size Guides and create a new Size Guide ex: https://d.pr/i/41q34M .
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: https://d.pr/i/u55ypu .
Assigning a global size guide
Access Customizer > WooCommerce > Product page > Components in Summary > Size guides and pick the newly created guide ex: https://d.pr/i/IZHsZT . 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: https://d.pr/i/F2tkIs .
Or, you can pick per product, in the product’s backend ex: https://d.pr/i/dKA8gD .
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: https://d.pr/i/ChrGgl and than edit the guide with Elementor, where you can insert an ACF Table element ex: https://d.pr/i/OMqw6d . To pick the correct field name, simply search for “table” or “size” etc.
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 https://d.pr/i/2s4ucU , in order to change the button style and position in the product page.