Let’s learn how to use feature Color Swatch and Image in WordPress Themes!

Firstly, a huge thanks for purchasing our themes. If you still had any problem with our theme, please feel free to contact us via our Support Ticket System then we will support you until you feel happy with our product!

As you know, our themes support you with features color swatch and image for WooCommerce product. This is a great feature for an eCommerce site.

SW Woocommerce Swatches plugin provides the way to change the product variation select option fields into user-friendly labels, colors, and images. The plugin gives you an alternative to the default WooCommerce dropdown fields so that the variations on your products can be their actual colors, images, and labels.

Normally, with Woococommere’s default, you can only add a variable product on the product page. However, our SW Woocommerce Swatches plugin will allow customers to be able to purchase variable products directly from the homepage or product listing page without going to a single product page.

Now, let’s follow below steps to install this plugin on your site.

 

I. INSTALL AND ACTIVE SW WOOCOMMERCE SWATCHES PLUGIN

 

1. Download the plugin

2. Login to your site’s admin panel and navigate to Plugins -> Add New -> Upload.

3. Click choose file, select the plugin file and click install

4. Click activate button to active SW Woocommerce Swatches plugin on your site

This plugin will be inclued in our WordPress’s themee. So, If you are using our WordPress themes supporting this features, there is SW WooCommerce Swatches plugin ready to use. Thus, you can skip this step

 

II: ENABLE/DISABLE SWATCHES IMAGES FEATURES

 

 

1. Go to WooCommerce > Settings > Choose tab SW WooSwatches to open the SW WooCommerce Swatches Settings

2. Check for the Enable Swatches Variation parameter to enable the swatch feature on your site.

3. Check for the Enable Swatches Variation Listing parameter to enable swatches variation on the product listing page.

4. Enable and disable tooltip from Enable Tooltip settings.

Variation Image Swatch in Autusin - Auto Parts Shop Theme
Image Swatch in Autusin – Auto Parts Shop Theme (12 Homepages + Mobile Layouts)

 

5. Set the size for product variable in the Product Variable width parameter and Product Variable height parameter

6. Add color code for Actvation status in the Active Color parameter.

7. Click on the save changes button

 

III: CREATE PRODUCT ATTRIBUTES

 

Two different product attributes are available in WooCommerce, local and global product attributes. In WooCommerce both options are called attributes, but there is a difference in the functionality of these attributes.

3.1 Global attributes

: These are the properties that you will find in the WP-Admin under Product > Attributes. All attributes created here are at on a global website level and can be used with all products. Here you can quickly and easily add attributes and their terms.

To create a Global Attribute, please follow the below steps:

Step 1: Create Global Attribute

1. Login to your site’s admin panel and navigate to Product -> Attributes -> Add new attribute

2. Add a Name.

3. Add a Slug; (optional); this is the URL-friendly version of the name.

4. Enable Archives if desired. If enabled, you can view a page with all products having this attribute. For example, if you have this enabled, and “black” is one of the options under “color”, you can add http://yourstore.com/pa_color/black/ to your menu to only display black clothing – pa stands for “product attribute.”

5. Set type of attribute: select or checkbox

6. Select a Default sort order. Choose between “Name”, “Name (numeric)”, “Term ID” or “Custom ordering” where you decide by dragging and dropping the terms in the list when configuring the terms (see below). “Name (numeric)” is relevant if the values are numbers. If you select “Name”, it sorts alphabetically with 1 and 10 preceding 2. If you select “Name (numeric)” it sorts based on numerical value.

7. Click to Add Attribute.

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

Step 2: Create Attribute’s Term

1. click on the “Configure terms” text to add attribute values.

2. Add Name

3. Add a Slug

4. Add Description. This feild isn’t required. So, you can empty if you want

5. Click on the Select Color button and set color which you want

6. Click on the Upload/Add an image to update an image for this term

3.2 Local attributes

: These attributes are created when you create or edit a product. You cannot use these attributes to filter and they are only visible on the product page itself. 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.

1. Go to: Product -> Add Product(or edit an existing one).

2. Scroll down at product data and click to the Attributes tab.

3. Select Custom product attribute in the dropdown and Click on the Add buton.

4. Add Name

5. Add Values. Please note that each attribute’s value will separated by “|”.

6. Check for the Used for variations

7. Click on the Save attributes button

8. Click on the Update button

9. Scroll down at product data and click on the Sw WooSwatches tab

10. Click on the Local Attribute which do you want to configure

11. Select COLOR or IMAGE

12. Select Attribute type : Select/ checkbox

Please note that:

– Color and image only show if you set product attribute type : Checkbox.

– If you add value for both of Color and Image parameters for the term, the Image will be priority to show.

– If you do not add the color or thumbnail variation for the term, it will appear only text in the front end

III. ADD ATTRIBUTES TO VARIABLE PRODUCT

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

2. Select the Attributes tab in the Product Data. In this tab, you can select a global attribute or add new cusom attribute in the dropdown menu => and click on the Add button

Global Attribute: You can click on the Select All button to get all term or click on the Select One button to choose some terms which do you want to add

Local Attribute: Add Name of product attribute => then Add Values. Please note that each attribute’s value will separated by “|”.

5. Check for the Used for variations checkbox

6. Click to the Variations tab

7. Select Add Variation and click on the Add button

8. Choose Term values for each attribute and do some nessalery for it as Add image, Add SKU, Add Price….

9. Set Default Form Values

10. After all, click on Update product to update the variation to the product.

After all, preview the product then click on Update button to publish it. Now you complete the task of creating a product with color and image swatches.

 

Currently, our top best themes are ready for this features. Let’s enjoy our demos for more experience. (See our best themes)

 

See Our Best-selling WordPress Themes 2020:

 

See our theme collections:

 Our Support Help Desks:

Documentation: Find documentation for themes and frequently asked question on our Documentation channel wpthemego.com/document

Forum Support: Join our public WPThemeGo Community at forum.wpthemego.com to find the frequently asked questions, post your problem and get support to solve it.

Ticket System: Submit a ticket about your problem on WPThemeGo Support at support.wpthemego.com to get help from the support team. All your information will be kept confidential.

Email Support: Contact us via email for presale questions about our themes and other questions via contact@wpthemego.com.

×