I have a configurable product with one colour and different sizes, both these are set as required fields.

I've set the colour attribute as not required, but then it wont show up when I create a configurable product and wont show on the product page.

How do I get the colour swatch to be automatically selected when the product page loads?

  • What is your question? – Robbie Averill Jun 27 '16 at 12:05
  • How do I get the colour swatch to be automatically selected when the product page loads? – user2240778 Jun 27 '16 at 13:21

Open this file from app\design\frontend[your package][your theme]\template\catalog\product\view\type\options\configurable.phtml

Now add the below javascript code :-

 function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
Event.observe(window, 'load', function() {
spConfig.settings[0].selectedIndex = 1;
obj = spConfig.settings[0]; // this grabs the first select item
fireEvent(obj,'change'); // this simulates selecting the first option, which triggers
spConfig.settings[1].selectedIndex = 1; // this selects the first option of the second attribute drop menu

after this code :-

var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);

and flush magento cache and check.

|improve this answer|||||

If you want to go with jQuery in magento so you can trigger with click on color swatches on document ready

jQuery("document").ready(function() {
  setTimeout(function() {  
       jQuery("#configurable_swatch li:last-child a span").trigger('click');
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.