Access the product attribute selected value in WooCommerce product page

I am building a store which has some product with variations. I want that based on the selection of the user on a select element (It’s an attribute of the product) to hide other elements.

I wrote some JavaScript code which is added in the functions.php file to access the value of the select element whenever the user changes the value of the element. The event triggers correctly, but I always get the index or the value of the first element when I access to it, even if other option is selected.

This is the code in functions.php:

    function set_select_event()
    {
        global $post;
        $product = wc_get_product($post->ID);
        if ($product->get_id() == "1365") {
        ?>
        <script>
        jQuery(document).ready(function($) {
            $('input.variation_id').change( function(){
                if( '' != $('input.variation_id').val() ) {
                    var var_id = $('input.variation_id').val();
                    var sel = document.getElementById("numerado");
                    var opcion = sel.value;
                    alert('You just selected variation #' + opcion);

                }
             });
        });
        </script>
        <?php
        }
    }

And I hook this function to the ‘woocommerce_single_product_summary’ event with this:

add_action('woocommerce_single_product_summary', 'set_select_event');

I also tried with this:

    function set_select_event()
    {
        global $post;
        $product = wc_get_product($post->ID);
        if ($product->get_id() == "1365") {
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Get the live selected value
            $('select#numerado').blur( function(){
                selectedValue = $('select#numerado option:checked').val();

                // Display on browser console (for test)
                console.log(selectedValue);
            });
        });
        </script>
        <?php
        }
    }

The select element I’m trying to access looks like this:

<select id="numerado" class="" name="attribute_numerado" data-attribute_name="attribute_numerado" data-show_option_none="yes">
    <option value="">Elige una opción</option>
    <option value="Sin numerar">Sin numerar</option>
    <option value="Numerado">Numerado</option>
</select>

Here is a picture of what the debugger says:

As I said, it got the value “”, which is the first element.

Answer

You are very near… To get the selected value of your “numerado” attribute dropdown try:

add_action('woocommerce_single_product_summary', 'get_selected_product_attr_value');
function get_selected_product_attr_value()
{
    if ( get_the_id() == 1365 ) :
    ?>
    <script>
    jQuery(function($) {
        var a = 'select#numerado', 
            b = $(a).val(); // Get default selected value

        // Display the default selected value if not empty
        if( b != '' )
            console.log(b);

        // Get the live selected value
        $(a).blur( function(){
            b = $(this).val(); // Update default selected value

            // Display selected value on browser console (for test) if not empty
            if( b != '' )
                console.log(b);
        });
    });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

I have added some code to get the default selected value, when it’s not empty… If you don’t need it you can remove it easily.

Advertisement

Answer