I have a radio button in the Product View page at the custom options, this contain Hide and Show. Is there any way to add a class for each option? I need to hide everything that is under this field when the value Hide is checked and to display when select Show. I try to use this but is work only for hide.

     jQuery('div:contains("Show")').on('click', function(){
     jQuery('div:contains("Hide")').on('click', function(){

PHP code for generate radio buttons:

                       $selectHtml .= '<li><input type="radio" id="options_' . $_option->getId() . '" class="'
                            . $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
                            . ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
                            . ' value="" checked="checked" /><span class="label"><label for="options_'
                            . $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
  • Can you please post your HTML? Commented Feb 26, 2016 at 20:50
  • here is the entire HTML pastebin.com/xMRzcfXR
    – Robert
    Commented Feb 26, 2016 at 21:12
  • It is not clear... I do not see any Show/Hide, can you please explain better your problem? Commented Feb 26, 2016 at 21:16
  • please take a look here? jsfiddle.net/jritchey/hy3r9kn4 at the top is two radio buttons, that is for show and and hide, the all process must be work like in this fiddle but I need to identify that radio buttons, because if you know magento you know that the radios buttons id is something like this: id="options_' . $_option->getId() . '" so I need to add a class or something to can add a jquery code.
    – Robert
    Commented Feb 26, 2016 at 21:36
  • please tell me if everything is clear for you
    – Robert
    Commented Feb 26, 2016 at 21:38

1 Answer 1


Option 1

You need to add a custom field to your custom options and use it in your frontend.

Have a look here to understand how to add a new field:


Then you will have to take that field's value and use for your css class in frontend.

Option 2

According to the snippet you gave and the additional information on your comments you can use the JavaScript approach:

var showRadio = jQuery('.product-options .display ul li:nth-child(1)').find('input');
var hideRadio = jQuery('.product-options .display ul li:nth-child(2)').find('input');

hideRadio.click(function() {
  jQuery('.product-options dd, .product-options dt').hide();
showRadio.click(function() {
  jQuery('.product-options dd, .product-options dt').show();
  • I have that already added, but that is for the entire radio field, I need for each option, because I need to identify the option to can hide and show with jquery
    – Robert
    Commented Feb 26, 2016 at 21:57
  • Check the article, it is for each option. Commented Feb 26, 2016 at 22:00
  • like this is very incomod for client to complete this fields again, i need to find an direct solution, a global
    – Robert
    Commented Feb 26, 2016 at 22:01
  • Do you need this solution based on the field content or for its position? Please specify what you need. Commented Feb 26, 2016 at 22:02
  • let's talk on skype i will add you now
    – Robert
    Commented Feb 26, 2016 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.