Out of Stock Color

Hi @pbadam,

There a way you can apply a CSS rule to a specific product as explained here: https://www.businessbloomer.com/woocommerce-apply-css-changes-one-pageproduct/

For instance, the following rule should only apply to this product: https://sustellar.com.sg/product/disinfectant-surface-cleaner/

.postid-2627 .single-product-top-1 .product_meta-area .product-meta-content {
    color: #00ff00;
}

Image for reference: https://snipboard.io/Had3kf.jpg

The code goes to Appearance → Customize → Additional CSS

I hope this helps.

That’s a great idea, thanks..
Basically, this code changes the color of the stock availibility status text
.single-product-top-1 .product_meta-area .product-meta-content {
color: red;
}
But using this, all availability text changes to red… If you use the postid code you shared above, you can change the color for individual products but you have to manually set the color for each product…

But the specific question is how to directly link the color to the stock availability.. when the stock drops to 0, the ‘out of stock’ text should automatically become red, when the stock is available the ‘in stock’ text should automatically be green.

Is there a code that can achieve the same?

Also, in functions.php there is this code.. which controls the text: can it be edited to change the color?

public static function get_stock_status() {
global $product;
return $product->is_in_stock() ? esc_html__( ‘In Stock’, ‘metro’ ) : esc_html__( ‘Out of Stock’, ‘metro’ );
}

• This reply was modified 3 years, 12 months ago by pbadam.

Thanks for getting back @pbadam.

The example was mainly to illustrate postid-x usage.

When varying the stock status colors, you’d normally target the in-stock and out-of-stock classes used when displaying the stock status. Something like:

.postid-2627 p.stock.in-stock {
    color: black;
}

.postid-2627 p.stock.out-of-stock {
    color: #0000ff;
}

However, as I see from the above code, the stock availability status in your case is custom coded and does not add these classes.

One way to proceed from here would be to modify that custom code to set a CSS class when returning the In Stock or Out of Stock text to also set an in-stock and out-of-stock status respectively.

To modify the custom code you have, you may consult with a developer or WooCommerce Customizations Experts as it falls beyond our support scope on the forum. You can also take some impulses on how to do this from the following Stack Overflow thread: https://wordpress.stackexchange.com/questions/311937/add-css-class-to-php-statement

I’ll however keep this thread open in case someone else would want to also assist.

Thanks.

Thanks for the tip!

I worked out on your reference link and the below code fixed it:

	public static function get_stock_status() {
		global $product;
		return $product->is_in_stock() ? printf( '<span class="green1">'. esc_html__( 'In Stock', 'metro' ).'</span>') : printf( '<span class="red1">'. esc_html__( 'Out of Stock', 'metro' ).'</span>');
	}

And of course, gave the respective color to the class in css.

• This reply was modified 3 years, 12 months ago by pbadam.

Glad to hear it – thanks for letting us know and for sharing the code!

I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.