Overview of Variation Swatches

To add a swatch: 

1. Enter a name like color in the name input box. 
2. Choose a slug that is a URL-friendly edition of the name. 

1. Mark the Enable Archive? checkbox if you need the current attribute to be activated in your product archive pages.

1. Choose the Default order sort from the drop-down menu. You can choose from the Custom order, Name, Name (numeric), and Term ID.

1. Select the swatch type from the last drop-down list.

1. Set the swatch box size using the range slider.

✍️ Note

Swatch size is only available for the Color and image swatches.  

1. Select the swatch shape block (circle or square) from the list.

✍️ Note

swatch shape is not available for the Radio swatch.

1. Specify the swatch to be shown on the catalog page by selecting YES / NO from the dropdown. 

✍️ Note

Catalog here means product archive and shop pages.

1. Choose the layout you want to show. You have the option to show your swatches in a horizontal, vertical, or columns design. 

✍️ Note

Columns can be set in a range of 2-6.

After you added a new swatch, you have to set values for it. To do so:

1. Navigate to the Products > Attributes from your WordPress dashboard. 
2. To set the value for each attribute, simply click on the Configure Terms link, in the rightest columns of attribute lists. 

1. Add the Name, Slug, and Description (optional) for each attribute. For example, if you want to add multiple colors, you have to add the name / slug / description for each color separately. 

✍️ Note

These three values are common for all four types of attributes. 

1. For a color swatch, determine color from the color picker or color code and click on the Add New Color button. 

1. For an image swatch, click on the Plus button and upload your image directly or select it from the media library. Then click on the Add New Image button. To add a new image you have to add a new name first. 

1. For a radio swatch, just click on the Add New Radio button for each radio option. 
2. And finally, for a text swatch, click on the Add New button for each entry. 

To edit or delete a globally added attribute:

1. Hover over the Products from the left sidebar in your WordPress dashboard and click on the Attributes.
2. Hover your mouse pointer over the listed attributes, so that the Edit or Delete options will appear. 
3. Select each one you want to proceed with. 

Also, to edit or delete the settled value:

1. Click on the Configure Terms link for the attribute you want to make changes to.
2. Hover your mouse pointer over each term and select one of the Edit, Quick Edit, or Delete options.

To customize swatches for a specific product:

1. Navigate to the Products > All Products from the left sidebar in your WordPress dashboard.
2. Hover over a product and select the Edit option. 
3. In the Product Data section, make sure that the product type is set to Variable Product. 

1. Click on the Attribute tabs. 
2. From the drop-down choose an variation swatch and click on the Add button. 

1. From the added attribute section, mark the Used for various checkbox and click on the Select all button to consider all values for it. 

1. Then, select the Save attributes button. 

When you’re done, the swatch type is set by default based on the swatches you selected for your specific products. However, if you want to change the default value:

1. When editing a product, select the Swatches tab from the Product data section. 

1. Click on an added attribute row and from the drop-down, change the Default value to any other Swatch type.

If you don’t have a shop page, follow the below steps, otherwise, skip it:

1. Hover over the Pages and click on the Add New option from the left sidebar in your WordPress dashboard. 
2. Add a title and click on the Edit with Elementor button. 

1. In the editing environment, select the middle red plus icon and choose the two columns with a sidebar structure.

• Click on the Widget Panel button on the right-upper side of the Elementor’s sidebar.
• Under the Jupiter X elements, drag and drop the Product widget to one of the columns in the page.  You can also use the WooCommerce [products] shortcode.

Now you have a shop page.

To use swatches with SellKit’s product widget, first:

1. Select a shop page to edit with Elemantor.
2. From the Widget Panel button, find SellKit.
3. Drag and drop the Product Filter widget to a side-column on the page. 

1. Select the widget on the page and choose the Layout tab from the left sidebar in Elementor.
2. Click on the + ADD ITEM button.
3. After that, choose its type to be Custom Attribute from the drop-down menu. 

1. Now, you can determine the swatch type, using the Select attribute drop-down. 

1. Next, you need to set the value of the Display as a menu to your selected swatch.