how to set default color configurable productSet default configurable selection in Magento 2.1Magento 2 can't get the selected color swatch value in options.phtml fileHow to Auto Select The Color as Swatch Option for Products with Only One Color (on Magento 2.1 Product View)?Default selected simple product in configurable productDisplay one color (of a configurable product) on its ownProduct image according to selected color option on cart page MagentoChange More product images on color swatch selectConfigurable product with color swatchesConfigurable Product Sizes with Image ColorMagento : Configurable product option selectedmagento 2 configurable product highest price product default selectedSet first configurable product as default imageHow to add default value for attribute of configurable product
What is a Samsaran Word™?
How to stretch the corners of this image so that it looks like a perfect rectangle?
How to remove border from elements in the last row?
What is an equivalently powerful replacement spell for the Yuan-Ti's Suggestion spell?
What exactly is ineptocracy?
Notepad++ delete until colon for every line with replace all
How does a dynamic QR code work?
Venezuelan girlfriend wants to travel the USA to be with me. What is the process?
meaning of 腰を落としている
ssTTsSTtRrriinInnnnNNNIiinngg
Why was the shrink from 8″ made only to 5.25″ and not smaller (4″ or less)
Description list Formatting using enumitem
How much mains leakage does an Ethernet connection to a PC induce, and what is the operating leakage path?
Unlock My Phone! February 2018
What's the meaning of "Sollensaussagen"?
Was the old ablative pronoun "med" or "mēd"?
How to travel to Japan while expressing milk?
How to Prove P(a) → ∀x(P(x) ∨ ¬(x = a)) using Natural Deduction
How to prevent "they're falling in love" trope
Does int main() need a declaration on C++?
GFCI outlets - can they be repaired? Are they really needed at the end of a circuit?
What is the most common color to indicate the input-field is disabled?
Car headlights in a world without electricity
Was the Stack Exchange "Happy April Fools" page fitting with the '90's code?
how to set default color configurable product
Set default configurable selection in Magento 2.1Magento 2 can't get the selected color swatch value in options.phtml fileHow to Auto Select The Color as Swatch Option for Products with Only One Color (on Magento 2.1 Product View)?Default selected simple product in configurable productDisplay one color (of a configurable product) on its ownProduct image according to selected color option on cart page MagentoChange More product images on color swatch selectConfigurable product with color swatchesConfigurable Product Sizes with Image ColorMagento : Configurable product option selectedmagento 2 configurable product highest price product default selectedSet first configurable product as default imageHow to add default value for attribute of configurable product
When I go to a product page, it does not have the default color - but I want to set the default color for a configurable product.
magento2 configurable-product magento-2.0.7
add a comment |
When I go to a product page, it does not have the default color - but I want to set the default color for a configurable product.
magento2 configurable-product magento-2.0.7
you want to select first swatch each time when page load?
– Rakesh Jesadiya
Aug 3 '16 at 8:42
Thank you for your comment. Yes, I want select product default when page load. Can you help me, please.
– Kudo Yukiko
Aug 4 '16 at 2:03
add a comment |
When I go to a product page, it does not have the default color - but I want to set the default color for a configurable product.
magento2 configurable-product magento-2.0.7
When I go to a product page, it does not have the default color - but I want to set the default color for a configurable product.
magento2 configurable-product magento-2.0.7
magento2 configurable-product magento-2.0.7
edited Aug 3 '16 at 20:49
Fabian Schmengler
55.1k21137353
55.1k21137353
asked Aug 3 '16 at 8:33
Kudo YukikoKudo Yukiko
2315
2315
you want to select first swatch each time when page load?
– Rakesh Jesadiya
Aug 3 '16 at 8:42
Thank you for your comment. Yes, I want select product default when page load. Can you help me, please.
– Kudo Yukiko
Aug 4 '16 at 2:03
add a comment |
you want to select first swatch each time when page load?
– Rakesh Jesadiya
Aug 3 '16 at 8:42
Thank you for your comment. Yes, I want select product default when page load. Can you help me, please.
– Kudo Yukiko
Aug 4 '16 at 2:03
you want to select first swatch each time when page load?
– Rakesh Jesadiya
Aug 3 '16 at 8:42
you want to select first swatch each time when page load?
– Rakesh Jesadiya
Aug 3 '16 at 8:42
Thank you for your comment. Yes, I want select product default when page load. Can you help me, please.
– Kudo Yukiko
Aug 4 '16 at 2:03
Thank you for your comment. Yes, I want select product default when page load. Can you help me, please.
– Kudo Yukiko
Aug 4 '16 at 2:03
add a comment |
4 Answers
4
active
oldest
votes
This code is working for color swatch attribute.
Using below code, first swatch are automatically selected after page load in details page,
you have to override file into your theme,
app/design/frontend/Packagename/themename/Magento_Swatches/templates/product/view/renderer.phtml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block MagentoSwatchesBlockProductRendererConfigurable */ ?>
<div class="swatch-opt"></div>
<script>
require(["jquery", "jquery/ui", "swatchRenderer"], function ($)
$('.swatch-opt').SwatchRenderer(
jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
);
//for selected option if only one value is exist....
jQuery(document).ready(function()
//for swatches1
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("color"))
$('.swatch-option').first().trigger('click');
);
);
</script>
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
add a comment |
A better answer is below. The other answer I couldn't get to work on 2.1.4, the JS was running but it didn't do anything, not sure why? The solution below works perfectly and runs right after the options are rendered which may have been the problem with the other solution for me? It was running too early? :
Just Override your swatch-renderer.js file into your themee and change _init()
function same as below: (approx. line 209)
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
_init: function ()
if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '')
this._sortAttributes();
this._RenderControls();
//this is additional code for select first attribute value
if(this.options.jsonConfig.attributes.length == 1)
$('.swatch-attribute .swatch-attribute-options div.swatch-option').first().click();
else
console.log('SwatchRenderer: No input data received');
,
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
add a comment |
Create in own theme file Magento_Swatches/templates/product/view/renderer.phtml
add the next code like
require([
'jquery'
], function ($)
$('[data-role="swatch-options"]').on('swatch.initialized', function ()
$(this).find('.swatch-attribute.color .swatch-option').first().click();
);
);
add a comment |
Override vendormagentomodule-swatchesviewfrontendwebjsswatch-renderer.js
to your theme
your theme file location will be:
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
change _RenderControls() function
just wrinte below code at the end of this function
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("size"))
$('.swatch-option').first().trigger('click');
http://prntscr.com/n6qo62
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f128710%2fhow-to-set-default-color-configurable-product%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
This code is working for color swatch attribute.
Using below code, first swatch are automatically selected after page load in details page,
you have to override file into your theme,
app/design/frontend/Packagename/themename/Magento_Swatches/templates/product/view/renderer.phtml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block MagentoSwatchesBlockProductRendererConfigurable */ ?>
<div class="swatch-opt"></div>
<script>
require(["jquery", "jquery/ui", "swatchRenderer"], function ($)
$('.swatch-opt').SwatchRenderer(
jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
);
//for selected option if only one value is exist....
jQuery(document).ready(function()
//for swatches1
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("color"))
$('.swatch-option').first().trigger('click');
);
);
</script>
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
add a comment |
This code is working for color swatch attribute.
Using below code, first swatch are automatically selected after page load in details page,
you have to override file into your theme,
app/design/frontend/Packagename/themename/Magento_Swatches/templates/product/view/renderer.phtml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block MagentoSwatchesBlockProductRendererConfigurable */ ?>
<div class="swatch-opt"></div>
<script>
require(["jquery", "jquery/ui", "swatchRenderer"], function ($)
$('.swatch-opt').SwatchRenderer(
jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
);
//for selected option if only one value is exist....
jQuery(document).ready(function()
//for swatches1
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("color"))
$('.swatch-option').first().trigger('click');
);
);
</script>
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
add a comment |
This code is working for color swatch attribute.
Using below code, first swatch are automatically selected after page load in details page,
you have to override file into your theme,
app/design/frontend/Packagename/themename/Magento_Swatches/templates/product/view/renderer.phtml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block MagentoSwatchesBlockProductRendererConfigurable */ ?>
<div class="swatch-opt"></div>
<script>
require(["jquery", "jquery/ui", "swatchRenderer"], function ($)
$('.swatch-opt').SwatchRenderer(
jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
);
//for selected option if only one value is exist....
jQuery(document).ready(function()
//for swatches1
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("color"))
$('.swatch-option').first().trigger('click');
);
);
</script>
This code is working for color swatch attribute.
Using below code, first swatch are automatically selected after page load in details page,
you have to override file into your theme,
app/design/frontend/Packagename/themename/Magento_Swatches/templates/product/view/renderer.phtml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block MagentoSwatchesBlockProductRendererConfigurable */ ?>
<div class="swatch-opt"></div>
<script>
require(["jquery", "jquery/ui", "swatchRenderer"], function ($)
$('.swatch-opt').SwatchRenderer(
jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
);
//for selected option if only one value is exist....
jQuery(document).ready(function()
//for swatches1
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("color"))
$('.swatch-option').first().trigger('click');
);
);
</script>
answered Aug 4 '16 at 6:38
![](https://i.stack.imgur.com/8RTfL.png?s=32&g=1)
![](https://i.stack.imgur.com/8RTfL.png?s=32&g=1)
Rakesh JesadiyaRakesh Jesadiya
30.1k1576124
30.1k1576124
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
add a comment |
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml
– Kudo Yukiko
Aug 5 '16 at 2:17
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
@Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered.
– Ramesh
Jun 29 '17 at 8:05
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
this is the issue magento.stackexchange.com/questions/181255/…
– Ramesh
Jun 29 '17 at 8:33
add a comment |
A better answer is below. The other answer I couldn't get to work on 2.1.4, the JS was running but it didn't do anything, not sure why? The solution below works perfectly and runs right after the options are rendered which may have been the problem with the other solution for me? It was running too early? :
Just Override your swatch-renderer.js file into your themee and change _init()
function same as below: (approx. line 209)
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
_init: function ()
if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '')
this._sortAttributes();
this._RenderControls();
//this is additional code for select first attribute value
if(this.options.jsonConfig.attributes.length == 1)
$('.swatch-attribute .swatch-attribute-options div.swatch-option').first().click();
else
console.log('SwatchRenderer: No input data received');
,
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
add a comment |
A better answer is below. The other answer I couldn't get to work on 2.1.4, the JS was running but it didn't do anything, not sure why? The solution below works perfectly and runs right after the options are rendered which may have been the problem with the other solution for me? It was running too early? :
Just Override your swatch-renderer.js file into your themee and change _init()
function same as below: (approx. line 209)
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
_init: function ()
if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '')
this._sortAttributes();
this._RenderControls();
//this is additional code for select first attribute value
if(this.options.jsonConfig.attributes.length == 1)
$('.swatch-attribute .swatch-attribute-options div.swatch-option').first().click();
else
console.log('SwatchRenderer: No input data received');
,
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
add a comment |
A better answer is below. The other answer I couldn't get to work on 2.1.4, the JS was running but it didn't do anything, not sure why? The solution below works perfectly and runs right after the options are rendered which may have been the problem with the other solution for me? It was running too early? :
Just Override your swatch-renderer.js file into your themee and change _init()
function same as below: (approx. line 209)
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
_init: function ()
if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '')
this._sortAttributes();
this._RenderControls();
//this is additional code for select first attribute value
if(this.options.jsonConfig.attributes.length == 1)
$('.swatch-attribute .swatch-attribute-options div.swatch-option').first().click();
else
console.log('SwatchRenderer: No input data received');
,
A better answer is below. The other answer I couldn't get to work on 2.1.4, the JS was running but it didn't do anything, not sure why? The solution below works perfectly and runs right after the options are rendered which may have been the problem with the other solution for me? It was running too early? :
Just Override your swatch-renderer.js file into your themee and change _init()
function same as below: (approx. line 209)
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
_init: function ()
if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '')
this._sortAttributes();
this._RenderControls();
//this is additional code for select first attribute value
if(this.options.jsonConfig.attributes.length == 1)
$('.swatch-attribute .swatch-attribute-options div.swatch-option').first().click();
else
console.log('SwatchRenderer: No input data received');
,
answered Mar 22 '17 at 19:54
![](https://lh3.googleusercontent.com/-7rbgdWY1uQ0/AAAAAAAAAAI/AAAAAAAAAA0/19Os-zVtJ4k/photo.jpg?sz=32)
![](https://lh3.googleusercontent.com/-7rbgdWY1uQ0/AAAAAAAAAAI/AAAAAAAAAA0/19Os-zVtJ4k/photo.jpg?sz=32)
Jason DiehlJason Diehl
340311
340311
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
add a comment |
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
But this apparently doesn't seem to work on 2.2.1 anymore. Ugh
– Jason Diehl
Feb 2 '18 at 21:33
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
Try this answer magento.stackexchange.com/a/215803/46716
– Gediminas
May 9 '18 at 9:41
add a comment |
Create in own theme file Magento_Swatches/templates/product/view/renderer.phtml
add the next code like
require([
'jquery'
], function ($)
$('[data-role="swatch-options"]').on('swatch.initialized', function ()
$(this).find('.swatch-attribute.color .swatch-option').first().click();
);
);
add a comment |
Create in own theme file Magento_Swatches/templates/product/view/renderer.phtml
add the next code like
require([
'jquery'
], function ($)
$('[data-role="swatch-options"]').on('swatch.initialized', function ()
$(this).find('.swatch-attribute.color .swatch-option').first().click();
);
);
add a comment |
Create in own theme file Magento_Swatches/templates/product/view/renderer.phtml
add the next code like
require([
'jquery'
], function ($)
$('[data-role="swatch-options"]').on('swatch.initialized', function ()
$(this).find('.swatch-attribute.color .swatch-option').first().click();
);
);
Create in own theme file Magento_Swatches/templates/product/view/renderer.phtml
add the next code like
require([
'jquery'
], function ($)
$('[data-role="swatch-options"]').on('swatch.initialized', function ()
$(this).find('.swatch-attribute.color .swatch-option').first().click();
);
);
answered Aug 26 '18 at 10:15
user2483213user2483213
1
1
add a comment |
add a comment |
Override vendormagentomodule-swatchesviewfrontendwebjsswatch-renderer.js
to your theme
your theme file location will be:
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
change _RenderControls() function
just wrinte below code at the end of this function
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("size"))
$('.swatch-option').first().trigger('click');
http://prntscr.com/n6qo62
add a comment |
Override vendormagentomodule-swatchesviewfrontendwebjsswatch-renderer.js
to your theme
your theme file location will be:
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
change _RenderControls() function
just wrinte below code at the end of this function
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("size"))
$('.swatch-option').first().trigger('click');
http://prntscr.com/n6qo62
add a comment |
Override vendormagentomodule-swatchesviewfrontendwebjsswatch-renderer.js
to your theme
your theme file location will be:
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
change _RenderControls() function
just wrinte below code at the end of this function
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("size"))
$('.swatch-option').first().trigger('click');
http://prntscr.com/n6qo62
Override vendormagentomodule-swatchesviewfrontendwebjsswatch-renderer.js
to your theme
your theme file location will be:
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
change _RenderControls() function
just wrinte below code at the end of this function
var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1)
if($('.swatch-attribute').hasClass("size"))
$('.swatch-option').first().trigger('click');
http://prntscr.com/n6qo62
answered 8 mins ago
![](https://i.stack.imgur.com/RmJyh.jpg?s=32&g=1)
![](https://i.stack.imgur.com/RmJyh.jpg?s=32&g=1)
Jigs ParmarJigs Parmar
1,132423
1,132423
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f128710%2fhow-to-set-default-color-configurable-product%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you want to select first swatch each time when page load?
– Rakesh Jesadiya
Aug 3 '16 at 8:42
Thank you for your comment. Yes, I want select product default when page load. Can you help me, please.
– Kudo Yukiko
Aug 4 '16 at 2:03