Display variations on custom radio buttons

Boost store conversions by displaying product variations as radio buttons. Variations as Radio Buttons for WooCommerce creates attractive radio buttons for product variations that simplify the user experience. It also eliminates any confusion for users about the availability of a product with their required attributes.

With WooCommerce color swatches store owner can display product variations with radio button types that show colors, images, or text labels. Hide the radio buttons for out-of-stock production variations, cross them out, or blur them. For example, after selecting a specific t-shirt color that has a limited size selection, radio buttons of size variations may be hidden, crossed out, or blurred.

You can show radio buttons on all variable products or selected ones. In addition, you can customize the radio button shape, tooltip, and border.

Features

• Show product variations as radio buttons
• Design radio buttons with colors, images, or text labels
• Highlight product images or radio buttons
• Change product images 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 and sizes
• Enable tooltips and borders
• Map product attributes with radio button types

Show product variations as radio buttons 

Display WooCommerce variation swatches buttons on shop page to simplify user navigation.

Display variations by color, images, or text labels

Assign product variations in any of the three radio button types: color, image, and text label with WooCommerce color and label variations. For example, you can use colored radio buttons to represent the colors of a t-shirt and radio buttons with text labels to represent sizes.

Highlight product images in swatches

WooCommerce product variations swatches enable you to place radio buttons beneath gallery images on the shop page and users can preview product variations when they hover over or click on the buttons. Allow users to quickly preview product variations without leaving the shop page. 

Choose hover or click to change images

Set the WooCommerce variation swatches pro to show product images for variations with a click or by hovering over radio buttons.

Change radio buttons for out-of-stock variations

WooCommerce product variations plugin allows hide, blur, or cross out variations that are out of stock.

Show Radio buttons for all or selected products 

You can display variations as radio buttons on all or specific variable products based on the following options.

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

Change radio button shapes and sizes

Choose a round or square shape for radio buttons. Define its size by entering width and height so that it complements your website’s design.

Round Shape

Square Shape

Enable tooltips and borders 

You can enable tooltips to help customers know the purpose and nature of each product variation. To enhance the appearance of radio buttons you can add borders. WooCommerce color swatches empower you to customize tooltips and borders.

Map product attributes with radio button types

Choose colors, upload images, and enter labels to replace the conventional display of product variations with a display that is innovative and user-friendly.

Benefits

• Boosts conversions by displaying product varieties in limited space
• Improves the user experience (UX) as customers can easily choose their preferred variations
• Increases user engagement with interactive radio buttons for variations

Requirements

Minimum PHP version: 5.2

Display variations as visual dropdown buttons instead of default select box using Variations as a Radio Buttons for WooCommerce.