You can try below custom module and modify according to your requirement.

1. app/code/Magemonkey/Simpleconfigure/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magemonkey_Simpleconfigure',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Magemonkey_Simpleconfigure',

__DIR__

);

2. app/code/Magemonkey/Simpleconfigure/composer.json

{
    "name": "magemonkey/simpleconfigure",
    "description": "Magemonkey Simpleconfigure",
    "require": {
      "php": "~5.6.0|7.0.2|~7.0.6",
      "magento/module-store": "0.74.0-beta4",
      "magento/module-theme": "0.74.0-beta4",
      "magento/module-widget": "0.74.0-beta4",
      "magento/module-backend": "0.74.0-beta4",
      "magento/module-catalog": "0.74.0-beta4",
      "magento/module-email": "0.74.0-beta4",
      "magento/module-ui": "0.74.0-beta4",
      "magento/module-variable": "0.74.0-beta4",
      "magento/module-media-storage": "0.74.0-beta4",
      "magento/framework": "0.74.0-beta4",
      "magento/magento-composer-installer": "*"
    },
    "type": "magento2-module",
    "version": "0.74.0-beta4",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "extra": {
        "map": [
            [
                "*",
                "Magemonkey/Simpleconfigure"
            ]
        ]
    }
}

{

"name": "magemonkey/simpleconfigure",

"description": "Magemonkey Simpleconfigure",

"require": {

"php": "~5.6.0|7.0.2|~7.0.6",

"magento/module-store": "0.74.0-beta4",

"magento/module-theme": "0.74.0-beta4",

"magento/module-widget": "0.74.0-beta4",

"magento/module-backend": "0.74.0-beta4",

"magento/module-catalog": "0.74.0-beta4",

"magento/module-email": "0.74.0-beta4",

"magento/module-ui": "0.74.0-beta4",

"magento/module-variable": "0.74.0-beta4",

"magento/module-media-storage": "0.74.0-beta4",

"magento/framework": "0.74.0-beta4",

"magento/magento-composer-installer": "*"

"type": "magento2-module",

"version": "0.74.0-beta4",

"license": [

"OSL-3.0",

"AFL-3.0"

"extra": {

"map": [

[

"*",

"Magemonkey/Simpleconfigure"

]

}

3. app/code/Magemonkey/Simpleconfigure/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Magemonkey_Simpleconfigure" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Backend"/>
             <module name="Magento_Sales"/>
            <module name="Magento_Quote"/>
            <module name="Magento_Checkout"/>
            <module name="Magento_Cms"/>
        </sequence>
	</module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

4. app/code/Magemonkey/Simpleconfigure/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<type name="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable">
        <plugin disabled="false" name="Magemonkey_Simpleconfigure_Plugin_ConfigurableProduct_Block_Product_View_Type_Configurable" sortOrder="10" type="Magemonkey\Simpleconfigure\Plugin\ConfigurableProduct\Block\Product\View\Type\Configurable"/>
    </type>
 
    <type name="Magento\Swatches\Block\Product\Renderer\Configurable">
        <plugin disabled="false" name="Magemonkey_Simpleconfigure_ConfigurableSkuSwitch_Plugin_Magento_Swatches_Block_Product_Renderer_Configurable" sortOrder="10" type="Magemonkey\Simpleconfigure\Plugin\Swatches\Block\Product\Renderer\Configurable"/>
    </type>
</config>

<?xml version="1.0"?>

</type>

</type>

</config>

5. app/code/Magemonkey/Simpleconfigure/Plugin/Swatches/Block/Product/Renderer/Configurable.php

<?php
namespace Magemonkey\Simpleconfigure\Plugin\Swatches\Block\Product\Renderer;
 
class Configurable
{
    public function afterGetJsonConfig(\Magento\Swatches\Block\Product\Renderer\Configurable $subject, $result) {
 
        $jsonResult = json_decode($result, true);
        $jsonResult['skus'] = [];
        $jsonResult['names'] = [];
 
        foreach ($subject->getAllowProducts() as $simpleProduct) {
           $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
           $jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();
        }
        $result = json_encode($jsonResult);
        return $result;
	}
}

<?php

namespace Magemonkey\Simpleconfigure\Plugin\Swatches\Block\Product\Renderer;

class Configurable

{

public function afterGetJsonConfig(\Magento\Swatches\Block\Product\Renderer\Configurable $subject, $result) {

$jsonResult = json_decode($result, true);

$jsonResult['skus'] = [];

$jsonResult['names'] = [];

foreach ($subject->getAllowProducts() as $simpleProduct) {

$jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();

$jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();

}

$result = json_encode($jsonResult);

return $result;

}

6. app/code/Magemonkey/Simpleconfigure/Plugin/ConfigurableProduct/Block/Product/View/Type/Configurable.php

<?php
namespace Magemonkey\Simpleconfigure\Plugin\ConfigurableProduct\Block\Product\View\Type;
 
class Configurable
{
 
    public function afterGetJsonConfig(
        \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
        $result
	) {
 
    $jsonResult = json_decode($result, true);
    $jsonResult['skus'] = [];
    $jsonResult['names'] = [];
        foreach ($subject->getAllowProducts() as $simpleProduct) {
            $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
            $jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();
	}
    $result = json_encode($jsonResult);
        return $result;
	}
}

<?php

namespace Magemonkey\Simpleconfigure\Plugin\ConfigurableProduct\Block\Product\View\Type;

class Configurable

{

public function afterGetJsonConfig(

\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,

$result

) {

$jsonResult = json_decode($result, true);

$jsonResult['skus'] = [];

$jsonResult['names'] = [];

foreach ($subject->getAllowProducts() as $simpleProduct) {

$jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();

$jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();

}

$result = json_encode($jsonResult);

return $result;

}

7. app/code/Magemonkey/Simpleconfigure/Plugin/ConfigurableProduct/Block/Product/Renderer/Configurable.php

<?php
namespace Magemonkey\Simpleconfigure\Plugin\Swatches\Block\Product\Renderer;
 
class Configurable
{
    public function afterGetJsonConfig(\Magento\Swatches\Block\Product\Renderer\Configurable $subject, $result) {
 
        $jsonResult = json_decode($result, true);
        $jsonResult['skus'] = [];
        $jsonResult['names'] = [];
 
        foreach ($subject->getAllowProducts() as $simpleProduct) {
           $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
           $jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();
        }
        $result = json_encode($jsonResult);
        return $result;
	}
}

<?php

namespace Magemonkey\Simpleconfigure\Plugin\Swatches\Block\Product\Renderer;

class Configurable

{

public function afterGetJsonConfig(\Magento\Swatches\Block\Product\Renderer\Configurable $subject, $result) {

$jsonResult = json_decode($result, true);

$jsonResult['skus'] = [];

$jsonResult['names'] = [];

foreach ($subject->getAllowProducts() as $simpleProduct) {

$jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();

$jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();

}

$result = json_encode($jsonResult);

return $result;

}

8. app/code/Magemonkey/Simpleconfigure/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'Magemonkey_Simpleconfigure/js/model/skuswitch': true
            },
            'Magento_Swatches/js/swatch-renderer': {
                'Magemonkey_Simpleconfigure/js/model/swatch-skuswitch': true
            }
        }
	}
};

var config = {

config: {

mixins: {

'Magento_ConfigurableProduct/js/configurable': {

'Magemonkey_Simpleconfigure/js/model/skuswitch': true

'Magento_Swatches/js/swatch-renderer': {

'Magemonkey_Simpleconfigure/js/model/swatch-skuswitch': true

}

};

9. app/code/Magemonkey/Simpleconfigure/view/frontend/web/js/model/swatch-skuswitch.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
	'use strict';
 
    return function(targetModule){
        var updatePrice = targetModule.prototype._UpdatePrice;
        targetModule.prototype.configurableSku = $('div.product-info-main .sku .value').html();
        targetModule.prototype.configurableName = $('div.product-info-main .page-title .base').html();
        var updatePriceWrapper = wrapper.wrap(updatePrice, function(original){
            var allSelected = true;
            for(var i = 0; i<this.options.jsonConfig.attributes.length;i++){
                if (!$('div.product-info-main .product-options-wrapper .swatch-attribute.' + this.options.jsonConfig.attributes[i].code).attr('option-selected')){
                	allSelected = false;
                }
            }
            var simpleSku = this.configurableSku;
            var simpleName = this.configurableName;
            if (allSelected){
                var products = this._CalcProducts();
                simpleSku = this.options.jsonConfig.skus[products.slice().shift()];
                simpleName = this.options.jsonConfig.names[products.slice().shift()];
            }
            $('div.product-info-main .sku .value').html(simpleSku);
            $('div.product-info-main .page-title .base').html(simpleName);
              return original();
        });
 
        targetModule.prototype._UpdatePrice = updatePriceWrapper;
        return targetModule;
	};
});

define([

'jquery',

'mage/utils/wrapper'

], function ($, wrapper) {

'use strict';

return function(targetModule){

var updatePrice = targetModule.prototype._UpdatePrice;

targetModule.prototype.configurableSku = $('div.product-info-main .sku .value').html();

targetModule.prototype.configurableName = $('div.product-info-main .page-title .base').html();

var updatePriceWrapper = wrapper.wrap(updatePrice, function(original){

var allSelected = true;

for(var i = 0; i<this.options.jsonConfig.attributes.length;i++){

if (!$('div.product-info-main .product-options-wrapper .swatch-attribute.' + this.options.jsonConfig.attributes[i].code).attr('option-selected')){

allSelected = false;

}

var simpleSku = this.configurableSku;

var simpleName = this.configurableName;

if (allSelected){

var products = this._CalcProducts();

simpleSku = this.options.jsonConfig.skus[products.slice().shift()];

simpleName = this.options.jsonConfig.names[products.slice().shift()];

}

$('div.product-info-main .sku .value').html(simpleSku);

$('div.product-info-main .page-title .base').html(simpleName);

return original();

});

targetModule.prototype._UpdatePrice = updatePriceWrapper;

return targetModule;

};

});

10. app/code/Magemonkey/Simpleconfigure/view/frontend/web/js/model/skuswitch.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
	'use strict';
 
    return function(targetModule){
 
        var reloadPrice = targetModule.prototype._reloadPrice;
        var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
        var result = original();
        var simpleSku = this.options.spConfig.skus[this.simpleProduct];
        var simpleName = this.options.spConfig.names[this.simpleProduct];
 
            if(simpleSku != '') {
                $('div.product-info-main .sku .value').html(simpleSku);
            }
            if(simpleName != '') {
                $('div.product-info-main .page-title .base').html(simpleName);
            }
            return result;
        });
        targetModule.prototype._reloadPrice = reloadPriceWrapper;
        return targetModule;
	};
});

define([

'jquery',

'mage/utils/wrapper'

], function ($, wrapper) {

'use strict';

return function(targetModule){

var reloadPrice = targetModule.prototype._reloadPrice;

var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){

var result = original();

var simpleSku = this.options.spConfig.skus[this.simpleProduct];

var simpleName = this.options.spConfig.names[this.simpleProduct];

if(simpleSku != '') {

$('div.product-info-main .sku .value').html(simpleSku);

}

if(simpleName != '') {

$('div.product-info-main .page-title .base').html(simpleName);

}

return result;

});

targetModule.prototype._reloadPrice = reloadPriceWrapper;

return targetModule;

};

});

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62846f9308749354890750/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Magento Developer

Hire G. Patel

Fill the form & Get Installation Support

Magento 2 – switch Product Name & SKU according to the selection of child products in the configurable product.

Recent Articles

Author Info

Get a Free Quote

Connect With Us