1. Home
  2. Docs
  3. Xpro Elementor Addons
  4. Extensions
  5. Woo Swatches

Woo Swatches

Woo Swatches

Woo Swatches are used in WooCommerce WordPress product layout to showcase product variations like color, size, etc that the business offer to their customers. For example, if you offer three distinct color t-shirts in three different sizes to online shoppers, the Elementor WooCommerce Swatches extensions can assist you in displaying all the variations with additional customization features.

The Xpro Addons are fully compatible with WooCommerce and even offer more than 7 free WooCommerce widgets in their free Addon pack. You can easily create an online store and personalize its display to appeal to your clients and improve their engagement.

With Xpro Woo Swatches, you can add Xpro color, Xpro Image, and Xpro Label variation to your product. Add these variations effortlessly on your e-commerce website to provide your clients with the perfect product that meets their requirements.

How to Install Xpro Woo Swatches Feature for Elementor


In order to use Xpro WooCommerce widgets and extensions, you need to install the WooCommerce plugin in your WordPress dashboard. You need to install and activate the Free version of Xpro Elementor Addons to use our Woo Swatches for your WordPress websites. Once the plugin is installed, just make sure Woo Swatches is ‘Enabled’ from the Extensions tab of the Xpro Dashboard. This way you will easily find & use the effect in the Elementor editor.

Follow the steps below to enable the extension:

Step 1

Click on the Xpro Addons option available in the WordPress dashboard menu.

Step 2

From the Dashboard, click on the Extensions Tab, find the Woo Swatches, and then toggle the button ‘ON’ to enable it.

Elementor Extensions

How to Use Elementor Woo Swatches Extension

WooCommerce allows you to add products to your WordPress. After you create a product click on the attributes section to create variations.

In the attributes, you have the following fields and options to create product variations.

Name: Give a name to the attribute.
Slug: Give a unique id to attribute.
Type: Select how this attribute will be displayed.

Click on the Add Attributes button to save these attributes.

After you’ve chosen the category of attributes to display, you may add each sort of variation to it. For example, if you created color attributes, you can also provide the color type by clicking on the configure term button.

Add colors or whatever attributes you are working on and save it so you can use it later.

Woo swatches for Elementor

Now go to the product where you want to add them and add these attributes under the attributes tab.

Elementor woo swatches

Save these attributes and add them to the variations. In the variation tab, include all the combinations of variations from attributes.

product variations

How to Add Woo Swatches to the Elementor

To add these variations to your Elementor Page builder, create a product layout and use the Xpro Add to Cart widget.

color swatches woocommerce

How to Style Woo Swatches for Elementor

Head over to the styling tab and open the Woo Swatches menu to style the display of the layout.

size swatches woocommerce

You have different tabs to style the layout of each type of variation. For colors, you can adjust the size of the display with the width, height, and radius options.

product variation swatches

For labels, you can personalized typography, text color, background color, and border color.

elementor product variation

You can add a border around swatches by choosing one of the border types: solid, double, dashed, dotted, or groove. Additionally, customize the border width, radius, and color.

elementor product swatches features

Best Woo Swatches for Elementor

That is all from the Xpro Woo Swatches feature for Elementor. Combine this feature with Woo Product Image, title, price, and description and create a product layout and build your business online.

Xpro Elementor Addons consists of amazing widgets, feature, and theme template that allows you to create a professional website without a need for any coding. Use the free Theme Builder for Elementor to dynamically design singular and archive theme templates. View our premium Elementor widgets that are advanced in nature and can help you create an incredible visually appealing website.

How can we help?