Skip to content
TheCoachSMB
  • Follow Us:
Email: info@gmail.com
Call: +123-456-7890
TheCoachSMB

We Make It Happen

  • Blog
    • Magento2
    • HTML5
    • PHP Tutorial
  • Our Courses
  • Services
    • Magento 2 Installation Service
    • Magento Development Services
    • Support & Maintenance Services
    • Migration Services
    • Magento 2 Upgrade Service
    • Magento Security Patches
    • Magento Site Audit
    • Magento Speed & Performance
    • Magento Extension Development
    • Magento Consulting Services
    • SEO Services
    • Designing Services
  • Book A Call
  • Profile
  • About Us

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Contact Us
    Contact Info

    684 West College St. Sun City, United States America, 064781.

    (+55) 654 - 545 - 1235

    info@gmail.com

  • Get In Touch
  • Follow Us:
Email: info@gmail.com
Call: +123-456-7890
TheCoachSMB

We Make It Happen

  • Get In Touch
  • Blog
    • Magento2
    • HTML5
    • PHP Tutorial
  • Our Courses
  • Services
    • Magento 2 Installation Service
    • Magento Development Services
    • Support & Maintenance Services
    • Migration Services
    • Magento 2 Upgrade Service
    • Magento Security Patches
    • Magento Site Audit
    • Magento Speed & Performance
    • Magento Extension Development
    • Magento Consulting Services
    • SEO Services
    • Designing Services
  • Book A Call
  • Profile

Show First Option Selected of Configurable Products

  • Home
  • Show First Option Selected of Configurable Products
  • Sonal Motghare-Balpande Sonal Motghare-Balpande
  • Aug, Thu, 2022
  • Magento 2
Show First Option Selected of Configurable Products

Do you want to display first options of configurable product to be selected?

Step 1: Create the module

Create the registration.php  file in app/code/Thecoachsmb/Productmodule/ for the module

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Thecoachsmb_Productmodule',
__DIR__
);

Create directory app/code/Thecoachsmb/Productmodule/etc

Put this file in it : module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Thecoachsmb_Productmodule" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ConfigurableProduct"/>
            <module name="Magento_Swatches"/>
        </sequence>
    </module>
</config>

Step 2: Show First Option Selected of configurable product

To implement this, we will need to modify swatch-renderer.js file located in Magento_Swatches/view/base/web/js/swatch-renderer.js
But in the core file we can not add the code. So To modify the js file, we need to override js file in our module

Let’s override the js file now,

Create requirejs-config.js file in app/code/Thecoachsmb/Productmodule/view/frontend/

with the content as below:

var config = {
   map: {
      '*': {
         'Magento_Swatches/js/swatch-renderer':'Thecoachsmb_Productmodule/js/swatch-renderer'
      }
   }
};

Create swatch-renderer.js file in directory : app/code/Thecoachsmb/Productmodule/view/frontend/web/js/

Copy the code from vendor/magento/module_swatches/view/base/web/js/swatch-renderer.js to our module  swatch-renderer.js.

In the function _RenderControls: function () {

add below lines at the last of this function:-

 var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1){
if($('.swatch-attribute').hasClass("size")){
$('.swatch-option').first().trigger('click');
}
}
$('.swatch-option.color').first().click();

as shown below:

Then, remove folder present inside pub/static/frontend/ and var/view_preprocessed

Then Run below commads:

php bin/magento se:s:d -f && php bin/magento c:f

That’s it.

Related Posts:

  • Events and Observers in Magento2
  • How to create Admin Module in Magento2
  • HTML5
  • Show Login and Create an Account Form in Popup in Magento2
  • How To Create A New Admin Menu and Sub-Menu In Magento 2
  • How to change product description dynamically in…
Comments (0)
Sonal Motghare-Balpande

Hello Readers, My passion is to guide people by sharing the knowledge I have. If I can contribute even little to the people life, its very big achievement for me. Thank You, Sonal

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search
Recent Posts

  • Install/debug Magento2 delivery date extensionNovember 18, 2024
  • Install Magento 2.4.6 on Ubuntu 22.04 [Complete Guide]October 16, 2024
  • Install Magento 2.4.7 on Ubuntu 22.04 [Complete Guide]October 16, 2024
Categories

  • Accounting
  • Agency
  • Business
  • Consultant
  • Finance
  • Investment
  • Magento 2
  • Masonry
Calendar
May 2025
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Nov    
Tags

6 Steps to Install Magento 2 on XAMPP Windows Using Composer Agency Business composer install magento 2 download xampp for windows Graphics how to install magento how to install magento2 in localhost how to install magento2 in localhost ubuntu how to install magento2 in localhost wamp how to install magento 2 in windows 10 How To Install Magento2 in Windows on localhost using Xampp how to install magento 2 on xampp How to install Magento 2 using Composer in windows How to install Magento 2.4 in localhost XAMPP how to install magento 2.4 on xampp install magento 2 in windows10 install magento 2 using composer install magento 2 using composer windows install magento 2 windows xampp install Magento 2 with Sample Data install magento2.4 Install Magento 2.4 xampp windows 10 install magento 2.4.3 install magento2.4.3 install xampp on windows 10 Latest magento2 magento 2 composer install magento 2 install magento2 install magento 2 installation magento 2 installation steps magento 2 installation using composer magento 2 system requirement magento2.4 magento2.4.3 magento download magento for windows magento installation on xampp Magento with windows magneto2 Multisite thecoachsmb xampp download

LATEST BUSINESS IDEAS

Subscribe to Our Newsletter
& Stay Update

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Thank you to visit our site and doing business with us.

We give our 100% to help you and to grow together.

About Us

Ready To Start Work With Us?

Felis consequat magnis est fames sagittis ultrices placerat sodales porttitor quisque.

Get a Quote
Contact Us
  • Courses
  • Blog
  • Magento2 Tutorial
  • Shop
Quick Links
  • Appointment
  • Price Plans
  • Investment Strategy
  • Financial Advices
  • Strategy Growth
  • Services
  • Business Planning
Links
  • Privacy Policy
  • Terms and Conditions
  • My Account
  • Contact Us
  • About Us
Latest Posts
  • Install/debug Magento2 delivery date extensionNovember 18, 2024
  • Install Magento 2.4.6 on Ubuntu 22.04 [Complete Guide]October 16, 2024
  • Install Magento 2.4.7 on Ubuntu 22.04 [Complete Guide]October 16, 2024
Open Hours

Our support available to help you.

  • Monday-Friday: 10am to 10pm
  • Email: support@thecoachsmb.com
  • Call: +91 7020500374
Opening Hours
Week Days 10:00 - 17:00
Saturday 10:00 - 15:00
Sunday Day Off
Contact us
Copyright © 2025 TheCoachSMB
🚀 Let’s Connect on LinkedIn! 🚀

Want to level up your skills and knowledge? 🚀
Follow us on LinkedIn to get:
✅ Expert insights on business growth
✅ Daily tips to sharpen your skills
✅ Exclusive updates from The Coach SMB

Let's grow together!

Follow me on LinkedIn

No thanks, I’m not interested!

WhatsApp

WhatsApp

Skype

Skype

Hide