Overview of Variation Swatches

Learn about how to use visualized attributes with your products

Variation swatches allow your customers to choose different variations of products in a delicate visual experience. With WooCommerce default settings, you can only select product attributes using a text format while SellKit provides visualized attributes for products with images, colors, and radio buttons. You can use variation swatches with your product filters, catalog, archive, and single product pages.

product attribute feature

Variation swatch type

There are four types of swatches available in SellKit, including color, image, radio, and text. You can enable them globally for all products or a specific product.

  • Color swatch: gives you the option to show your preferred colors via circle or square blocks for all variable products.
  • Image swatch: makes you able to add multiple image blocks to your variable products.
  • Radio swatch: enables you to show attributes as selectable radio buttons.
  • Text swatch: offers you the option to present text attributes in the form of separate blocks. For example, you can display the size attribute with circle or square blocks using text swatches. 

How to Add Global Variation Swatches

When you add variation swatches globally, it will affect all variable products and you don’t need to add swatches manually for each variable product separately. To add a global attribute, first navigate to the Products > Attributes in your WordPress dashboard.

Screen Shot 2022 04 05 at 18.19.11

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. 
✍️ Note

If you don’t enter any name it will be the same as the name in the previous step.

  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.
Screen Shot 2022 04 05 at 18.24.13
  1. Select the swatch type from the last drop-down list.
Screen Shot 2022 04 05 at 18.27.11
  1. Set the swatch box size using the range slider.
✍️ Note

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

Screen Shot 2022 04 05 at 18.28.35
  1. Select the swatch shape block (circle or square) from the list.
✍️ Note

swatch shape is not available for the Radio swatch.

Screen Shot 2022 04 05 at 18.30.18
  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.

Screen Shot 2022 04 05 at 18.31.44
  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.

Screen Shot 2022 04 05 at 18.33.06

How to configure terms for added swatches

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. 
Screen Shot 2022 04 05 at 18.49.30
  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. 

Screen Shot 2022 04 05 at 18.54.57
  1. For a color swatch, determine color from the color picker or color code and click on the Add New Color button. 
Screen Shot 2022 04 05 at 18.56.48
  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. 
Screen Shot 2022 04 05 at 18.58.48
  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. 

How to edit or delete a global attribute

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. 
Screen Shot 2022 04 05 at 19.13.11

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.
Screen Shot 2022 04 05 at 19.15.02

Customize swatches for specific products

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
Screen Shot 2022 04 05 at 19.20.35
  1. Click on the Attribute tabs. 
  2. From the drop-down choose an variation swatch and click on the Add button. 
Screen Shot 2022 04 05 at 19.22.15
  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. 
Screen Shot 2022 04 05 at 19.23.12
  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. 
Screen Shot 2022 04 05 at 19.25.09
  1. Click on an added attribute row and from the drop-down, change the Default value to any other Swatch type.
Screen Shot 2022 04 05 at 19.26.26

Enable swatches in SellKit’s Product Filter Widgets

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. 
Screen Shot 2022 04 05 at 19.33.20
  1. In the editing environment, select the middle red plus icon and choose the two columns with a sidebar structure.
Screen Shot 2022 04 05 at 19.42.57
  • 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.
Screen Shot 2022 04 05 at 19.43.24

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. 
Screen Shot 2022 04 05 at 19.45.12
  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. 
Screen Shot 2022 04 05 at 19.46.14
  1. Now, you can determine the swatch type, using the Select attribute drop-down. 
Screen Shot 2022 04 05 at 19.47.43
  1. Next, you need to set the value of the Display as a menu to your selected swatch. 

For example, if you chose the Color in the Select attribute menu, you have to set the Color Swatch for the Display as.

What’s next?

Overview of Product Filters

Was this article helpful?YesNo