Searching for methods to add a measurement chart to your WooCommerce retailer?
Size charts on product pages supply prospects info that they will use to make higher shopping for choices.
As a end result, they assist enhance buyer engagement and scale back cart abandonment in your on-line retailer.
On this tutorial, I’ll present you the way to add a measurement chart to your WooCommerce product pages utilizing our Botiga theme.
1. Set up & Activate the Free Botiga Theme
Botiga is a free WooCommerce theme you may obtain from our web site.
After downloading the theme, you want to add it to your WordPress website.
Open your WordPress dashboard, go to Look > Themes > Add New, and click on the Add Theme button.
Subsequent, add the theme utilizing the Select File choice. Then, hit the Set up Now button. As soon as the theme is put in in your website, click on Activate.
Botiga shall be activated in your website in a few seconds.
2. Set up & Activate the Botiga Professional Plugin
Botiga Professional is a premium WordPress plugin that expands the functionalities of the free theme. It gives a ton of superior options corresponding to measurement charts, sticky add-to-cart buttons, audio and video galleries, mega menus, and extra.
When you made the acquisition, you may obtain the plugin out of your aThemes account to your native pc.
To put in the plugin in your WordPress website, go to Plugins > Add New and click on the Add Plugin button.
Then, add the plugin through the use of the Select File choice and hitting the Set up Now and later the Activate buttons:
When you activated Botiga Professional, you want to activate the plugin license.
Open your aThemes account and replica the license key. Subsequent, navigate to Plugins > Botiga Professional License and enter your license key.
3. Import a Starter Website (non-obligatory)
A starter website is a pre-built demo that gives you with a full web site design as quickly as you import it into your WordPress website.
Botiga Professional gives eight starter websites, every concentrating on a totally different area of interest. You don’t have to use a starter website in case you don’t need to — nonetheless, it may be a helpful start line.
Alternatively, you may create your individual web site design from scratch, utilizing both the theme choices in the WordPress Customizer (you may entry it from the Look > Customise menu) or the Elementor web page builder plugin.
Whether or not you import a starter website or not, you have got entry to the identical customization choices.
To import a starter website, go to Look > Starter Websites in your WordPress admin space. Right here, you may preview every website by choosing the Preview Demo choice.
If you discover a starter website that you simply like, import it by clicking the Import button:
The demo importer will present you a listing of the extra plugins and content material components that shall be put in in your website as a part of the import course of.
Though you may choose out of importing a number of the plugins and content material, I like to recommend including the whole lot.
Hit the Import button and the import course of will begin. Observe that it’ll take a couple of minutes for the imports to full.
4. Allow the Size Chart Module
The scale chart characteristic is disabled by default.
To allow it, go to Look > Theme Dashboard > Theme Options, scroll down to the Single Product Size Chart module, and click on the Activate button.
5. Create a Size Chart
When you enabled the Size Chart module, go to Merchandise in your WordPress admin space.
Beneath the Merchandise menu, you will notice a new Size Chart submenu.
Choose it, then click on the Add New button:
Size charts are a customized put up kind added by Botiga Professional. You’ll be able to create and edit them from the WordPress put up editor interface.
First, add a title to the customized put up that may maintain your measurement chart(s). One put up can embrace multiple measurement chart. For instance, you may create a Garments Size Chart put up with two measurement charts: one for males and one for girls.
When you added the title, scroll down to the Botiga Size Chart Choices panel, and click on the Add Size Chart button.
A measurement chart with rows and columns will seem in your display, together with an choice for naming the dimensions chart.
You may as well add or take away rows and columns by clicking the + or – buttons:
You’ll be able to duplicate the chart through the use of the copy icon or delete it by clicking the Take away button:
Right here’s what my instance measurement chart appears to be like like:
You may as well take a look at this video information on how to create a measurement chart with Botiga Professional:
6. Show the Size Chart on All or Particular Product Pages
There are two methods to show a measurement chart in your WooCommerce retailer.
You’ll be able to present it:
- on all your product pages through the use of a international choice
- solely on particular product pages through the use of the dimensions chart choice situated on particular person product pages
I’ll present you the way to perform each.
i. Show a Size Chart on All Product Pages
To show a measurement chart on all product pages, go to Look > Customise.
The Customizer will open, and the choices shall be situated on the left facet of the display:
Within the Customizer, scroll down to the WooCommerce part, and choose the Single Product choice:
On the subsequent display, choose Size Chart. It can reveal two choices: International Size Chart and Title.
The International Size Chart setting contains all your measurement charts as dropdown choices. Choose the one you need to add to your product pages and add a title to it.
Then, hit the Publish button on high of the display to save your settings:
ii. Show a Size Chart on a Single Product Web page
To show a measurement chart on a particular product web page, go to Merchandise > All Merchandise, and open the product web page the place you need to add the dimensions chart.
On the product web page, scroll down to the Botiga Product Choices panel and choose the Size Chart tab.
Right here, you’ll discover a dropdown choice that may embrace your measurement charts. Choose the one you need to add to your product, then click on the Replace button on the high of the web page to save the adjustments:
Now, open the product web page to test what your measurement chart appears to be like like in your retailer.
You’ll see the dimensions chart choice underneath the product description:
If you click on that choice, your measurement chart will pop up as a modal field:
Abstract
Including a measurement chart to your WooCommerce website is a wonderful means to enhance not simply the person expertise but additionally the conversion price of your retailer.
With Botiga Professional, you solely want to take the next steps:
- Set up the Botiga theme
- Set up the Botiga Professional plugin
- Import a starter website (non-obligatory)
- Allow the Size Chart module
- Create a measurement chart
- Show the dimensions chart in your product pages
Nevertheless, with Botiga and Botiga Professional, you are able to do a lot greater than merely including a measurement chart to your retailer.
For instance, you can too add movies and audio to your product galleries, hover results to your product pictures, fast view packing containers to your store and archive pages, and extra.
To get began with constructing a absolutely useful WooCommerce retailer, obtain the free Botiga theme or take a look at Botiga Professional.
I hope you discovered this tutorial useful. In case you have any questions on how to add a measurement chart to your WooCommerce retailer, tell us in the remark part under.
