Detail information can be found in this link
To achieve this (2nd position), we can do by Override swatch-renderer.js
in our theme
Till Magento v2.3.3 - vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js
Magento v2.3.4 onwords - vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js
Theme file location is - app/design/frontend/Vendor/Theme/Magento_Swatches/web/js/swatch-renderer.js
find _RenderControls()
function
update below code from // START - Custom code ... // End - Custom code at the end of this function : or follow below
_RenderControls: function () {
var $widget = this,
container = this.element,
classes = this.options.classes,
chooseText = this.options.jsonConfig.chooseText;
$widget.optionsMap = {};
// [... Existing code...]
// Rewind options
$widget._Rewind(container);
//Emulate click on all swatches from Request
$widget._EmulateSelected($.parseQuery());
$widget._EmulateSelected($widget._getSelectedAttributes());
// START - Custom code
if ($widget.inProductList) { // for product list page only
var defaultSelectCode = 'color',
defaultPosition = 2,
codeNotExistInFilter = true;
$.each($.parseQuery(), $.proxy(function (attributeCode) {
if(defaultSelectCode === attributeCode){
codeNotExistInFilter = false;
}
}, this));
if(codeNotExistInFilter) {
$widget.element.find('.' + this.options.classes.attributeClass +
'[attribute-code="' + defaultSelectCode + '"] [option-id]:nth-child('+defaultPosition+')').trigger('click');
}
}
// End - Custom code
}
Note: defaultPosition
= 1,2,3,... [any number position we can set]
above share detail done via overriding swatch-renderer.js
in our theme but we can override this file in better way and update/add above shared code via js mixin - devdocs js_mixins - extend-jquery-widget - 'mage.SwatchRenderer'
.
Please share any thought or input if need any further help/support on this.