The online clothing or shoe store is one of the electronic stores that suffer most from the problem of inconsistency in product sizes with buyers’ requests, due to many factors, the most famous of which is the difference in size numbers from one country to another and from one product to another, which prompts the customer to return the product after Received it due to size discrepancy.
In this article, we will explain to you practically how to insert and display the size chart for clothing and shoes in your WooCommerce store and control the appearance and method of displaying the chart within your store’s product pages and categories to help customers choose the product in the appropriate size, which contributes to reducing returns on products ordered from the store.
Why do you need to include a clothing size chart within your store?
Online stores differ greatly from real-life stores, as in the online store the customer does not have the option of wearing or trying on clothes to determine the appropriate size or size that is compatible with him.
Therefore, there is a need to display a size chart that contains a complete guide to clothing sizes, so that the customer can choose the appropriate size for him through this chart, which makes the in-store purchasing experience distinctive and almost free from the problem of returning products.
The following table shows shoe sizes and measurements in centimeters based on the international size for the United States (US) as well as the international size for China (Chinese Size).
You will find that the appropriate shoe size is determined according to the distance from the heel to the toes, and the name for each size varies from one country to another, as you can see in the picture, but the size in centimeters is fixed and the same in all countries and all the different size systems around the world.
When a customer sees a shoe size chart like this, he can measure the distance from the heel to the toes, for example (25 cm). The appropriate size for him will be (8) according to the US measurement, while it will be (40) according to the Chinese measurement. Therefore, the customer can exactly determine his size on any international scale whatever.
How to insert a size chart or sizes into WordPress stores
We will use the Product Size Chart For WooCommerce plugin , which helps you insert a clothing and shoe chart into your online store in simple steps.
First, install the plugin and activate it within your online store running WordPress, then follow the following explanation to learn how to use it to insert the size chart correctly within the store’s product pages and categories.
After activating the plugin, you will notice that a new tab called Size Chart appears inside the WordPress control panel. When you enter it, a page will open for you containing 5 ready-made size charts:
The additions will provide you with five ready-made size charts that you can include within the product pages of the site’s categories to appear in front of customers while purchasing the product to help them choose the appropriate sizes and dimensions for them. You will find that three of them are specific to clothing sizes, and two are specific to shoes, and they are as follows:
- Men’s T-shirts Size Chart: This is a size chart for men’s T-shirts.
- Women’s T-shirts Size Chart: This is a size chart for women’s T-shirts.
- Women’s Dress Size Chart: This is a women’s dress size chart.
- Men’s Shoes Size Chart: This is a size chart for men’s shoes.
Note that next to each of the ready-made diagrams is a short code that you can copy and paste into any page, article, or product on the site to display in front of visitors:
You can also easily show the chart within the page of the products or categories that you want, by entering the desired chart editing page, to find an options box titled Assign , through which you can select the products or classifications that you want to show the size chart within.
You will find that in the ( products ) field you can place your mouse and write the name of the products in which you want to show the chart. Also, in the Categories field , you can choose a category so that the chart will be displayed within all products that belong to that category.
The following image shows an example of a chart that appears within the pages of a product on the site, directly below the product data:
Modifying size charts and ready-made measurements
As you noticed, the add-on provides you with many ready-made charts that you can use directly within the product pages and categories in your store, but you can also modify those ready-made charts or even create and publish new charts.
To edit one of the ready-made charts, click the Edit button below each chart:
You will be transferred to the chart editing page, through which you can modify all the chart data as you wish, such as editing the title of the chart, which you can change to Arabic text if your site is in Arabic, as well as the arrow that points to the description field, which is also editable, as this appears. Description above the size chart within your site pages.
Also, on the chart editing page, you will find the Tools box , which provides you with four options for modifying the chart shape as follows:
- Template , from which you can choose the template or chart design you want. The addition provides many ready-made options that you can choose from within the multiple choice box that appears in front of you.
- Hide on size chart is an option that allows you to hide some of the chart data. You can choose to hide the description, images, or any component of the chart.
- Rows , through which you can add a new row within the chart or perhaps delete a row as well.
- Columns also allows you to add a new column or delete an existing column from the chart.
Within the chart editing page, you will also find a table that includes all the size chart data as follows:
From within this table, you can modify the values and texts in it, where you can change the values of the dimensions, dimensions, or ready-made texts according to the products of your online store.
As well as the + buttons , which you can click on to add a new row to the table, and also the – button, which once clicked deletes the row.
Also, within the same chart editing page, you will find some additional options through which you can change and customize the look and feel of the size chart:
From the Table color option , you can change the background color of the first row in the chart, as well as change the background color of the odd or even rows, and it also allows you to change the color of the text whether within the odd or even rows.
There is also the Border option , which gives you many options for modifying the layout of the borders of the chart, as you can change the size, color, and format of the borders as you wish.
Thus, you can freely modify all rows and columns of any of the size chart tables provided by the add-on.
Create a new size chart instead of the ready-made charts
In the previous paragraphs, we learned how to modify the ready-made layouts provided by the add-on in advance, and how to use them within product pages or categories in the store.
You can also create a size chart from scratch for your store’s products however you want, by simply entering the special tab for adding and then clicking on Add new.
As the picture shows you, once you click on the Add New Chart button, an editing page opens for you to add a new chart to the store, where you write a title as well as a description of the chart.
Then go to the Tools box , through which you write the number of columns and also the number of rows that you want to create within the chart:
For example, you can add 4 rows and 4 columns so that the table appears as follows:
As you notice, the table for the size chart appears completely empty, as you fill in the data yourself and put all the measurements that help customers choose the size and size that is appropriate for them with the highest possible accuracy to improve the purchasing experience within the store and reduce the rate of product returns due to inconsistency in sizes.
Adjust the general settings of the add-on
When you enter the Settings tab to add a site chart, you will go directly to the general settings page, where you will find many options that help you adjust the settings and properties of the size charts, as follows:
1. Enable , which you can click to activate it or click again to deactivate it and hide the appearance of size charts within the store.
2. Size chart type When you click on it, a drop-down list will appear that contains many options that you can choose from to change the look, appearance, and method of displaying the size chart within the pages of your site.
3. Size chart label You can use it to write an identifying name for the size chart.
4. Custom CSS You can use it to add custom CSS code to control the formats and appearance of the store’s size tables.
Conclusion
Many clothing and shoe stores in particular suffer from the problem of returning products, due to the customer’s inability to accurately choose the appropriate size or size for him, due to the difference in size names and measurements from one country to another as well as from one brand to another.
Therefore, it will be useful for you to add size charts in front of your customers to help them choose and determine the appropriate size for them accurately, which helps improve the purchasing experience within the store.
