Variations as Radio Buttons for WooCommerce

Replace dropdown fields on product variations with the WooCommerce swatches plugin

Using variation swatches for WooCommerce, you can turn product variations into eye-catching swatches that suit your theme perfectly. Display radio buttons in the form of text labels, images, or colors instead of the default dropdowns. You can also share the variation link of the specific attribute and allow customers to find the exact variation they are looking for.

WooCommerce variations swatches can be displayed on the product page and shop page. Also, set different swatch sizes for both pages. It provides a simplified experience for your customers. For out-of-stock product variations, you can hide the radio buttons, cross them out, or blur them. You can show radio buttons on all variable products or selected ones. With this plugin, you can also customize the radio button shape, tooltip, and border.

Features

• Display swatches as radio buttons, colors, images, or text labels
• Customize the size of each swatch
• Set variation swatches at the product level
• Change product images on the shop page when users click or hover
• Hide, blur, or cross out variations that are out of stock
• Add radio buttons to all or selected variable products
• Change radio button shapes
• Enable tooltips and borders
• Map product attributes with swatch types

Show Product Variation Swatches as Radio Buttons 

Display WooCommerce variations as radio buttons on the shop and product pages to enhance user experience and navigation. You can add different types of attribute swatches such as radio buttons, images, colors, or text labels instead of the default dropdown selection.

Variation Swatches as Color, Radio Button, Images, or Text Labels

The WooCommerce variation swatches plugin lets you to showcase product variations in radio buttons, color swatches, images, and text labels. These swatches provide a more user-friendly and interactive way for customers to select product variations, such as choosing the color of a t-shirt or the size of a pair of jeans.

Highlight Product Variation Image

WooCommerce variation swatches enable you to highlight product variations in the form of images. You can place image radio buttons on the shop page beneath the product image. Users can preview product variations when they hover over or click on the buttons. Allow users to quickly see the product variations without leaving the shop page.

Customize the Variation Swatches for Specific Product

You can customize the product variation swatches for specific products in the product settings. You can add or remove the variation attribute and set the shape. The WooCommerce variation swatches plugin also enables you to customize the size of specific swatches for the product page. However, product-level settings take precedence over general settings.

Customization of the Image Radio Button

The WooCommerce product variations swatches plugin lets you customize the image radio button on the shop page. You can choose to display product variation images by clicking on image swatches or hovering over them depending on your store theme. This adds extra appeal to product variations.

WooCommerce Variation Swatches for Out-of-Stock Products

WooCommerce swatches plugin enables you to display the radio buttons for out-of-stock products. You have multiple options such as hiding the out-of-stock product swatches to minimize any confusion. However, you can also blur or cross out the variations that are not available.

Show Radio buttons for All or Selected Products

Increase store engagement with the variation swatches for WooCommerce. You can choose to display variation swatches on selected product variations. Whether you want to add radio buttons to all products or selected variations, this plugin gives you the flexibility to display WooCommerce variations swatches on all or specific variable products.

• All variable products
• All variable products except for X
• Specific variable products

Change Radio Button Shapes and Sizes

This plugin offers the freedom to customize the shape and size of the WooCommerce variation swatches. You can choose round or square button swatches and adjust the size by entering the width and height. This way, you can create radio button swatches that complement your website design. Both the shop and product pages can be customized to have different shapes and sizes for the WooCommerce swatches.

Round Shape

Square Shape

Add Button Border and Enable Tooltips

The WooCommerce color swatches plugin allows you to add a border or change the border radius of the swatches. You can adjust the radius of the radio buttons to match your website appearance. You can also enable tooltips for product variations with the WooCommerce attribute swatches. Display tooltips and help your customers understand the purpose of each product variation swatch.

Replace Dropdown Selection with Multiple Swatches

Use the WooCommerce Product variations Swatches plugin instead of the default dropdown selection to display products with multiple variants, more interactively and user-friendly.

Map attributes to different swatch types and display product variations in the form of swatches. Highlight your product variations more effectively.

Benefits of Using the WooCommerce variations as radio buttons Plugin

• Displaying product variations in a limited space boosts conversions
• Provides an improved user experience (UX), allowing customers to select their preferred variants easily
• Enhanced user engagement through interactive variation swatches

FAQs

Q1: What are WooCommerce variation swatches?

A1: WooCommerce variation swatches are interactive elements like radio buttons, images, colors, or text labels that replace the default dropdowns. It makes it easier for customers to select product variations.

Q2: How can I display WooCommerce variations as radio buttons?

A2: You can display WooCommerce variations as radio buttons by using the WooCommerce variation swatches plugin. It allows you to customize and display product variations in multiple formats, including radio buttons.

Q3: Can I customize the shape and size of WooCommerce variation swatches?

A3: Yes, the WooCommerce variation swatches plugin allows you to customize the shape and size of the swatches to match your website’s design.

Q4: Will the WooCommerce variation swatches plugin work on both product and shop pages?

A4: Yes, the plugin supports displaying variation swatches on both product and shop pages, providing a consistent experience across your WooCommerce store.

Requirements

Minimum PHP version: 5.2