Hi @samovaari
The issue you’re experiencing is due to the CSS class differences between the Shop page and the custom page. WooCommerce Blocks use different CSS classes, so the same CSS code might not apply.
To resolve this, you need to identify the correct CSS class for the out of stock button within the WooCommerce Blocks, which are .wp-block-button__link and .wc-block-grid__product-add-to-cart.wp-block-button .
You can also find this by inspecting the element on your custom page (right-click on the button and select “Inspect” on most browsers). Once you’ve identified the correct class, you can apply the same background color change.
I hope this helps! Please let us know how it goes or if you need further assistance.
Hi @shameemreza, thank you for your reply. Applying the background color change to .wp-block-button__link and .wc-block-grid__product-add-to-cart.wp-block-button changes both in stock and out of stock buttons (Add to cart/Read more) the same color. We are using a custom color for the Add to cart button already (CSS class .wc-block-grid__product-add-to-cart.wp-block.button with background in green) but would like to display it in red if the product is out of stock. How would we do this?
Hi there,
I’ve tested on my site and it seems the block doesn’t have the out of stock class for out of stock products, so this is why you couldn’t target this button.
Instead of using the blocks on these custom pages, you could try the WooCommerce products shortcode instead: https://woo.com/document/woocommerce-shortcodes/#products
Let us know how it goes. We’re here to help further.
Great, thanks @thup90, that did the trick!
Hi @samovaari,
Great, thanks @thup90, that did the trick!
I’m thrilled to know that @thup90’s solution worked perfectly for you! It’s great that you’re now able to display the ‘out of stock’ button in red as you wanted.
I’ll go ahead and mark this thread as resolved. However, if you ever have more questions or issues in the future, don’t hesitate to kick off a new topic.
We’d be thrilled if you could spare a few minutes to leave us a review at 👉 https://wordpress.org/support/plugin/woocommerce/reviews.
Cheers!
