Recently in one of our magento project i faced an issue where my aim was to remove price from configurable product dropdown options. Coming up with an easy solutions was in my mind and i took resort to jQuery to sort it out.
The following steps will guide you to remove price from configurable product dropdown options.
1. Add jquery library in your theme & must use jquery noconflict like: “jQuery.noConflict()”
2. Open up “configurable.phtml” file from your theme like following path if it already exists. If do not create/copy “configurable.phtml” file from “base” theme with all folders in the following path.
app/design/frontend/your_package/your_theme/template/catalog/product/view/type/options/
Note: “app/design/frontend” path already exist in magento just using for follow correct rest folders.
3. Add the following jQuery code on top of the “configurable.phtml” file.
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(e) {
checkoptions();
jQuery("select.super-attribute-select").change(function(){
checkoptions();
});
});
function checkoptions(){
jQuery("select.super-attribute-select option").each(function(){
var optiontext = jQuery(this).text();
var addsignpos = optiontext.indexOf('+');
var subtractsignpos = optiontext.indexOf('-');
if(addsignpos>0){
var result = optiontext.substring(0,addsignpos-1);
jQuery(this).html(result);
}
if(subtractsignpos>0){
var result = optiontext.substring(0,subtractsignpos-1);
jQuery(this).html(result);
}
});
}
// ]]>
</script>
Folks who are using magento 1.4 or previous versions please use the following javascript code instead as those versions don’t support jQuery.
<script type="text/javascript">
// <![CDATA[
checkbundeloptions();
document.getElementById('select_1').onchange=function(){ // i.e "select_1" is select box id you need to replace it with your select box id
checkbundeloptions();
}
function checkbundeloptions(){
var sel = document.getElementById('select_1'); // i.e "select_1" is select box id you need to replace it with your select box id
for (var i=0;i<sel.options.length;i++){
if (sel.options[i].value != '') {
var optiontext = sel.options[i].text;
var addsignpos = optiontext.indexOf('+');
var subtractsignpos = optiontext.indexOf('-');
if(addsignpos>0){
var result = optiontext.substring(0,addsignpos-1);
sel.options[i].innerHTML=result;
}
if(subtractsignpos>0){
var result = optiontext.substring(0,subtractsignpos-1);
sel.options[i].innerHTML=result;
}
}
}
}
// ]]>
</script>
you may have different ways to get it resolved i really would like to hear that, if you have any question please forward us as well, thank you !
Step into the future with CyberNetikz, where we craft tomorrow’s tech innovations with today’s coding artistry.
7 replies on “How To Remove Configurable Product Price From Dropdown In Magento”
I was trying to remove the £xx price from the drop menu of a configurable product on version 1.7. Tried several suggested fixes, your’s was the only one that worked – THANK YOU
Thank you very much. That’s work on 1.7.0.2. Cool.
hello, how can i do the same on a simple product instead of a configurable product?
Thank you!
Thanks for the comment Rodrigo. Yes you can do it by adding the code below in
the app/design/frontend/your_package/your_theme/template/catalog/product/view/options/wrapper.phtml
file.
<script type=”text/javascript”>
//<![CDATA[
jQuery(document).ready(function(e) {
checksimpleoptions();
jQuery(“select.product-custom-option”).change(function(){
checksimpleoptions();
});
});
function checksimpleoptions(){
jQuery(“select.product-custom-option option”).each(function(){
var optiontext = jQuery(this).text();
var addsignpos = optiontext.indexOf(‘+’);
var subtractsignpos = optiontext.indexOf(‘-‘);
if(addsignpos>0){
var result = optiontext.substring(0,addsignpos-1);
jQuery(this).html(result);
}
if(subtractsignpos>0){
var result = optiontext.substring(0,subtractsignpos-1);
jQuery(this).html(result);
}
});
}
//]]>
</script>
Nice solution though how would one apply this to a bundled catalog product? I’m using Magento CE 1.7.0.0
Thanks George. For bundle product you can easily do it by adding the code below in
the app/design/frontend/your_package/your_theme/template/catalog/product/view/options/wrapper.phtml
file.
<script type=”text/javascript”>
//<![CDATA[
jQuery(document).ready(function(e) {
checkbundeloptions();
jQuery(“select.bundle-option-select”).change(function(){
checkbundeloptions();
});
});
function checkbundeloptions(){
jQuery(“select.bundle-option-select option”).each(function(){
var optiontext = jQuery(this).text();
var addsignpos = optiontext.indexOf(‘+’);
var subtractsignpos = optiontext.indexOf(‘-‘);
if(addsignpos>0){
var result = optiontext.substring(0,addsignpos-1);
jQuery(this).html(result);
}
if(subtractsignpos>0){
var result = optiontext.substring(0,subtractsignpos-1);
jQuery(this).html(result);
}
});
}
//]]>
</script>
HI !
Thanks for the solution. It worked for me.
Regards
Onkar Kubal