Easily Change Default Option Text for Configurable Products in Magento

 

The default text for configurable product options in Magento is too verbose. This article covers how to change the default text without extending or modifying core code.

 

The default option text for a configurable product is a little too verbose for my liking. Choose an Option… comes in at a whopping 20 characters, which isn’t so nice for some layouts.

Furthermore, you might want to personalize the text more to the specific attribute. So instead of a generic message, a ‘Choose a Size..’ option would appear instead.

Update Product JSON

In the configurable.phtml template, an array of settings is being passed into a JavaScript class for rendering options. This is where a lot of solutions to this problem go wrong: we don’t want to edit the JavaScript or core settings file, and well, extending is messy and a hassle. Instead we can convert the JSON string to an array, update the chooseText setting, and convert it back to JSON for rendering.

/~theme/default/template/catalog/product/view/type/options/configurable.phtml

1
2
3
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>

So let’s add our changes:

1
2
3
4
5
6
7
8
<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = 'Select..';
?>
 
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>
<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = 'Select..';
?>

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>

There we go! Now reload and you’ll see the default text there without the bloat.

Show Option Name in Default Label

Putting the attribute name in is simple. Just get access to the label like so:

1
2
3
4
5
6
7
8
<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = 'Select ' . $_attribute->getLabel();
?>
 
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>
<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = 'Select ' . $_attribute->getLabel();
?>

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>

And there you go. No longer are you plagued by the behemoth of a default option.

 
 
 
 
Footnote

This website will always be ad-free. All I ask in return is that you please share this article if you found it helpful.

I also greatly enjoy comments, and will respond to every question in the comments section within a day or two. Don't hesitate to ask for help!

 
 
 
 
Comments
Albert says:
 

Great! Thanks for this tip. However, how do you set the default option in a dropdown menu?

 
 
Pete says:
 

Slight issue with this solution. Basically if you have more than one option, the first option will always say what the second option says.

For example:

First option is Width
Second option is Height

First option drop down will read: Select Height
Second option drop down will read: Select Height

Any solution for this?

Thanks, Pete

 
 
kevando says:
 

Can you explain exactly whats going on here?

PS — this worked great for me, thanks!!!!!!!!

 
 
Matt says:
 

Hi,

Thank you for this.

As Pete said, if you have more than one option, the first option will always say what the second says…

Any solution for this?

Thank you

 
 
Brajendra says:
 

How to Change Default dropdown option for differnt category of Configurable Products in Magento

 
 
nico says:
 

You can also use the locale/en_US/translate.csv
“Choose an Option…”,”Select”

 
 
Luke says:
 

nice tip , cheers, enjoying your magento and wordpress posts!

 
 

Leave a Reply