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? – Phoenix128_RiccardoT Feb 26 '16 at 20:50
  • here is the entire HTML pastebin.com/xMRzcfXR – Robert Feb 26 '16 at 21:12
  • It is not clear... I do not see any Show/Hide, can you please explain better your problem? – Phoenix128_RiccardoT Feb 26 '16 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 Feb 26 '16 at 21:36
  • please tell me if everything is clear for you – Robert Feb 26 '16 at 21:38

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 Feb 26 '16 at 21:57
  • Check the article, it is for each option. – Phoenix128_RiccardoT Feb 26 '16 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 Feb 26 '16 at 22:01
  • Do you need this solution based on the field content or for its position? Please specify what you need. – Phoenix128_RiccardoT Feb 26 '16 at 22:02
  • let's talk on skype i will add you now – Robert Feb 26 '16 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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