Início / coding / Perguntas / 79554787
Accepted
HNNX
Asked: 2025-04-04 16:03:43 +0800 CST

O Woocomerce seleciona automaticamente as variações do produto se apenas uma estiver disponível APÓS interagir com o formulário/lista suspensa

  • 772

Estou tentando encontrar uma solução para meu produto WooCommerce com atributos DEPOIS que o usuário seleciona uma opção.

Todas as soluções sempre me levam a esse snippet que só é disparado no carregamento da página, não quando os usuários selecionam uma opção ou interagem com o formulário.

add_filter('woocommerce_dropdown_variation_attribute_options_args','fun_select_default_option',10,1);
function fun_select_default_option( $args)
{
    if(count($args['options']) > 1) 
        $args['selected'] = $args['options'][0];
    return $args;
}

No meu caso, tenho um produto com atributos: potência - 50W e 100W

dimensão se eu selecionar 50 W, apenas 100 mm permanecerão e deverão ser selecionados automaticamente se eu selecionar 100 W, apenas 200 mm permanecerão e deverão ser selecionados automaticamente

volume se eu selecionar 50 W, apenas 1 variante permanece e deve ser selecionada automaticamente se eu selecionar 100 W, apenas 1 variante permanece e deve ser selecionada automaticamente

Eu tentei brincar com javascript, mas ele bagunçou no carregamento inicial. Parece estranho que essa não seja uma opção que estaria disponível de fábrica para o woocommerce.

Alguém já passou por essa tarefa antes ou tem alguma ideia se preciso me aprofundar mais em JS personalizado em vez de hooks PHP?

wordpress

1 respostas

  1. Best Answer

    Seu código roda no lado do servidor quando a página é construída inicialmente. Ele não pode reagir a interações do usuário que acontecem no lado do cliente no navegador. Você precisa absolutamente de javascript.

    Você pode adicionar este código à pasta do seu tema:

    jQuery(function($) {
    // Function to check and auto-select single options
    function autoSelectSingleOption() {
        // Iterate through each variation form (usually only one per page)
        $('.variations_form').each(function() {
            const $form = $(this);
            // Iterate through each select dropdown within this form
            $form.find('.variations select').each(function() {
                const $select = $(this);
                let enabledOptions = [];

                // Find enabled options (ignoring the placeholder if it exists)
                $select.find('option').each(function() {
                    const $option = $(this);
                    // Check if it's a real value and not disabled (WC might add 'disabled' class or attribute)
                    if ($option.val() && !$option.is(':disabled') && !$option.prop('disabled')) {
                         enabledOptions.push($option);
                    }
                });

                // If exactly one enabled option is found
                if (enabledOptions.length === 1) {
                    const $singleEnabledOption = enabledOptions[0];
                    // Check if it's not already selected
                    if ($select.val() !== $singleEnabledOption.val()) {
                        console.log('Auto-selecting:', $select.attr('id'), $singleEnabledOption.val()); // Debugging log
                        // Set the value
                        $select.val($singleEnabledOption.val());
                        // Trigger the change event so WC updates price, potentially other attributes
                        $select.trigger('change');
                    }
                }
            });
        });
    }

    // --- Event Binding ---

    $('.variations_form').on('woocommerce_variation_select_change updated_wc_div', function() {
        // Use a slight delay to ensure the DOM updates (option enabling/disabling) are complete
        setTimeout(autoSelectSingleOption, 100);
    });
  

});

    Adicione o seguinte código ao functions.php do seu tema e defina o caminho correto do seu arquivo js:

    function my_theme_enqueue_variation_script() {
    // Only enqueue on single product pages
    if ( is_product() ) {
        wp_enqueue_script( 'custom-variations', get_stylesheet_directory_uri() . '/js/custom-variations.js', array('jquery'), wp_get_theme()->get('Version'), true );
        
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_variation_script' );
    • 0

relate perguntas