The WooCommerce product size chart easily creates and displays comprehensive size charts. Customers can see the detailed size information. Customers can choose the right fit for them. This module is convenient for customers to increase sales.
The Product Size Chart has 3 different tabs. General, Chart and Size.
1. General #
Click on the General section.
1.1 Enable Product Size Chart? By clicking on the toggle button, you can enable or disable the ‘Product Size Chart’ functionality. This is mandatory.
1.2 Product Size Chart Position: Users can manage the size chart button position on a single product page from the dropdown.
1.3 Product Hook Name: You can add a hook name to display the button position, Or Copy the php code
<?php do_action( 'rtsb/modules/product_size_chart/frontend/display' ); ?> and paste it in your product query where you want to show the button.
1.4 Loop Hook Priority: Set the hook priority.
1.5 Size Chart Action: You can customize size chart button behavior from this section.
1.6 Size Chart Button Text: Add your preferred text that shows on the size chart button.
Now, click on the “Save Changes” button to save all the updates.
2. Chart #
Select the Chart Button.
2.1 To add a new chart, click on the “Add New” button below.
2.2 Title: Choose chart titles to facilitate prompt identification and differentiation among various charts.
2.3 Apply For: The Size Chart is applied to specified products or categories, ensuring tailored and relevant sizing information.
2.4 Applicable Products: Choose the product to view its corresponding size chart from the drop-down.
2.5 Exclude Products: Select the products you want to exclude from the size chart.
2.6 Size Chart Image: Uploading a “Size Chart” image is mandatory. It ensures proper communication of sizing information to users.
Now, click on the “Save Changes” button to save all the updates.
3. Style #
Select the Style settings tab of the Product Size Chart. This setting controls the style of the front-end appearance.
3.1 Product Page Button Height (px): Insert the product size cart button height as your preference.
3.2 Size Chart Padding: Customize the size chart padding.
3.3 Size Chart Margin: Set the size chart margin according to your choice.
3.5 Button Text Color: Choose the button text color from the color palette.
3.6 Button Hover Background Color: You can select button hover background color according to your choice.
3.7 Button Hover Text Color: Users can choose the button hover text color as their preference.
Now, click on the “Save Changes” button to save all the updates.
Front End View of Product Size Chart Module #
Here, you can see the product “Size Chart” is displaying in the product page.
Product Size Chart Pop-up showing after clicking the ”Size Chart” option.
