How to assign a CSS class to the Stock Quantity in WooCommerce?

Question

I'm trying to display Stock Quantity text in the following format.

"How Many In Stock?" "20"

You can check it live on the following link:

https://spendr.dk/shop/

I'm using the following code.

add_action('woocommerce_after_shop_loop_item','bbloomer_show_stock_shop', 10);

function bbloomer_show_stock_shop() {
global $product;
if ( $product->stock ) { // if manage stock is enabled 
if ( number_format( $product->stock,0,'','' ) < 3 ) { // if stock is low
echo '<div class="remaining">Only ' . number_format($product->stock,0,'','') . ' left in stock!</div>';
} 

else {
echo '<div class="remaining">' . 'How many in stock?</div>' . 
number_format($product->stock,0,'','');
}
}
}

Now I want to adjust the "Stock Quantity" (Example: 20). I'm trying to add a CSS Class to the stock quantity. I want to show it, right next to the "How Many In Stock?" text.

How can I add a CSS class to the Stock Quantity? in PHP.

Thank You.

Answer 1

First, modify your style for remaining class

ie .remaining { display: inline-block; } .remaining { display: inline-block; }

Second, replace div with span

<div class="uniqstock"> 20</div> to <span class="uniqstock"> 20</span>