Settings

To create your size charts, go to the tab Size Charts added by the plugin to your installation dashboard and click on the Add size chart button.

You can now create your own customized size charts, and add or remove rows and columns by using “+” and “-” buttons.

If you want to use the same layout as the size chart you have just created, you can duplicate it easily from the size chart menu by clicking on “Duplicate”.

You can assign more than one Size Chart to each product by selecting them in the tab Product Size Charts on the product edit page.

You can easily assign Size Charts to your products using also the bulk editing tool available in WordPress.

Advanced display

In the tab Advanced Display, you can set the Size Charts you want to assign to each product and those you want to assign to each category.

In the panel Chart Options you can set the following options:

• Display As: you can choose one of the display modes available among “Tab”, “Popup”, and “Tabbed Popup”.
• Show in Widget: you can choose either to show the Size Chart in the widget or not.
• Title of description tab: you can set a title for the description tab, in case you have selected “Tabbed Popup” as a display mode.

Display mode:

• Tab: it shows your size chart within a WooCommerce tab in the single product page.

• Popup: it shows your size chart within a popup and adds a button on the single product page that opens the popup window.

• Tabbed Popup: it shows your size chart within a popup made of two tabs, one for the chart, one for the description. It also adds a button on the single product page that opens the popup window.

You can set a description for each Size Chart by adding formatted text and/or media.

In the plugin Settings, you can configure the options for the popup showing the size charts you have created.

You can choose from 4 different styles: “Default”, “Informal”, “Elegant” and “Casual”.

Moreover, you can set:

• Main Color: the main color of the popup windows.
• Position: the position of the popup window once opened.
• Effect: the opening effect of popup windows.
• Overlay Color: the overlay color when the popup window is open.
• Overlay Opacity: the overlay opacity when the popup window is open (set a value between 0 and 1).

Popup button options

Here, you can set:

• Button Position: the position of the button on the single product page.
• Button Color: the color of the size chart popup button.
• Button Text color: the color of the text shown in the size chart popup button.
• Border Radius: the rounded border of size chart popup button.
• Padding: padding value of the button.
• Button Shadow Color: shadow color of size chart popup button.

In this section, you can set the style for your size charts.

You can choose from 4 different styles: “Default”, “Informal”, “Elegant”, and “Casual” and set the Main Color for each of them.

You can add size charts in any part of your shop using the following shortcodes:

• [sizecharts] adds buttons for all size charts.
• [sizecharts type=”list”] adds all size charts to a list.
  [product_size_charts] this will print all size charts of the “current” product (you can use it in product pages).
• [sizecharts id=”10″] adds a button that opens a specific size chart, the one which ID has been specified in the shortcode (in this case the one with id=10)

You can also add a size chart using the specific button available in TinyMCE editor of every post, page or product.

• [sizecharts id=1292 display=”full”] you can use this shortcode to show directly the size chart table without the button where you prefer.

The widget YITH Product Size Charts allows you to add a complete list with size charts into the sidebars of your shop.

This image shows you how the widget looks like:

If you click on a size chart in the list, a popup containing the selected size chart will open.

When using WooCommerce blocks for the single product page, the plugin allows you to use the block Size Chart Buttons to show the size chart buttons in the position you prefer.

You can add size charts in any part of your shop using PHP code:

<?php do_action('yith_wcpsc_print_product_size_charts', $also_tabs, $type); ?>

This code allow you to print all size charts. Hook parameters are:

• $also_tabs: boolean, if set as true, it prints also size chart which option Display as is set as “Tab”; but not if it is set as false.
• $type: two display modes are available: “list” or “button”.

<?php do_action('yith_wcpsc_print_product_size_chart_by_id', $id, true); ?>

This code allow you to print a button that opens a specific size chart.

• $id: ID of the size chart that has to be printed.