Woocommerce ‘only 4 left in stock’

Hi

I need to be able to display on the product shop pages “only 4 left in stock” under each “Add to Cart” button preferably.

I have gone to WOocommerce/Settings/Products/Inventory / and set LOW STOCK THRESHOLD to 4.

Then after googling for days I have found this code and added to my functions.php code which seems to work and displays the “only 4 left in stock” underneath every product on the very last line which is what I wanted to achieve but need to move it up higher in the block closer to the “Add to Cart” button. It has placed itself on the very last line underneath the “Add to Wishlist” which is underneath the “Add to Cart” button.

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,”,” ) < 4 ) { // if stock is low
echo ‘<div class=”remaining”>Only ‘ . number_format($product->stock,0,”,”) . ‘ left in stock!</div>’;
}
}

I really don’t know HOW to move it up underneath the “Add to Cart” button or higher as I cannot seem to find the correct coding as I added the code into the functions.php file.

I am familiar with CSS but still can’t find the coding looking in the CSS Inspector on the site. Site is not yet live so I need to finalise and fix this little issue.

I will have to create some code to move it but don’t know the correct one to add. Anyone have any ideas on how I can achieve this ?

As currently it is only viewing as plain old text, and I would prefer to have it with some background and different colour text, but as I don’t know where to link the css code for that particular div element I’m a bit stuck.

Thanks
Kristin