0

we are adding Custom options to the products with custom options Values as "Black" & "Green".

enter image description here

in frontend , its displaying like below image as in link1 :

enter image description here

But instead of text - Black & Green , i want to display images as below....

enter image description here

i uploaded Black & Green images to below path :

if custom option value is green, i want to display below image :

http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png

if custom option value is black, i want to display below image :

http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png

app/design/frontend/base/default/template/catalog/product/view/options/type/select.phtml

<?php /* @var $this Mage_Catalog_Block_Product_View_Options_Type_Select */ ?>
<?php $_option = $this->getOption() ?>
<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->escapeHtml($_option->getTitle()) ?></label></dt>
<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>
1

Visit given URL to watch working video of the module and get the download link. Download this free module from the same page to solve your problem. Module URL: http://hkpatel201.blogspot.in/2015/01/product-custom-option-pro-with-optionswatch.html

OR without any module

https://www.templatemonster.com/help/magento-how-to-add-and-manage-configurable-swatches.html#gref

http://www.venustheme.com/configurable-swatches-guide-for-magento-1-9-1/

http://mage4u.com/tutorial-make-configurable-swatches-magento/

https://www.sherodesigns.com/tutorial-configurable-swatches-in-magento/

http://www.magetraining.com/uk/blog/how-to-set-up-configurable-swatches-in-magento-versions-1-9-x/

  • Thanks , is there any chance that we can make it work with help of css - hiding text with css lable icons as here or atleast with php if condition like if text = black than display image..... – Baby in Magento Jan 19 '17 at 9:52
  • one more thing is we are using simple product with custom options, we are not using configurable product..... – Baby in Magento Jan 19 '17 at 10:05
1

Please Refer Follow Links to Get Extension of Image Custom Option :

https://www.magentocommerce.com/magento-connect/custom-option-images.html

https://shop.emiprotechnologies.com/documentation/custom-option-manager-with-image

http://magento.ikantam.com/store/images-custom-options.html

  • Thanks for links, client dont want to use any extension, please check updated question, as we are using only 2 colors in entire site, black & green , i uploaded those images under media folder, instead of text, is there any way i can display that image ? – Baby in Magento Jan 18 '17 at 13:42
  • is there any chance that we can make it work with help of css - hiding text with css lable icons as here or atleast with php if condition like if text = black than display image..... – Baby in Magento Jan 19 '17 at 9:57
1
.product-options ul.options-list .label>label.Black
{ font-weight: normal;
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png") !important;
background-size: cover !important;
display: block;
color: transparent;
padding: 0 !important;
font-size: 0;
}

$(document).ready(function(){
var inner = Array();
inner = $(" .product-options ul.options-list .label>label");
for (i=0;i<inner.length;i++){
var classN = inner[i].innerText;
if (classN=="Black" || classN=="Green"){
inner.eq(i).addClass(classN);
}
}
});
1

Download free extesion from the below link :

http://hkpatel201.blogspot.in/2015/05/option-swatches-module-source.html

This extension is working fine on product listing & product detailed page for the custom option.

  • Thanks , is there any chance that we can make it work with help of css - hiding text with css lable icons as here or atleast with php if condition like if text = black than display image..... – Baby in Magento Jan 19 '17 at 9:52
0

You can use this module

https://github.com/gaurangpadhiyar007/edge-magento-module-customoptionimage

Available as Free and Open Source.

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.