Woocommerce - Display stock quantity per variation

Question

I have been googeling and trying different pieces of code to get the variation stock quantity to display on a product page.

So for example when I select XXL for a shirt it will display xx in stock.

I have been unable to find anything that works or has decent enough explanation for to recreate it.

I have tried: https://stackoverflow.com/questions/30514596/how-get-variations-stock-quantity-woocommerce and alot more.

Here is my current add to cart code:

<?php
/**
 * Single variation cart button
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

global $product;
?>
<div class="woocommerce-variation-add-to-cart variations_button">
    <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

    <?php
    do_action( 'woocommerce_before_add_to_cart_quantity' );

    woocommerce_quantity_input( array(
        'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
        'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
        'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
    ) );

    do_action( 'woocommerce_after_add_to_cart_quantity' );
    ?>

    <button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

    <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>

    <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
    <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
    <input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>

I have tried the below code but this only gives me 1 variable for XXXL and it shows the wrong stock amount.

<?php
        $product_variations = $product->get_available_variations();

        foreach ($product_variations as $variation)  {
            $var_data = $variation['attributes'];
            $var_data['in_stock'] = $variation['is_in_stock'];
        }

        //List all attributes with stock available or not array..
        echo '<pre>';
        print_r($var_data);
        echo '</pre>';
    ?>

I hope you guys can point me into the right direction!

Kind regards, Robbert

Answer 1

Displaying stock quantity per product variant is default WooCommerce behavior. For best results, when you develop own theme, use default storefront/woocommerce HTML structure and JS files then style it using CSS styles.

To test stock quantity per product variant is displaying correctly I installed clean WordPress 4.9.6 and WooCommerce 3.4.3 and followed Variable product page to add one.

Remember to set stock quantity per variant and add price to each variant to have a product in stock.

If you want to get stock quantity of each variant for some other reason you can use this code:

/**
 * Get all variations stock quantity
 * 
 * @param int $product_id Product ID which has variations
 */
function wpse_306996_get_variations_stock_quantity( $product_id ) {

    $product    = wc_get_product( $product_id );
    $variations = $product->get_available_variations();

    $variations_stock = array();

    foreach ( $variations as $variation ) {

        $variation_o = new WC_Product_Variation( $variation['variation_id'] );
        $variations_stock[] = $variation_o->get_stock_quantity();
    }

    return $variations_stock;
}

/**
 * USAGE
 */
$variations_stock = wpse_306996_get_variations_stock_quantity( $product_id );