---
title: How to Use Select2 Dropdowns for WooCommerce Variations
description: Turn on Use Select2 and Load Select2 in Variation Swatches Pro to show searchable variation dropdowns with swatches.
url: "https://wpfactory.com/docs/select2-dropdowns-for-variations/"
updated: "2026-09-27"
category: Pro Features
---

# How to Use Select2 Dropdowns for WooCommerce Variations

To use Select2 dropdowns for WooCommerce variations, go to **WooCommerce > Settings > Variation swatches** in [Variation Swatches for WooCommerce - Color & Image Swatches](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) Pro, tick **Use Select2**, keep **Load Select2** ticked, and save. Attribute selectors on variable product pages become searchable menus showing each swatch next to its name.

## Before you start

- WooCommerce, active.
- [Variation Swatches](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) Pro (this is a Pro feature).
- A **variable** product. Select2 is applied on the single product page for variable products only.

## Turn it on

1. Go to **WooCommerce > Settings > Variation swatches**.
2. In the **Select2** section, tick **Use Select2**.
3. Leave **Load Select2** ticked (the default).
4. Click **Save changes**.

| Label | Option ID | Type | Default | Free/Pro |
| --- | --- | --- | --- | --- |
| Use Select2 | `alg_wc_civs_use_select_2` | Checkbox | No | Pro |
| Load Select2 | `alg_wc_civs_enqueue_select_2` | Checkbox | Yes | Pro |

## How the two options work together

**Use Select2** is the switch that replaces the attribute selectors with a Select2 menu on variable product pages. **Load Select2** loads the Select2 library (script and stylesheet) that the menu needs, from the cdnjs content delivery network.

Keep both options on. Variation Swatches only switches to Select2 when it has loaded the library itself, so if you untick **Load Select2**, the Select2 menu is not applied, even if your theme or another plugin already loads Select2, and shoppers see the normal swatches again.

**Note:** Select2 applies on the single product page and only for variable products. It does not change shop or category pages.

![variable product page with the attribute selector rendered as a searchable Select2 dropdown](https://wpfactory.com/wp-content/uploads/select2-dropdowns-for-variations-1.png)

## Troubleshooting

- **Nothing changes:** confirm **Use Select2** and **Load Select2** are both ticked, and that you are viewing a variable product on its single product page.
- **The dropdown appears and then breaks, or styling looks wrong:** another copy of Select2 (for example from your theme) may be clashing with the one Variation Swatches loads. Test with other plugins disabled or a default theme to find the conflict, then contact support.
- **Select2 stopped working after a privacy or security change:** the library loads from cdnjs.cloudflare.com. If a content security policy, cookie tool or ad blocker blocks that domain, the Select2 menu cannot load.

## Related guides

- [Getting Started with Variation Swatches for WooCommerce](https://wpfactory.com/docs/use-variation-swatches/)
- [Variation Swatches Settings Reference](https://wpfactory.com/docs/variation-swatches-settings-reference/)

### Ready to set this up?

Select2 dropdowns are a Pro feature of [Variation Swatches](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/). If you are still on the free version, upgrading takes a couple of minutes and unlocks this along with the rest of the Pro toolkit. [Get Variation Swatches Pro](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

- [How to Add Variation Attribute Images to the WooCommerce Product Gallery](https://wpfactory.com/docs/variation-attribute-images-in-product-gallery/)
- [How to Show Only Valid Variation Combinations in WooCommerce](https://wpfactory.com/docs/show-only-valid-variation-combinations/)
- [Variation Swatches General Options and Pro Settings](https://wpfactory.com/docs/general-options-swatch/)
- [How to Change the Size and Shape of WooCommerce Variation Swatches](https://wpfactory.com/docs/style-and-resize-variation-swatches-css/)
- [Variation Swatches Developer Reference: Hooks, Meta Keys and CSS Classes](https://wpfactory.com/docs/variation-swatches-developer-reference/)