WooCommerce Variation Description Radio Buttons

Updated January 20, 2021     21 Comments
Originally posted March 14, 2014

WordPress Plugins

This plugin is discontinued. This page remains here only for reference.
WooCommerce Variation Description Radio Buttons

WooCommerce Variation Description Radio Buttons

Change WooCommerce variations into radio buttons and adds descriptions to variations.

This is a simple and light-weight plugin that once installed and activated will convert your Woocommerce variations from a drop down menu to radio buttons. Allow your customers to see all of your variations without having to access a drop down select menu.

It also adds a “Variation Description” field. You fill the field in the back end, and it will show on the front end on the product page.

It stops the forced display of “SKU”. The SKU for variable products will only be displayed if you enter a SKU.

For more info, see the documentation.

  Fork it on GitHub.

We've 21 Responses

  1. January 2nd, 2015 at 12:48 am

    Hi,
    great plugin, I’ve been tweaking away to get it to do what I need (which is include variation thumbnails in each item, in conjunction with another plugin) and it’s all good. Only issue I’ve got is that I want to disable selection of the default value, and all that’s committed to your repo is the minified frontend JS; I’ve found and hacked the relevant minified snippet, but it would be cleaner if I could get a hold of the un-minified version?
    many thanks,
    Hugh

    Reply ↓
    Hugh Campbell

  2. February 2nd, 2015 at 10:38 am

    Hi Isabel, thanks so much for your work on this – it’s exactly what I need, however I’m struggling to implement it, was hoping you could help… I can’t seem to convert my variations to Radio buttons no matter what I do! I’m using the Blaszok shop theme at the moment, have tried disabling all other plugins as you suggested, but to avail 🙁 I’m running WordPress 4.1 / WooCommerce 2.2.11

    Reply ↓
    DK

    • February 4th, 2015 at 3:24 am

      Hi,
      Did you create your Product Variations properly?

      Did you set a default variation to be selected? You must set a default for this to work. Do this in your “edit product” page, in the Variations tab, where it says “Defaults:“.

      Does anything change when you activate the plugin?

      Reply ↓
      Isabel

  3. February 4th, 2015 at 5:48 am

    Hi Isabel, yes the product variations are created correctly, and a default variation selected. The only change that occurs when I activate the plugin is that the calculated price, quantity selector, and ‘add to cart’ button all disappear! So I am just left with the variations in a drop down list.

    If I deactivate the plugin, I have the variations in a drop down list, the price, quantity and add to cart buttons.

    I can’t seem to get the radio buttons to appear on the variations no matter which combination I use 🙁

    Reply ↓
    DK

  4. February 6th, 2015 at 4:42 am

    Hi Isabel, yes I had all of these elements correct, and I have just double-checked… there are no ‘any’ variations, and all variations have a price and a description associated with them.

    Reply ↓
    DK

  6. February 6th, 2015 at 6:58 am

    I have heard back from our theme developer, apparently they have previously utilised the plugin, but say that it is not compatible with WooCommerce 2.2+… that must be the issue!

    Reply ↓
    DK

    • June 1st, 2015 at 12:00 am

      Hi,
      I can’t see your product page because the link gives a “Page Not Found” (404) error. That’s strange that your titles have dashes. The plugin doesn’t add those to the title. The titles will be copied exactly from what you enter in the “Attributes” tab. For example, the variation titles in this image are “small”, “medium”, and “large”.

      WooCommerce Product Attributes Tab

      After you enter the titles in the Attributes tab, separated by “pipes” ( | ) like in the picture, then go to the Variations tab to set up the variations. Does that make sense?

      If you send me a working link, I could investigate further. I hope this helps.

      Reply ↓
      Isabel

  8. June 2nd, 2015 at 10:13 am

    Hi Isabella,

    I marked the product as public so now you’ll be able to see the radio buttons. It would be really great if you have an idea why it writes the names with – . As soon as we figure this out I’ll change all my products to variable products with your plugin.

    thanks a lot for your help & looking forward to hearing from you!
    Cheers,
    Amir

    Reply ↓
    Amir

    • June 2nd, 2015 at 12:58 pm

      Hi,
      Please first check this: On the “Edit Product” page, in the “Attributes” tab, for the “Kit” attribute, what is entered for the “Values”? Do you have dashes there? If not, then this is my guess:

      I’m guessing that there may be a conflict with the gravity forms plugin since it adds some Javascript that seems to modify the appearance of the attributes. Try deactivating the Gravity Forms plugins (I think there are 2), and then see if the Variations appear fixed.

      Reply ↓
      Isabel

  10. June 5th, 2015 at 2:32 pm

    Hi Isabel, it seems like your plugin is incompatible with my WooCommerce theme (Blaszok). Is there any way to find the source of the incompatibility and allow the plugin to work? It’s so important for us!

    Reply ↓
    David

    • June 7th, 2015 at 1:52 pm

      Hi. I would need more details, for example, what exactly is the problem? Do the radio buttons not show up at all? Do you have custom attributes set in the back-end? Also, a link to the site may help me to investigate further.

      Reply ↓
      Isabel

  11. October 1st, 2015 at 9:12 am

    Hi Isabella, I’ve been using your plugin and it’s really good.
    Currently all my radio buttons output a specific image. Is there a way to have different radio buttons have different images?

    Thanks for your help and ideas.
    Amir

    Reply ↓
    amir

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]