STWooSwatches

STWooSwatches Documentation

Thank you for purchasing my STWooSwatches plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thank you so much!

Start

Introduction

STWooSwatches - Advanced Swatches for WooCommerce allows you to use product attributes in three nice ways( color, image or label swatch).You can display product attribute swatches in shop, archive, cart, order item and email template too. STWooSwatches allows you to change the appearance of the swatches via WordPress default Customizer.

 

Key Features

  • Native to default WordPress Customizer
  • Supports Color, Image and Label Swatches
  • Extends Swatch shape, size via WordPress filters
  • Swatches in
    1. Shop
    2. Archive
    3. Cart
    4. Cart Item Data
    5. Product Order Email Template
    6. Admin Order Item Data

What you get

Once you have made the purchase you will find our product in your download page. Click on Download, a dropdown will popup with following options

  • All Files and Documentation
  • Installable WordPress Plugin zip file only
  • License Certificate and Purchase Code (PDF)
  • License Certificate and Purchase Code (text)

 

We recommend you to download all files and documentation (the package) however you can simply download installable WordPress file only if you just want the WordPress plugin file.

Installation

 

To install this plugin you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex Installing WordPress

 

Pre - Installation Requirements

  • WordPress 4.9.x   or higher
  • PHP 5.4   or higher
  • WooCommerce 3.3.x

 

Installing Plugin

When you are ready to use this, you have to first upload this plugin into your WordPress website and activate it.The plugin files can be uploaded in two ways

 

Via WordPress

  1. Navigate to Plugins > Add New > Upload
  2. Click upload plugin and choose st-woo-swatch.zip file from your purchased pack
  3. Once uploaded, activate this plugin
installing via wordPress admin panel
  1. The plugin is now installed and activated

 

Via FTP

  1. Download st-woo-swatch.zip   file from your purchased pack
  2. Extract st-woo-swatch.zip   file
  3. Copy the extracted st-woo-swatch folder to the location //your-wordpress-site/wp-content/plugins
  4. Activate the plugin from the Admin area

The Folder Structure

Once you download the package, unzip it and you will find it contains the following folders.

  • readme.txt
  • documentation – This folder contains the documentation.
  • st-woo-swatches.zip - This folder contains the installable WordPress plugin file.

How to Use

Creating Swatch Attribute

Set up global swatch attribute

Go to Products > Attributes to add, edit and remove attributes.

Here you can quickly and easily add swatch type attributes and their terms.

 

 

  • Add a Name.
  • Add a Slug; (optional); this is the URL-friendly version of the name.
  • Enable Archives if desired. If enabled, you can view a page with all products having this attribute.
  • Select a Type Choose between "Color", "Image", "Label" or default "Select" this determines how this attribute's values are displayed
  • Select a Default sort order.

Select Add Attribute.

The attribute is added in the table on the right, but without values.

Select the gear icon to add attribute values. You’ll see “Configure terms” when you hover over it.

 

 

Next Add New “Attribute name”, where “Attribute name” automatically takes the name you gave the attribute in the previous step.

Add as many values as you wish. If you selected “Custom ordering” for the attribute, reordering your values can be done here.

 

Set up swatch attribute terms

Attributes term type can be defined by attribute type "Color", "Image", "Label" or default "Select"

 

Color Attribute Type Terms

 

 

Label Attribute Type Terms

 

 

Image Attribute Type Terms

 

Using Swatches in Variable Product

Add global attributes to product

Add the created attributes to your products.

Go to: Products > Add Variable Product (or edit an existing one).

Select the Attributes tab in the Product Data. There you can choose any of the attributes that you’ve created in the dropdown menu.

Select Add.

If you selected a global attribute that you previously created, you can select terms that you added previously.

 

 

Add custom attributes

Alternatively, add an attribute you only want to use for one product. This would only be ideal if you have a product with unique variations.

Go to: Product > Add Product.

Select the Attributes tab.

Select Custom product attribute in the dropdown and follow the above steps.

 

Add new term

You can add new term to attribute in Product Data tab

 

Color Attribute Type Terms

 

 

Label Attribute Type Terms

 

 

Image Attribute Type Terms

 

 

Swatches Settings Tab

 

 

Catalog Attribute Settings

You can override customizer product attribute settings per product basis here.

  • Select a Swatch Setting Choose between "Global Swatch" or "Custom Swatch(es)" this determines what size of swatch to display on single variable product.
    • Global Swatch - as name implies, this shows swatch from customizer setting only
    • Custom Swatch(es) - you can define swatch or swatches for individual product.

 

 

Swatches for Custom Attribute

