--- title: Getting Started with Variation Swatches for WooCommerce description: Install Variation Swatches for WooCommerce to replace the variation dropdown with color, image or label swatches. url: "https://wpfactory.com/docs/install-variation-swatches/" updated: "2026-09-27" category: Getting Started tags: - Variation Swatches for WooCommerce --- # Getting Started with Variation Swatches for WooCommerce [Variation Swatches for WooCommerce - Color & Image Swatches](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) replaces the variation dropdowns on your product pages with clickable color, image or label swatches. You set the swatch type on each attribute in **Products > Attributes**, and the plugin options are at **WooCommerce > Settings > Variation swatches**. This walkthrough takes you from install to a finished variable product. [![Variation Swatches for WooCommerce - Color and Image Swatches](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-%E2%80%93-Color-Image-Swatches-1024x333.webp)](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) ## What Variation Swatches does Variation Swatches adds three attribute types to WooCommerce: **Color**, **Image** and **Label**. When a variable product uses an attribute of one of these types, the standard variation dropdown is replaced with swatches that shoppers click to pick a variation. There are no appearance settings: swatch size and shape are changed with CSS. ## Install and activate - **Free:** in **Plugins > Add New**, search for *Variation Swatches for WooCommerce - Color & Image Swatches*, then click **Install Now** and **Activate**. - **Pro:** download the Pro zip from your WPFactory account, upload it under **Plugins > Add New > Upload Plugin** and activate it. Pro includes everything in the free version and deactivates the free plugin when you activate it. WooCommerce must be active. For more detail, see [How to Install Variation Swatches for WooCommerce](https://wpfactory.com/docs/install-variation-swatches/). ![Uploading the Variation Swatches plugin in WordPress](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step1-1024x724.png) ## First setup: your first swatches 1. Go to **WooCommerce > Settings > Variation swatches**. ![Variation swatches tab in WooCommerce settings](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step2-1024x499.png) 1. Make sure **Enable Plugin** is ticked. It is on by default, so swatches work right after activation. Leave **Scripts Only on Product Page** ticked (the default) unless your theme shows variation forms outside single product pages. ![Enable Plugin option in Variation Swatches settings](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step3-1024x499.png) 1. Go to **Products > Attributes** and add an attribute (for example, Color). In the **Type** dropdown, choose **Color**, **Image** or **Label**, then click **Add attribute**. ![Products Attributes screen in WooCommerce](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step4-1024x499.png) ![Color, Image and Label attribute types in the Type dropdown](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step4-2-1024x499.png) 1. Click **Configure terms** and add a term for each option. Each term shows one extra field that matches the attribute type: a **Color** picker, an **Image** upload, or a **Label** text box. Fill it in for every term. ![Adding attribute values with color, image or label](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step5-1024x499.png) 1. Edit a product, set **Product data** to **Variable product**, add your attribute on the **Attributes** tab, tick **Used for variations**, then create the variations on the **Variations** tab and update the product. 2. View the product. The swatches replace the variation dropdown. ![Applying attributes to a variable product](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-Step6-1024x499.png) ![Color swatches on a WooCommerce product page](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-tshirt-color-swatch.png) ## Main features ### Color, image and label swatches (free) Each type has its own step-by-step guide: [How to Add Color Swatches](https://wpfactory.com/docs/add-color-swatches/), [How to Add Image Swatches](https://wpfactory.com/docs/add-image-swatches/) and [How to Add Label (Text) Swatches](https://wpfactory.com/docs/add-label-swatches/). For attribute setup in general, see [How to Set Up Color, Image and Label Attributes in WooCommerce](https://wpfactory.com/docs/set-attribute-admin-options/). ### Swatch size and shape with CSS (free) Variation Swatches has no size, shape or hover settings. You restyle swatches with a few lines of CSS. See [How to Change the Size and Shape of WooCommerce Variation Swatches](https://wpfactory.com/docs/style-and-resize-variation-swatches-css/). ### Only valid combinations (Pro) After a shopper picks one swatch, swatches that would lead to a variation you do not sell are greyed out. See [How to Show Only Valid Variation Combinations in WooCommerce](https://wpfactory.com/docs/show-only-valid-variation-combinations/). ### Add images on Gallery (Pro) Adds the term images of a variable product's Image attributes to that product's gallery. See [How to Add Variation Attribute Images to the WooCommerce Product Gallery](https://wpfactory.com/docs/variation-attribute-images-in-product-gallery/). ### Select2 dropdowns (Pro) Turns the attribute selectors on variable product pages into searchable Select2 menus that show each swatch next to its name, which helps with large variation sets. See [How to Use Select2 Dropdowns for WooCommerce Variations](https://wpfactory.com/docs/select2-dropdowns-for-variations/). Every option is listed in the [Variation Swatches Settings Reference](https://wpfactory.com/docs/variation-swatches-settings-reference/), and developers can find the filter, meta keys and CSS classes in the [Variation Swatches Developer Reference](https://wpfactory.com/docs/variation-swatches-developer-reference/). ## Free vs Pro | Feature | Option ID | Default | Free/Pro | | --- | --- | --- | --- | | Color, Image and Label attribute types | n/a | n/a | Free | | Enable Plugin | `alg_wc_civs_enable` | Yes | Free | | Scripts Only on Product Page | `alg_wc_civs_scripts_on_product_page` | Yes | Free | | Only valid combinations | `alg_wc_civs_possible_combinations` | Yes | Pro | | Add images on Gallery | `alg_wc_civs_add_images_on_gal` | Yes | Pro | | Use Select2 | `alg_wc_civs_use_select_2` | No | Pro | | Load Select2 | `alg_wc_civs_enqueue_select_2` | Yes | Pro | ## FAQ ### Why do I still see a dropdown instead of swatches? The attribute's **Type** is probably still **Select**, or its terms have no color, image or label value. Edit the attribute in **Products > Attributes**, set the type to Color, Image or Label, and fill in the field on each term. Also check that **Enable Plugin** is ticked. More fixes: [Troubleshooting Variation Swatches for WooCommerce](https://wpfactory.com/docs/troubleshooting-variation-swatches-for-woocommerce-color-image-swatches/). ### Do swatches work with custom product attributes? No. The swatch type is set on global attributes created in **Products > Attributes**. Custom attributes typed directly into a single product have no type setting, so they keep the standard dropdown. ### Why are swatches missing in my theme's quick view or on shop pages? **Scripts Only on Product Page** is ticked by default, so the swatch scripts and styles load on single product pages only. Untick it if your theme shows variation forms elsewhere. ### Can I change the swatch size or make them round? Yes, with CSS. There are no appearance settings in either version. See [How to Change the Size and Shape of WooCommerce Variation Swatches](https://wpfactory.com/docs/style-and-resize-variation-swatches-css/). ### What changes when I upgrade to Pro? **Only valid combinations** and **Add images on Gallery** are on by default, so they take effect as soon as Pro is active. **Use Select2** is off until you tick it. ### Do more with your swatches Color, image and label swatches are free. [Variation Swatches for WooCommerce - Color & Image Swatches](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) Pro greys out unavailable combinations, adds attribute images to the product gallery and switches large variation sets to searchable Select2 dropdowns. [See what Pro unlocks](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/). Need a hand? Our team answers every ticket on the [Variation Swatches support forum](https://wpfactory.com/support/item/color-or-image-variation-swatches-for-woocommerce/). Related articles - [Variation Swatches General Options and Pro Settings](https://wpfactory.com/docs/general-options-swatch/)   [![Variation Swatches for WooCommerce – Color & Image Swatches](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-–-Color-Image-Swatches.webp)](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/)