Overview of Variation Swatches
Learn about how to use visualized attributes with your products
- Introduction
- Variation swatch type
- How to Add Global Variation Swatches
- How to configure terms for added swatches
- How to edit or delete a global attribute
- Customize swatches for specific products
- Enable Swatches In SellKit Filter Widgets
- What’s next?
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.
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.
To add a swatch:
- Enter a name like color in the name input box.
- 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.
- Mark the Enable Archive? checkbox if you need the current attribute to be activated in your product archive pages.
- Choose the Default order sort from the drop-down menu. You can choose from the Custom order, Name, Name (numeric), and Term ID.
- Select the swatch type from the last drop-down list.
- Set the swatch box size using the range slider.
✍️ Note
Swatch size is only available for the Color and image swatches.
- Select the swatch shape block (circle or square) from the list.
✍️ Note
swatch shape is not available for the Radio swatch.
- 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.
- 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.
How to configure terms for added swatches
After you added a new swatch, you have to set values for it. To do so:
- Navigate to the Products > Attributes from your WordPress dashboard.
- To set the value for each attribute, simply click on the Configure Terms link, in the rightest columns of attribute lists.
- 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.
- For a color swatch, determine color from the color picker or color code and click on the Add New Color button.
- 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.
- For a radio swatch, just click on the Add New Radio button for each radio option.
- 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:
- Hover over the Products from the left sidebar in your WordPress dashboard and click on the Attributes.
- Hover your mouse pointer over the listed attributes, so that the Edit or Delete options will appear.
- Select each one you want to proceed with.
Also, to edit or delete the settled value:
- Click on the Configure Terms link for the attribute you want to make changes to.
- Hover your mouse pointer over each term and select one of the Edit, Quick Edit, or Delete options.
Customize swatches for specific products
To customize swatches for a specific product:
- Navigate to the Products > All Products from the left sidebar in your WordPress dashboard.
- Hover over a product and select the Edit option.
- In the Product Data section, make sure that the product type is set to Variable Product.
- Click on the Attribute tabs.
- From the drop-down choose an variation swatch and click on the Add button.
- From the added attribute section, mark the Used for various checkbox and click on the Select all button to consider all values for it.
- 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:
- When editing a product, select the Swatches tab from the Product data section.
- Click on an added attribute row and from the drop-down, change the Default value to any other Swatch type.
Enable swatches in SellKit’s Product Filter Widgets
If you don’t have a shop page, follow the below steps, otherwise, skip it:
- Hover over the Pages and click on the Add New option from the left sidebar in your WordPress dashboard.
- Add a title and click on the Edit with Elementor button.
- 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:
- Select a shop page to edit with Elemantor.
- From the Widget Panel button, find SellKit.
- Drag and drop the Product Filter widget to a side-column on the page.
- Select the widget on the page and choose the Layout tab from the left sidebar in Elementor.
- Click on the + ADD ITEM button.
- After that, choose its type to be Custom Attribute from the drop-down menu.
- Now, you can determine the swatch type, using the Select attribute drop-down.
- 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.