Create your size chart

Thanks to the panel Create your Size Chart, you can create your own customized Size Chart, add or remove rows and columns using “+” and “-” buttons.

createyoursizechart

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

duplicate

Assign size charts to products

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

productsizechart

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

assignsizecharts

assignsizecharts1

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.

sizechartadvanced

Chart options

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”, “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.

chartoptions

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.chartdisplaymode

Size chart description

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

sizechartdescription

Popup options

To access the options panel of the plugin, click on YIT Plugins > Size Charts. 

sizechartpanel

In the plugin settings, you can set options for the popup windows showing the Size Charts created.

sizechartpopup

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

sizechartstyles

Moreover, you can set:

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

Popup button options

sizechartbutton

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 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.

sizechartbutton1

By activating the YITH WooCommerce Quick View Premium there will be another option available. With this option shown in the image below, you are able to choose the position of the Quick View button.

quick view

Table options

In this section, you can set the style for your Size Charts.

sizechartstableoption

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

sizecharttablestyles

Shortcodes

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.sizechartshortcode
  • [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] you can use this shortcode to print the size chart where you prefer.

shortcode size chart

Widget

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

sizechartwidget

This image shows you how the widget looks like:

sizechartwidget1

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

YITH WooCommerce Multi Vendor

With YITH WooCommerce Multi Vendor you can turn your store into a multistore, where vendors can manage their own product and earn a commission on every sale.

Enable size charts for vendors

In order to make the two plugins work together, you first need to activate them both. Then go to the Multi Vendor Add Ons tab, and activate ‘Product Size Charts’. This option allows enabling product size charts for vendors that are registered to the site.

For more information about how to set up the YITH WooCommerce Multi Vendor plugin, please take a look at the full documentation here.

YITH WooCommerce Quick View

YITH WooCommerce Quick View allows the users to get a quick view of the product they are interested in. The product details will be shown in a popup, so they don’t need to leave the page they are currently visiting.

quick view size chart settings

In order to make the plugins work together, you first need to activate them both. Then decide where you want to show the ‘size chart’ button. Go to Product Size Charts > Settings > Popup Button Options > Quick View Button Position.

The combination of both plugins allows the user to open the size chart inside the quick view popup, without leaving the popup.

Size chart quick view

For more information about how to set up the YITH Quick View plugin, please check the full documentation here.