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.
Installation
- Download the Variations as Radio Buttons for WooCommerce.zip file from your WooCommerce account.
- Go to WordPress Admin > Plugins > Add New and Upload Plugin > Choose File (for the file that was downloaded).
- Install Now and Activate Plugin.
Configurations
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
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:
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:
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:
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:
Under the Map Attributes to Swatch Type tab, all Attributes will be displayed and you can map to its respective Swatch Type.
