1

When i inspect Custom option values which are displaying in product view page , i got below code is reason to display those values.

code :

<span id="options-<?php echo $_option->getId() ?>-container"></span>

inspect element :

enter image description here

here, is there any chance we can display different color for different custom option values, for example, Black = > Black, Green = > Green .

can we use different css classes or ids for each value ?

<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>

    <div class="input-box">
        <?php echo $this->getValuesHtml() ?>
        <?php if ($_option->getIsRequire()): ?>
            <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
                <span id="options-<?php echo $_option->getId() ?>-container"></span>
            <?php endif; ?>
        <?php endif;?>      
    </div>

</dd>
Improve this question
7
  • You can use swatches for that and also you can write your own css(.options_453_3{}, .options_453_2{}) for the ids and use it.Only you can add the option_id as your class. Commented Jan 19, 2017 at 10:15
  • @mujas i am using simple product with custom options , i am not using configurable product, can you please tell what is the css class for code i posted in question , is it _455_2 ? Commented Jan 19, 2017 at 10:18
  • If these options are same for every products.You can write css class like options_453_3{}, .options_453_2{} and apply these classes to your label dynamically. Commented Jan 19, 2017 at 10:20
  • yes, we have same values :Black & Green for all products, i tried adding internal css as .options_453_3 { color : red; } .options_453_2 { color : red; } , but it did't displayed in "red" color..... is the way i am doing is right ? Commented Jan 19, 2017 at 10:22
  • <span class="label" style=" background-color: black; "><label for="options_453_2">Black </label></span> you can use like this.instead of writing black you can use the label value.better you can use different classes. Commented Jan 19, 2017 at 10:24

1 Answer 1

Reset to default
1

there is not straight way to do it you can do it by javascript

This solution for dropdown 

  var x = document.getElementById("mySelect"); //select id here

    var i;
    for (i = 0; i < x.length; i++) {
        tex=x.options[i].text;  // option text 
        var tex = tex.toLowerCase(); //make it lower
        x.options[i].style.backgroundColor = tex; // set the background color for that

    }

you can use css 

  label[for=options_455_2]
   {
      /* ...add css here... */
   }
Improve this answer
4
  • i tried like this , seems i am doing something wrong, please check this : var x = document.getElementById("options_455_2"); //select id here var i; for (i = 0; i < x.length; i++) { tex=Black.options[i].text; // option text var tex = tex.toLowerCase(); //make it lower x.options[i].style.backgroundColor = red; // set the background color for that } Commented Jan 19, 2017 at 10:42
  • if you check link & update the answer as per my requirement, that will be really helpfull..... , "custom option value" = black..... Commented Jan 19, 2017 at 10:48
  • @BabyinMagento added the simple solution for you Commented Jan 19, 2017 at 11:03
  • yes, now i can apply different css for different custom values, give me 10 min, i have one more doubt..... Commented Jan 19, 2017 at 11:10

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.