Magento – How to Auto Select The Color as Swatch Option for Products with Only One Color (on Magento 2.1 Product View)

color-swatchesmagento-2.1swatches

I'm trying to have swatch option value of color auto-selected for Products that only have one color.

If a user selects some product from the category page, the product page is displayed with attributes like Color, Shape, and Size. Some of the products only have one color though, but still require the user to click-select it. I want the color to be automatically selected for all single-colored products when the pages load.

Best Answer

This is an old question, but I ran into the same issue today. I solved it using jquery. I added this to the view.phtml template and it looks to work for me. Just posting it here in case someone else has a similar problem.

$j('.configurable-swatch-list').each(function() {
    if ($j(this).find('li').length == 1) {
        $j(this).find('li:first-child a span').trigger("click");
    }
});

This will target all configurable swatch lists, you can change the code to just look for the particular swatch list you care about.

Update

Some Case, we see that this setting does not show at store view label where this field is a Store view label field

So, You create custom extension enabled checkout Section at store view label by create system.xml:

<?xml version="1.0"?>
<config>
  <sections>
    <checkout  translate="label" module="checkout">
        <show_in_default>1</show_in_default>
        <show_in_website>1</show_in_website>
        <show_in_store>1</show_in_store>
    </checkout>
  </sections>
</config>

Configurable Dynamic Images – Using Multiple Attributes

I can recommend you and alternative for the default color swatches. This free extension.
it allows you to do what the color swatches do and more but without the headache of naming conventions.
You can change the dropdowns to labels, colors or even simple product images.
and the main image can be changed to the simple product image for all attributes not just colors.
Full description of the extension can be found here

Best Answer

Related Solutions

How to Display Correct Configured Product Image in Shopping Cart

Update

Configurable Dynamic Images – Using Multiple Attributes

Related Topic