In this documentation, we will show you how to customize the Variation Swatches Feature by Element Pack Pro.

Enable Variation Swatches Feature

To use the Variation Swatches Feature from Element Pack, you must first enable the feature.

1. Go to WordPress Dashboard > Element Pack Plugin dashboard.
2. Then Click the Special Features Tab.
3. Search the Variation Swatches feature Name.
4. Enable the Variation Swatches Feature.
5. Hit the Save Settings Button.

Configure the Variation Swatches

Set the Attributes

Go to Products section on dashboard.

1. Navigate to Attributes Section.
2. Find the Attributes form on the left, Add attributes by following.
3. The Added Attributes will appear on right section.

Add Color Attributes

1. Name: Set the name for the Attributes ( e.g.: Color ).
2. Slug: Set the slug for the attributes ( unique slug/references ).
3. Type: Select the type for the attributes ( e.g.: Color, Image, Label, Button ).
4. Default Sort Order: Set the default sort order Custom Order ( e.g.: Custom Order, Name, Name ( Numeric, Term ID ).
5. Click on the ” Add Attributes ” to create new added.

6. Added Attribute appear on the right.

7. After adding all attributes.

Configure Terms ( e.g.: Color )

1. Select the Attributes ( e.g: Color ).
2. Click on the “ Configure Terms ” to add new configure.

1. Name: Set the name of the color ( e.g.: Red ).
2. Slug: Set the slug for the attributes ( unique slug/references ).
3. Description: Set the description of it.
4. Swatches Color: Set the swatches color.
5. Click on the ” Add new Color ” button to add new variation.

6. The Color attributes swatches appear.

7. After adding new color.

Add Image Attributes

Set the Image Attributes,

1. Name: Set the name of the Attributes ( e.g.: Image ).
2. Slug: Set the slug for the attributes ( unique slug/references ).
3. Enable Archives: Enable this if you want this attributes to have products archives in your strore.
4. Type: Select the type for the attributes ( e.g.: Color, Image, Label, Button ).
5. Default sort Order: Set the default sort order Custom Order ( e.g.: Custom Order, Name, Name ( Numeric, Term ID ).
6. Click on the ” Add Attributes ” to create new added.

After adding attributes it will appear on the list.

7. Click on the ” Configure Terms ” to configure the attributes.

Configure Terms ( e.g.: Image )

Set the products images ( Edited based on color of image ).

1. Name: Set the name of the Attributes ( e.g.: Black ).
2. Slug: Set the slug for the attributes ( unique slug/references ).
3. Description: Set the description for the images.
4. Swatches Image: Select the swatches image.
5. Click on the ” Add New Image ” button to add new products.

6. After adding product color. It will appear here.

7. All the variation appears here.

Add New Products

Add New Products,

1. Set the Title for the Products.
2. Set Products Description.

4. Select Product Data > Variable Products
5. Select the ” Attributes ”

Note: Must Select the ” Variable Product “ to set attributes.

6. Select the attributes for the products ” Color “.

7. Values: Added values from this color.
8. Click on the ” Select All ” to add new products.
9. Click on the “ Save attributes ” to save it.

10. Adding new attributes.
11. Remove the attributes by clicking on the ” Remove ” button.

Variation Added

12. Navigat to ” Variation ” section.
13. Set the ” Generate Variation ” button to generate new variation.

14. The message will appear click on it.

After generating variation it will appear all the variation.

Swatches

Color Attributes

Set the swatches for the attributes ( e.g.: Color ),

1. Navigate to Swatches section.
2. Type: Set the type( e.g.: Default, Color, Image, Label, Button ).
3. Shape: Set the shape ( e.g.: Default, Circle, Rounded Corner, Square ).
4. Size: Set the size ( e.g.: Default, custom ).

5. Set the swatches color for the Color attributes.

Image Attributes

Image attributes for the images,

1. Type: Set the type for the image ( e.g.: Image ).
2. Shape: Set the shape for the images.
3. Size: Set the size for the default image.
4. Set the image for the swatches items.

View Products

1. Click on the ” View Product ” and it will take to new products pages.

2. Color Attributes will appear.
3. Image attributes will appear.

Adding The Customisation

Go to the Other Settings section.

1. Shape: Set the shape for the attributes design. ( e.g.: Default, Circle, Square ).
2. Tooltip: Set the tooltip ( e.g.: Default, No ).
3. Size: Set the size for the attributes.
4. Convert Quantity Button: Set the quantity button ( e.g.: Default, No ).

1. Set the shape for the attributes.
2. Tooltip appear on the attributes.
3. The Convert Quantity button appear to add or remove the quantity.
4. Set the Size for the button.

By Following this you can use the variation swatches for adding your own customization. You can set the Custom attributes for Color, Image, Label and Button.

Thanks for reading the documentation.

Video Assist

I hope the video will help you to learn more about the feature. Please check the demo page for more examples.

Thanks for staying with us.