WooCommerce shows the options of a variable product, such as size or material, in dropdown menus. Customers have to open each menu to see what exists, a sold-out size often only becomes clear after they pick it, and small dropdowns are easy to miss on a phone. If you are looking for WooCommerce variation swatches, the goal is usually simple: put those choices in view as buttons.
This guide shows how to do that with Variation Swatches. One honest note first: the plugin creates accessible text buttons and styles WooCommerce’s native Product Blocks Pills. It does not create color or image swatches. By the end, your product pages will show each option as a readable button, with sold-out and backorder choices clearly worded and a layout you have checked on desktop and mobile.
What you need
- WordPress 6.5 or later, WooCommerce 8.2 or later, and PHP 8.1 or later.
- Variation Swatches, with its license activated on your site.
- At least one variable product with options such as size, volume or material.
- For block-based product templates: WooCommerce 10.0 or later, with the Variation Selector set to Pills.
Step 1: Install the plugin and activate your license
Upload the plugin ZIP from Plugins → Add New Plugin → Upload Plugin and activate it. Then open UFP → Variation Swatches, go to the License tab, and click Activate license after entering your key.
The license enables the storefront buttons. Without current access, WooCommerce’s original dropdowns or Pills stay in place and keep working.
Step 2: Start with a preset
Open the Classic forms tab. This covers the standard WooCommerce variation form on classic product pages. Under Presets, you can choose Classic, Soft, Outline or Pill. The video tries Soft, which uses quiet neutral surfaces, and then Pill, which gives rounded, compact choices.
The Live preview beside the settings shows an example size selector with available, selected, backorder, out-of-stock and unavailable buttons. It also checks text and control contrast as you work, so you can keep every choice readable. A preset only fills in the form; nothing changes on your storefront until you save.
Step 3: Set how selection behaves
In the Behavior section, Enable variation buttons is on by default. A few other settings are worth a look:
- Sync selections with the URL keeps the product link in step with the customer’s choices, so a selection can be shared. It is on by default.
- Show the selected value repeats the current choice below its buttons.
- Show availability status text adds written states, so color is never the only cue.
- Out-of-stock variations can be crossed out (the default), dimmed or hidden. Unavailable combinations has the same three choices.
Step 4: Adjust the look and the mobile layout
In the Appearance section, set Selected indicator to Checkmark to add a small check to the chosen button. Set Mobile layout to Two columns so options line up neatly on phones. Mobile breakpoint decides where that layout begins; 600 px is the recommended setting. You can also change the Button shape, sizes, spacing and font, and fine-tune the colors in the Colors section.
Use the Mobile button above the preview to check the phone layout, then switch back to Desktop to compare. When both look right, click Save settings.
Step 5: Test the buttons on a product page
Open a variable product. Choose a size and WooCommerce shows that variation’s price, as it does with the dropdown. Sold-out sizes are marked with the words Out of stock, and backordered sizes show Available on backorder.
Switch between sizes to confirm the selected option updates. Then try the keyboard: each attribute works as a radio group, with the arrow keys, Home, End, Space and Enter. Finally, use the WooCommerce reset link to clear the selection. The image, price and add-to-cart button should behave just as they did before, because WooCommerce still controls them.
Step 6: Style Product Blocks Pills
If your product pages are built with WooCommerce Product Blocks, open the Product blocks tab. These controls are separate from Classic forms, so each design can be set on its own. Style Product Blocks Pills is on by default. If you want to begin from your classic design, use Copy Classic design and review the result.
In the Site Editor, open the Product template, select the WooCommerce Variation Selector, and choose Pills as its display style. The plugin styles Pills only; it does not convert a selector that is set to dropdowns.
Back in the Product blocks tab, set Pills shape to Pill and Mobile Pills layout to Two columns. Check the mobile preview, compare it with desktop, and click Save settings.
Good to know
- The buttons are text only. Color swatches, image swatches, and buttons on shop or category pages are outside the plugin’s current scope.
- WooCommerce stays in control of the selected variation, price, image and add-to-cart checks. If the plugin’s script cannot load, the original dropdown remains usable.
- For products with many variations, the classic form follows WooCommerce’s own lookup and does not guess stock. In Product Blocks, the extra stock wording needs a complete set of up to 200 visible variations; otherwise native behavior is kept.
- To keep the normal dropdown on one product, tick Use native WooCommerce variation controls in that product’s General data panel.
Frequently asked questions
Does Variation Swatches include color or image swatches?
No. The current plugin focuses on accessible text buttons for classic product forms and on styling WooCommerce’s native Pills. If your options are sizes, volumes or materials, text buttons show them clearly. Color and image swatches are not part of the current version.
Does it work with block themes and Product Blocks?
Yes, when the Variation Selector uses Pills and you run WooCommerce 10.0 or later. The Product blocks tab has its own presets, colors, shape, spacing and mobile layout. Selectors set to dropdowns are left as they are.
How are out-of-stock options shown?
By default, a sold-out option stays visible, is disabled and crossed out, and carries the words “Out of stock”. You can dim or hide it instead, or let customers select it to see its status; WooCommerce still blocks the purchase. Backordered options stay selectable and are labeled as available on backorder.
Can customers share a link to the option they picked?
Yes. With Sync selections with the URL turned on, the product link updates as the customer chooses options, using WooCommerce’s own variation parameters. Anyone opening that link sees the same selection.
