wellingtonkri

The problem was resolved here on our side, discovering that it was just a block in the wordfence firewall, it blocked access to a specific AJAX, for anyone experiencing the same problem, just add the following permission to the firewall.

https://prnt.sc/wXoA_nMrsxRk

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

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

Excellent! I’m waiting

I apologize, I already discovered the error, I wasn’t sending the attribute ID in the API, putting the ID already resolved it.

Product JSON:

{
"name": "TOP LLICCE",
"sku": "518276",
"type": "variable",
"regular_price": "55.80",
"description": "Top super funcional e perfeito para montar muitos looks de arrasar! Top de al?a com elástico em tons flúor nas laterais e detalhe para a etiqueta centralizada. Pe?a em tecido com bastante elastano e viscose, tecido possui gramatura alta evitando marcar o peito.\r\n\r\nComposi??o: 91,50% Viscose \/ 8,50% Elastano\r\nModelo está vestindo tamanho 16\r\n\r\n\r\nTabela de Medidas\r\nDescri??o da Parte X Tamanhos<\/td>10<\/td>12<\/td>14<\/td>16<\/td>18<\/td>20<\/td><\/tr>BUSTO<\/td>50<\/td>58<\/td>62<\/td>66<\/td>68<\/td>72<\/td><\/tr>COMPRIMENTO<\/td>10<\/td>20<\/td>22<\/td>24<\/td>25<\/td>27<\/td><\/tr><\/tbody><\/table>",
"short_description": "Top de al?a com elástico em tons flúor nas laterais e detalhe para a etiqueta centralizada.",
"weight": "0.09",
"categories": [
{
"id": "294"
}
],
"attributes": [
{
"name": "Cor",
"position": 0,
"visible": true,
"variation": true,
"options": [
"PRETO"
]
},
{
"name": "Tamanho",
"position": 0,
"visible": true,
"variation": true,
"options": [
"10",
"12",
"14",
"16",
"18",
"20"
]
}
],
"tags": [],
"dimensions": {
"length": "0.00",
"width": "0.00",
"height": "0.00"
}
}

Variation JSON:

{
"manage_stock": true,
"stock_quantity": 5,
"attributes": [
{
"name": "Cor",
"option": "PRETO"
},
{
"name": "Tamanho",
"option": "10"
}
],
"regular_price": "55.80",
"weight": "0.09",
"dimensions": {
"length": "0.00",
"width": "0.00",
"height": "0.00"
}
}

Image of swatches on the product:
https://prnt.sc/mU6a_-0Yd1EF

example of globally registered attribute:
https://prnt.sc/UTuIaJZjU8AT

image of how the product appears:
https://prnt.sc/CQ8lKubQAZgt

whenever I register the product via API it does not pull the colors from the attribute, even though it is globally configured as COLOR and has the HEX code, if I register the product manually directly on the WOO platform it works fine.

we are giving a post on the /wp-json/wpdm/v1/packages endpoint and sending the following json but the author always returns to id 1

{
        "title": "11585-15",
        "description": "05-06-2023",
        "excerpt": "2023-06-05",
        "author": 7,
        "status": "publish",
        "version": "2392,90",
         "categories": [
            16
        ],
        "user_access": [
            "TESTE",
            "TESTE123"
        ],
        "template": "lista",
        "page_template": "boletopage",
        "files": {
            "MXfSFqdUud157cqpWhxu": "https://--------------.com.br/boletos/MXfSFqdUud157-------.pdf"
        }
    }