Radio Inputs

Adds radio inputs form fields. This Option has several modes. In FREE version it has only classic mode. In PRO version three more modes are added: color, image and text.

  • Make default - a certain suboption will be pre selected on the product page when this setting is chosen;

  • Exclude? - hides/excludes a certain suboption in this Option instance only

  • Label - a visible nice name of the suboption;

  • Value - the value for the form field (input type radio in this case); it is like a slug for options; it should be unique across suboptions of the option;

  • Price/Rate - (optional) this is a numeric representation of the suboption that can be used in price/weight calculation formulas and/or non option variable formula;

  • CSS Class - (optional) custom css class that will be added to a certain suboption html only;

  • Description - (optional) custom text which will be shown in these modes: classic, image, colour;

  • Colour - (optional) the colour that will be used as a background colour of suboption's item when the option is in colour mode; this setting is used for Colorify functionality as well;

  • Image - (optional) the image that will be used as a background image of suboption's item when the option is in image mode; this image is used both for displaying in suboption's item and as a replacing image for the product main image if _Change image _setting is enabled for this option;

  • Alt image - (optional) is used ONLY as a replacing image for the product main image if _Change image _setting is enabled for this option;

Price/rate setting can hold the value which can be used in price calculation formulas. Adding any value to this setting ⚠️ does not automatically mean that this value will be used in price calculation. This value will be assigned to Option's variable and used in price calculation only if the variable itself is used in price calculation formula.

For instance, you have an option with a slug


and suboptions like 'Matt' and 'Gloss' and you would like to add '0' to the price when 'Matt' is chosen or add '10' when 'Gloss' is chosen. Then set 0 and 100 as price/rate settings of the suboptions and then modify your price calculation formula to smth like this:


💡 This is how it works: you must use a certain option's variable in your price calculation formula if you want this option to modify the product price!

Making a certain suboption the default one means that this suboption will be chosen automatically on product page/form load.

Making certain suboptions excluded means that they will not be shown in the Option for this specific instance of the Option. For instance, you have "Buggi or Vuggi?" custom option in two products. It means that you re use the same option for two products and you have two instances of this option. Then you want to exclude (temporarily or permanently) one or more suboptions for the first product. So you do not have to remove these suboptions! Just mark them "excluded" and save (no need to save to DB in this case) the option settings and that's it - excluded suboptions will not be shown for the current option's instance in the current product.

🏆 PRO FUNCTIONALITY: Starting from version 4.5, Radio Inputs option has got Suboption Conditional Logic (same as for Select option). Its interface looks like this:

This feature adds a possibility to conditionally display/hide option's suboptions based on the choice in other options. You can find a nice animated screenshot of this feature in this our blog post.

Last updated