How can I show individual stock quantities for variable products on the product page in WooCommerce

I am trying to show each variable products stock quantity on the single product page in WooCommerce.

I have managed to show all the stock quantities for all the variations using the below code from Rodolfo Melogli of Business Bloomer but I would ideally like to only show a single stock quantity when each size option is selected.

Attached is a screenshot to explain it better.

---

The html output of the buttons:

• <span class="ivpa_term ivpa_active ivpa_instock" data-term="l">L</span>

or when clicked

• <span class="ivpa_term ivpa_active ivpa_clicked ivpa_instock" data-term="xl">XL</span>

As you can see it shows all the variations but I would just like to show the selected variations (S, M, L, XL etc.) quantities as highlighted in red.

---

Here is the PHP code:

add_action( 'woocommerce_after_add_to_cart_form', 'ocapparel_echo_stock_variations_loop' );
function ocapparel_echo_stock_variations_loop(){
    global $product;
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $attr_string = array();
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            if ( $key['max_qty'] > 0 ) { 
              echo '<br/>' . implode( ', ', $attr_string ) . ': ' . $key['max_qty'] . ' in stock'; 
            } else { 
              echo '<br/>' . implode(', ', $attr_string ) . ': out of stock'; 
            }
        }
    }
}

Answer

• The first part of the code is for testing purposes only, specific to your theme where I’m going to mimic the buttons
• At the output of the variations, some extra classes are provided, to determine the difference in code between each variation
• With the jQuery piece all variations are hidden, then on the basis of the class + data term (L, XL, etc…) the selected variation is displayed after clicking on a certain button

---

This part is only for debugging purposes, to imitate the buttons that are present in your theme, this code may be removed (after testing)

function output() {
    echo '<span class="ivpa_term ivpa_active ivpa_instock" data-term="l" style="display:block;border:1px solid #f0f;">L</span>';
    echo '<span class="ivpa_term ivpa_active ivpa_clicked ivpa_instock" data-term="xl" style="display:block;border:1px solid #f0f;">XL</span>';
}
add_action( 'woocommerce_before_add_to_cart_form', 'output' );

---

Shows all the variations

function ocapparel_echo_stock_variations_loop() {
    global $product;
    
    // Is variable product
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $attr_string = array();
            
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            
            $implode = implode( ', ', $attr_string );
            
            if ( $key['max_qty'] > 0 ) { 
              echo '<p class="size size-' . $implode . ' in-stock">' . $implode . ': ' . $key['max_qty'] . ' in stock</p>'; 
            } else { 
              echo '<p class="size size-' . $implode . ' out-of-stock">' . $implode . ': out of stock</p>'; 
            }
        }
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Hide all
            $( 'p.size' ).css( 'display', 'none' );

            // Click
            $( 'span.ivpa_term' ).click(function() {
                // Hide all
                $( 'p.size' ).css( 'display', 'none' );
                
                // Get data term (L, XL, etc...)
                var term = $( this ).attr( 'data-term' );
                
                // Display
                $( '.size-' + term ).css( 'display', 'block' );
            });    
        });
        </script>
        <?php
    }
}
add_action( 'woocommerce_after_add_to_cart_form', 'ocapparel_echo_stock_variations_loop' );