Round

Configurable Products Remove “$xx” Price From Drop Down Options – Magento

  By:   Date: October 11, 2012
Line


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>

You could download the file here if you would like.

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>

Comments are always very much appreciated, you may have different ways to get it resolved i really would like to hear that, thank you !

Most Related Posts

Tags: , , , , , , , , , , , , , , , , , , ,

7 Responses to Configurable Products Remove “$xx” Price From Drop Down Options – Magento

  1. onkar kubal | December 31, 2012

    HI !
    Thanks for the solution. It worked for me.
    Regards
    Onkar Kubal

  2. George Mouyios | December 18, 2012

    Nice solution though how would one apply this to a bundled catalog product? I’m using Magento CE 1.7.0.0

    • Md. Benzir Hasan | December 21, 2012

      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>

  3. Rodrigo | December 14, 2012

    hello, how can i do the same on a simple product instead of a configurable product?
    Thank you!

    • Md. Benzir Hasan | December 21, 2012

      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>

  4. LittleLukas | December 1, 2012

    Thank you very much. That’s work on 1.7.0.2. Cool.

  5. Rob Matthewman | November 14, 2012

    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

Round
Round
line

About CyberNetikz

  • Developing Web sites that engage people and turn them into loyal customers is how we’ve built CyberNetikz into a fast-growing Web development and marketing studio.

    We’ll help you build a top-of-mind brand that communicates your company’s unique identity and value proposition. We’ll develop a brand personality that stands.

PayPal Logo
line

Latest Blog Post

Hello guys, recently i have needed to add a custom page template for a WordPress site by using plugins. So, when you active this plugins, for a specific page your custom template w...
no_image
line
  • Contact Us

    CyberNetikz
    35-06 72nd Street, Suite # D5
    Jackson Heights, NY-11372
    Call: +1-347-261-2888