Custom Attributes Swatch type can be defined by swatch type "Color", "Image", "Label" or default "Select"

 

Note: You can define Swatch Value and Swatch Tooltip in Swatches Settings Tab

 

 

 

 

 

Single Product Swatch Options

Set up global variable product swatch settings

We have used WordPress default customizer to change the behaviour or settings of swatches

 

Navigate to Appearance > Customize > WooCommerce > Single Product Swatch , Here you can easily set single variable product swatch settings

 

 

  • Select a Swatch Size Choose between "Tiny", "Small", "Medium" or "Large" this determines what size of swatch to display on single variable product
  • Select a Swatch Shape Choose between "Circle", "Square", or "Rounded Square" this determines what shape of swatch to display on single variable product
  • Set a Border Color using color picker, choose the color you want to use as border color for swatches
  • Set a Active Border Color using color picker, the color you want to use as border color for active or selected swatches

 

 

 

 

 

Shop Settings

Set up global product catalog / shop swatch settings

We have used WordPress default customizer to change the behaviour or settings of swatches

 

Navigate to Appearance > Customize > WooCommerce > Product Catalog , Here you can easily set shop or product catalog swatch settings

 

 

  • Select a Shop page display Choose between Show Products, Show Categories or Show Categories and Product this determines what to display on main shop page, and STWooSwatches works only with Show Products or Show Categories and Products
  • Select a Swatch position Choose between After Product Title, Before Product Title or Use Shortcode this determines swatch position on main shop page
  • Select a Swatch size Choose between "Tiny", "Small", "Medium" or "Large" this determines what size of swatch to display on main shop page
  • Select a Swatch shape Choose between "Circle", "Square", or "Rounded Square" this determines what shape of swatch to display on main shop page
  • Set a Swatch border color using color picker, choose the color you want to use as border color for swatches
  • Set a Swatch active border color using color picker, the color you want to use as border color for active or selected swatches

 

Note: if Swatch position is Use Shortcode, then you have to customize the shop product in your active theme and use [st-swatch-shortcode]

 

 

 

 

Product Archive

Set up global product category swatch settings

We have used WordPress default customizer to change the behaviour or settings of swatches

 

Navigate to Appearance > Customize > WooCommerce > Product Catalog > Category display section , Here you can easily set product archive's swatch settings

 

 

  • Select a Category display Choose between Show Products, Show Categories, or Show Categories and Product this determines what to display on product category page, and STWooSwatches works only with Show Products or Show Categories and Products
  • Select a Swatch position Choose between After Product Title, Before Product Title or Use Shortcode this determines swatch position on product category page
  • Select a Swatch size Choose between "Tiny", "Small", "Medium" or "Large" this determines what size of swatch to display on product category page
  • Select a Swatch shape Choose between "Circle", "Square", or "Rounded Square" this determines what shape of swatch to display on product category page
  • Set a Swatch border color using color picker, choose the color you want to use as border color for swatches
  • Set a Swatch active border color using color picker, the color you want to use as border color for active or selected swatches

 

Note: if Swatch position is Use Shortcode, then you have to customize the shop product in your active theme and use [st-swatch-shortcode]

 

 

 

 

Catalog Mode Attribute

Catalog Mode Attribute Setting

We have used WordPress default customizer to set global attribute for variable products

 

Navigate to Appearance > Customize > WooCommerce > Product Catalog > Product attribute section , Here you can easily set global attribute for product, which is shown in catalog and archive pages.

 

 

  • Enable Show only one swatch on product catalog option, you want to enable only one swatche to show on product catalog and archive pages.
  • Select a Product Attribute this determines what product attribute swatch to display on product catalog and category page

 

 

 

 

Cart and Checkout

Set up swatch settings for cart and checkout

We have used WordPress default customizer to change the behaviour or settings of swatches

 

Navigate to Appearance > Customize > WooCommerce > Cart And Checkout Swatch Section , Here you can easily set swatch settings for cart and checkout page

 

  • Choose Enable Swatch option, you want to enable swatches on the cart and checkout pages.
  • Select a Swatch Size Choose between "Tiny", "Small", "Medium" or "Large" this determines what size of swatch to display on cart and checkout pages
  • Select a Swatch Shape Choose between "Circle", "Square", or "Rounded Square" this determines what shape of swatch to display on cart and checkout pages
  • Set a Border Color using color picker, choose the color you want to use as border color for swatches

 

Swatches in Cart Page

 

 

Swatches in Checkout Page

 

Tooltip

Set up tooltip for swatches

We have used WordPress default customizer to change the behaviour or settings of swatche's tooltip

 

