• 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

i1

Then:

i2

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

i3


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

c1

Create a new size guide

Insert a title and content

c2

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

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

If you wish to add or remove added extra table use the Add Table or the Remove Table button (2)

Publish it and go to the next section

c4

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

s1

Options to choose from:

Style

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

Classic

Classic

Minimalistic

Minimalistic

Modern

Modern

 
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.

 

Margins

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.

 

Paddings

Set the paddings inside the Size Guide popup window.


Using Product CSV Import Suite


Please remember that Product CSV Import Suite isn’t part of the Size Guide for Woocommerce plugin. If you wish to use this feature you need to buy it first.

 

After updating the plugin to version 2.1  WooCommerce Product Size Guide is compatible with Product CSV Import Suite

Using CSV you will be able to export the content of your size guide items and then open them using office software like Open Office or Microsoft Exel.

After opening the file you will be able to change the content of imported tables by (for example) attaching products to new categories.
Below you can check step-by-step instruction how to use this new feature from exporting product Size guide tables to importing them after adding your custom changes.

DOWNLOADING PRODUCT FILE

1.Go to WooCommerce > CSV Import Suite and in Export Products tab choose Export Products – this way you will get .csv file with all of the product information.

Exporting Size Guide content

Exporting Size Guide content

2. Open the .csv file using office software you have installed on your computer.

3. Please find AO columnt with the meta:_ct_selectsizeguide here you will find which products ( you will find products name in first column ) are attached to which size guide (ID numbers in the meta:_ct_selectsizeguide)

AO column

AO column

ADDING SIZE GUIDE TO PRODUCT

To add size guide to product you need to get the Size Guide ID to do that please:

1.  Go to the Size guides and choose the size guide you want to add by choosing Edit

Choose SG

Choose SG

2. In the SizeGuide slug you will find a number – this is the ID we are looking for!

Size Guide ID

Size Guide ID

3. Go back to the downloaded file and add the ID to the product you want to use this Size Guide and save the changes in the file.

Adding new ID

Adding new ID

IMPORT CHANGES

1. The last step is Importing the files with your changes – Go to WooCommerce > CSV Import Suite and in Import Products tab choose Import Products

2. Choose the option Choose File and add the file with your changes

Adding the file

Adding the file

3. Hit the Upload file and import button and it is done!


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

a1

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:

a2

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.

Example:

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
CreateIT
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!