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