Navigate to Appearance > Customize > WooCommerce > Swatch's Tooltip Section , Here you can easily set tooltip settings for shop

 

  • Choose Enable Tooltip option, you want to enable tooltip for swatches
  • Set a Background Color using color picker, choose the color you want to use as tooltip background color for swatches
  • Set a Text Color using color picker, choose the color you want to use as tooltip text color for swatches

 

 

 

 

 

Swatche's Tooltip

 

 

 

 

 

Updating

 

Follow the below steps to update or reinstall plugin.

  • Deactivate and remove the old version
  • Upload and activate the new version

No settings will be lost during the update process, but We strongly recommend you always to test updates on a staging server first, or take a backup beforehand.

Credits

Changelog

Version 1.1.1

June 28th 2020

Release Version 1.1.1

  • Update - Added Tooltip in cart, checkout and order pages.
  • Update - Custom attribute sanitizing
  • Update - Hide out of stock items ( WooCommerce -> Settings -> Products -> inventory -> Hide out of stock items from the catalog )
  • Update - Added Swatch Widget
  • Update - Compatible issue with wooCommerce 4.2.2
  • Update - language file.
  • Files Worked
    1. st-woo-swatches.php - cart_swatch_html(), cart_custom_swatch_html() and st_wc_get_formatted_cart_item_data()
    2. public\partials\class-st-woo-order-item.php - term_swatch_html(), order_item_display_meta_value() and custom_attr_swatch_html()
    3. public\partials\class-st-woo-single-variable-product.php - swatch_html_alt()
    4. admin\partials\class-st-woo-product.php - swatch_tab_panel_custom_attr_swatch_section()
    5. public\partials\class-st-woo-shop.php - swatch_html_alt() and loop_add_to_cart_args()
    6. public\js\frontend.js - ST_WC_FRONT_SWATCH.productLoop.itemSwatchesInit(), foundVariation(), addQueryArg() and reset_btn click event.
    7. public\class-st-woo-swatches-public.php - enqueue_scripts()
    8. public\css\frontend.css - ul.products .st-swatch-in-loop select { display:none; }

 

Version 1.1.0

October 19th 2019

Release Version 1.1.0

  • Update - Compatible issue with wooCommerce 3.7.1
  • Update - Added option to show or hide swatches in cart and checkout page.
  • Update - language file.
  • Tweak - Modified plugin header informations.
  • Tweak - Changed version number

 

Version 1.0.9

September 30th 2019

Release Version 1.0.9

  • Fix - Compatible issue with wooCommerce 3.7.0.
  • Update - language file.

 

Version 1.0.8

May 22nd 2019

Release Version 1.0.8

  • Tweak - Updated - label swatch data with number value script bug ( frontend.js ).
  • Tweak - Modified plugin header informations.

 

Version 1.0.7

April 14th 2019

Release Version 1.0.7

  • Update - Added wpml config file ( wpml-config.xml ).
  • Tweak - Modified plugin header informations.
  • Tweak - Updated Text domain.
  • Update - language file.

 

Version 1.0.6

February 9th 2019

Release Version 1.0.6

  • Update - Updated notification for install and activate WooCommerce plugin.
  • Update - Updated WooCoommerce catlog column and row control visibility.
  • Update - Added 'sten_wc_params' filter hook.
  • Update - Added sanitize_title().
  • Tweak - Updated selector with special chars.
  • Update - language file.

 

Version 1.0.5

December 10th 2018

Release Version 1.0.5

  • Update - Added swatches for product custom attributes
  • Update - Added option to show only one product attribute in catalog and product archive pages.
  • Update - Added catalog mode for product

 

Version 1.0.4.1

November 9th 2018

Release Version 1.0.4.1

  • Fix - Compatible with wooCommerce 3.5.1

 

Version 1.0.4

November 1st 2018

Release Version 1.0.4

  • Fix - Compatible with wooCommerce 3.5.0

 

Version 1.0.3

October 18th 2018

Release Version 1.0.3

  • New - Added Tooltip for swatches
  • Tweak - Plugin header modified

Version 1.0.2

June 14th 2018

Release Version 1.0.2

  • Fix - WooCommerce product loop - show variation default attribute

Version 1.0.1

May 29th 2018

Release Version 1.0.1

  • Fix - Added seperate JS listeners for Image attribute type in admin edit term and single prodcut page
  • Tweak - Changed version number
  • Tweak - Updated Text domain
  • Tweek - Updated plugin action links

Version 1.0.0

May 18th 2018

Initial Release Version 1.0.0

 

Once again, Thank you for purchasing :)

SThemes