Display images instead of Custom option values

Question

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

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

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

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>

Answer 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/

Answer 2

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

Answer 3

.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);
}
}
});

Answer 4

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.

Answer 5

You can use this module

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

Available as Free and Open Source.