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.
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.
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.
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.
Great! Thanks for this tip. However, how do you set the default option in a dropdown menu?
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
Can you explain exactly whats going on here?
PS — this worked great for me, thanks!!!!!!!!
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
How to Change Default dropdown option for differnt category of Configurable Products in Magento
You can also use the locale/en_US/translate.csv
“Choose an Option…”,”Select”
nice tip , cheers, enjoying your magento and wordpress posts!
Came here from stackoverflow. So far, this is the best solution without modifying any core js files. Thanks for sharing! 😀
For Pete & Matt:
The Product.Config class has a single chooseText variable rather than one for each attribute.
I found a solution by wrapping the fillSelect method before the spConfig creation. In the wrapped version I change chooseText to the attribute label.
No need to use PHP in the template to decode/encode JSON. But this was a great idea, and hats off to Zachary for getting me started on examining the JSON data and class methods.
You can find the JS code & instructions at:
https://gist.github.com/bizlift/15fce695d27ce9150f4705915522202a