• Facebook
  • Twitter

Size Guide

Installation and activation

Installation via Administration Panel

When Size guide files are downloaded from your CodeCanyon account. You can start installation using WordPress administration panel.

Once you’ve logged into your administration panel go to Plugins > Add New




Chose Upload (1), click Select a file (2), ct-size-guide.zip from your hard drive and click Install Now (3)

Installation via FTP

To install Size guide via FTP follow step below:

  • Step 1 – Unarchive ct-size-guide.zip file
  • Step 2 – Access your host web server using FTP client
  • Step 3 – Find directory wp-content > plugins
  • Step 4 – Put folder ct-size-guide.zip in directory wp-content > plugins


Creating a size guide

Please note that upon plugin activation there are two sample size guides created, for a quick start you can just edit them!


To create a new size guide:


Go to Size guides > Add new in your WordPress Admin Panel


Create a new size guide


Insert a title and content


Fill size guide content

Title will be the name of the size guide. In the content, you can for example describe how a customer can measure its sizes properly.


Fill the size guide


Fill the size guide table content

In the sections 1 and 3 you can specify a table header and a caption.

To add/remove columns and rows just use the plus/minus buttons (inside red circles on the screenshot). Right, it’s as simple as that!

Fill table cells by just clicking on them and inputing the text.

Everytime you create a size guide there is a basic 4×4 table attached to make your work easier.


Publish it and go to the next section


Publish the size guide

Size guide settings

On every created Size Guide you can either use the global settings or adjust them seperately.

Go to WooCommerce > Settings > Size guide tab


Options to choose from:


You can choose one of the existing styles or create a new one (details in Creating a style section):







Hide Size Guide

Check this field to hide size guide when the product is out of stock.
Size guide will be displayed if you allow backorders in products settings.

Open guide with

Choose whether to display a simple link or a button to open the size guide.


Button/link position

You can display it either above the product summary tabs (Description, Reviews etc.), after the ‘add to cart’ button, as a tab or use the [ct_size_guide] shortcode anywhere in your theme.


Button/link hook priority

Priority of the action that outputs the button/link. Priority is “Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond to earlier execution, and functions with the same priority are executed in the order in which they were added to the action.”

If you choose to display the Size Guide above the product summary tabs or after the ‘add to cart’ button this might help you change the position. The final outcome might depend on other plugins and theme features that use the given hooks. ‘woocommerce_after_add_to_cart_button’ hook is not used often, but the ‘woocommerce_single_product_summary’ is commonly used. The basic actions hooked in (almost) every WooCommerce theme are:

woocommerce_template_single_title – 5
woocommerce_template_single_price – 10
woocommerce_template_single_excerpt – 20
woocommerce_template_single_add_to_cart – 30
woocommerce_template_single_meta – 40
woocommerce_template_single_sharing – 50

where the numbers mean the priority. The lower the digit is, the earlier the action will be executed. For example, if you display the Size Guide above the product summary tabs, you can display it right under the title by setting the priority to 7 (or anywhere between 5 and 10) or after the price by setting it to 15 and so on.


Button/link label

Enter the text to be displayed in the link/button. Default:  Size Guide.


Button/link align

Choose if the button should be aligned left or right.


Button/link clearing

Allow or disallow floating elements on the sides of the link/button.
More advanced users: if set to no, this option will add a ‘clearfix’ after the button/link.


Button class

You can add any custom class to the button.



Set the margins on the sides of the link/button.


Popup overlay color

Set the color of the background behind the Size Guide popup window.



Set the paddings inside the Size Guide popup window.

Assigning a size guide to a product

There are two ways to get the size guide displayed:


You can assign a size guide to one category or a few, by selecting a category on the size guide editing screen


Assign a size guide to a category

Once size guide is assigned to the whole product category or categories you can still disable it for single products by checking option Hide size guide from this product

Or you can assign a size guide to a particular product by using the “Choose size guide” box on the product editing screen:


Assign a size guide to a product

If you select a size guide for a particular product, it will be attached to that product even if the products category has its own size guide assigned.

Creating a style

You can add your own stylesheet to the settings tab using ct_sizeguide_styles filter.


add_filter(‘ct_sizeguide_styles’ , ‘add_sizeguide_style’);

function add_sizeguide_style($current){
$StylesheetURL = ‘http://www.example.com/assets/sg_style.css’; //link to the stylesheet
$label = ‘My custom style’; //name of the style to be displayed in the settings
$current[$StylesheetURL] = $label;
return $current;

This code should go to your functions.php file (or anywhere else you wish).

If you are developing a theme and want your style to be selected upon the plugin activation, simply change the body of the function to:

$current = array($StylesheetURL => $label) + $current;
return $current;

Elite Author
We are elite
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!