1. Documentation /
  2. Variations as Radio Buttons for WooCommerce

Variations as Radio Buttons for WooCommerce

With Variations as Radio Buttons for WooCommerce, showcase product variations as radio buttons with options to fully customize the color, image, and text of the radio buttons.


↑ Back to top
  1. Download the Variations as Radio Buttons for WooCommerce.zip file from your WooCommerce account.
  2. Go to WordPress Admin > Plugins > Add New and Upload Plugin > Choose File (for the file that was downloaded).
  3. Install Now and Activate Plugin.


↑ Back to top

Within the WP admin panel, go to WooCommerce > Settings and click on the Variations as Radio Buttons tab. Here you will find the following settings.

General Settings

↑ Back to top

Click on the General Settings tab to configure:

  • When Variations is Out of Stock: Display out of stock variations with Cross, Blur, or Hide
  • Change Product Image on Shop Page: Set whether the product image is displayed on Click or Hover.
  • Show Variation Swatches for: Choose to display variation swatches for All Variable products or specific Products.

Shape Settings:

↑ Back to top

Click on the Shape Settings tab to configure the shape of swatches.

  • Shape Style: Set shape style of swatches, e.g. Round or Square.
  • Width: This sets the width of the swatches in px.
  • Height: This sets the height of the swatches in px.

Tooltip Settings:

↑ Back to top

In Tooltip Settings tab, the following options are available for configuration:

  • Enable Tooltip: Check this option to enable the tooltip of swatches.
  • Tooltip Font Size: This sets the tooltip fontsize in px.
  • Tooltip Background Color: Set the background color of tooltip.
  • Tooltip Text Color: Set the text color of tooltip.

Border Settings:

↑ Back to top

After configuring tooltip settings, within the Border Settings tab, you can select the following:

  • Border Style: Option to enable border style of image and label swatches.
  • Border Color: Set the border color of variation swatches.

Map Attributes to Swatch Type:

↑ Back to top

Under the Map Attributes to Swatch Type tab, all Attributes will be displayed and you can map to its respective Swatch Type.