Automatically select variation

I managed to solve the problem by customizing some things through scripts and functions, to make it easier for anyone who needs it, I created the following formula to add to functions.php.

Basically what I needed was:

1 – That my color variations did not have the red X even though I had a selected size that was not in stock in some color.

2 – Allows you to select an option even if it was out of stock, both color and size, so that the person can select a color and size and change color to see what sizes are available in other colors, without having to deselect the size, improving the customer experience.

3 – That the first color and first size were always selected, so that the customer, when changing the color, already changed the photo of the product, taking into account that the change in the photo happens because the thumbnail is linked to the total variation, which is color + size.

all this for the purpose of:

Improve the customer’s shopping experience, enabling them to change the color of the item even though the item has two attributes, color and size. It also causes the photo to change when changing the color and, when a size is selected, it does not block the option to change the color of the product and see the sizes available in other colors, which greatly hinders the journey, as many do not Deselect the size to see what is available in other colors.

Remembering that all this does not directly affect the functionality of the plugin and it displays colors, labels, images, blocks the sale of items that are not in stock and other options, they are just visual and usability changes for the end customer.

If anyone needs the solution, follow the code below, I made it so that they can add it directly to the theme’s functions.php, making it easier for the entire community that has lay knowledge on the subject of programming, just copying and pasting.

I hope I have added positively to the community and the evolution of the plugin.

I apologize for my English, I’m Brazilian and I’m not 100% fluent, I just know the basics for communication

//auto select variation

function adicionar_js_personalizado() {
    if (is_product() || is_product_category()) { // Verifica se a página atual é relacionada ao WooCommerce
        ?>
        <script type="text/javascript">
            (function($) {
                function selectFirstOptions() {
                    $('.cfvsw-swatches-container').each(function() {
                        $(this).find('.cfvsw-swatches-option:first').trigger('click');
                    });
                }

                $(document).ready(function() {
                    selectFirstOptions();
                });
            })(jQuery);
        </script>
        <?php
    }
}
add_action('wp_footer', 'adicionar_js_personalizado');

//variations select out of stock

function remove_disable_class_from_swatches() {
    if (is_product() || is_product_category()) {
        ?>
        <script type="text/javascript">
            (function ($) {
                $(document).on('change', '.cfvsw-hidden-select select', function () {
                    setTimeout(function () {
                        updateSwatchesAvailability();
                    }, 1);
                });

                function updateSwatchesAvailability() {
                    $('.cfvsw-hidden-select select').each(function () {
                        const availableOptions = [];
                        $(this).children('option').each(function () {
                            if ('' !== $(this).val()) {
                                availableOptions.push($(this).val());
                            }
                        });
                        $(this).parent().next().find('.cfvsw-swatches-option').each(function () {
                            if (-1 === $.inArray($(this).attr('data-slug'), availableOptions)) {
                                $(this).addClass('cfvsw-swatches-out-of-stock');
                            } else {
                                $(this).removeClass('cfvsw-swatches-out-of-stock');
                            }
                            // Adicione a linha abaixo para remover a classe que bloqueia a sele??o
                            $(this).removeClass('cfvsw-swatches-disabled');
                        });
                    });
                }
            })(jQuery);
        </script>
        <?php
    }
}

add_action('wp_footer', 'remove_disable_class_from_swatches');

//disable cross

function remove_disable_class_from_specific_swatches_container() {
    if (is_product() || is_product_category()) {
        ?>
        <script type="text/javascript">
            (function ($) {
                $(document).ready(function () {
                    var swatchesContainer = $('.cfvsw-swatches-container[swatches-attr="attribute_pa_cor"]');
                    swatchesContainer.find('.cfvsw-swatches-option').each(function () {
                        if ($(this).hasClass('cfvsw-swatches-blur-cross-disable')) {
                            $(this).removeClass('cfvsw-swatches-blur-cross-disable');
                        }
                    });
                });
            })(jQuery);
        </script>
        <?php
    }
}

add_action('wp_footer', 'remove_disable_class_from_specific_swatches_container');

https://drive.google.com/drive/folders/1xemL0Pdi1WoJ4Z_dLeNEouQkpLgVmeGP?usp=sharing

This is the google drive link where I left two videos showing the functionality on the product and product archive pages

Just going through the code again because I needed to make a modification, when clicking on a size that was not in stock in a certain color, the cross would appear again in that color, so I made the function execute when starting the page and whenever a click event happens in some attribute that has a disable class.

Remembering that this code must be added to the theme’s functions.php, it was done this way to facilitate use by the community that does not understand programming in depth.

//auto select variation

function adicionar_js_personalizado() {
    if (is_product() || is_product_category()) { // Verifica se a página atual é relacionada ao WooCommerce
        ?>
        <script type="text/javascript">
            (function($) {
                function selectFirstOptions() {
                    $('.cfvsw-swatches-container').each(function() {
                        $(this).find('.cfvsw-swatches-option:first').trigger('click');
                    });
                }

                $(document).ready(function() {
                    selectFirstOptions();
                });
            })(jQuery);
        </script>
        <?php
    }
}
add_action('wp_footer', 'adicionar_js_personalizado');

//variations select out of stock

function remove_disable_class_from_swatches() {
    if (is_product() || is_product_category()) {
        ?>
        <script type="text/javascript">
            (function ($) {
                $(document).on('change', '.cfvsw-hidden-select select', function () {
                    setTimeout(function () {
                        updateSwatchesAvailability();
                    }, 1);
                });

                function updateSwatchesAvailability() {
                    $('.cfvsw-hidden-select select').each(function () {
                        const availableOptions = [];
                        $(this).children('option').each(function () {
                            if ('' !== $(this).val()) {
                                availableOptions.push($(this).val());
                            }
                        });
                        $(this).parent().next().find('.cfvsw-swatches-option').each(function () {
                            if (-1 === $.inArray($(this).attr('data-slug'), availableOptions)) {
                                $(this).addClass('cfvsw-swatches-out-of-stock');
                            } else {
                                $(this).removeClass('cfvsw-swatches-out-of-stock');
                            }
                            // Adicione a linha abaixo para remover a classe que bloqueia a sele??o
                            $(this).removeClass('cfvsw-swatches-disabled');
                        });
                    });
                }
            })(jQuery);
        </script>
        <?php
    }
}

add_action('wp_footer', 'remove_disable_class_from_swatches');

//disable cross

function remove_disable_class_from_specific_swatches_container() {
    if (is_product() || is_product_category()) {
        ?>
        <script type="text/javascript">
            (function ($) {
                function removeBlurCross() {
                    var swatchesContainer = $('.cfvsw-swatches-container[swatches-attr="attribute_pa_cor"]');
                    swatchesContainer.find('.cfvsw-swatches-option.cfvsw-swatches-blur-cross-disable').removeClass('cfvsw-swatches-blur-cross-disable');
                }

                $(document).ready(function () {
                    removeBlurCross();

                    $(document).on('click', '.cfvsw-swatches-blur-cross-disable', function () {
                        removeBlurCross();
                    });
                });
            })(jQuery);
        </script>
        <?php
    }
}

add_action('wp_footer', 'remove_disable_class_from_specific_swatches_container');

Hello @wellingtonkri,

Thank you for providing the code. Your contribution is greatly appreciated, and it will undoubtedly be valuable for others who require it in the future.