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

Question

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:

L

or when clicked

XL

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

This can be done with jQuery, you put all elements on display none and when one of the buttons is clicked you then show the corresponding element. To give a correct answer to your question, however, the ID or the class of the buttons (L, XL,...) is required, and this generally differs per theme — 7uc1f3r
OK, I'm all ears. Would you mind showing me how to do that please. Just a snippet of jQuery to get me started. The classes seem to be all the same unless clicked. They are... L or when clicked... XL Is this the ID or Class you are talking about? — Artmart

7uc1f3r 7uc1f3r · Accepted Answer · 2020-09-17T07:20:56

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

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

1 Answers