Kdjykuj

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.

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>

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');

        }

    },

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();

    });

});

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