Change color of out of stock button

  • Resolved samovaari

    (@samovaari)


    1 year, 4 months ago

    Hi, we are using the following code to change the out of stock (Read more) button color:

    .woocommerce ul.products li.product.outofstock .button {

        background-color: #FF0000 !important;

    }

    For some reason this is only displayed correctly on our Shop page but not on any custom page with a product gallery (Woocommerce Blocks).

    Shop page displaying out of stock button in red: https://snipboard.io/29MtEF.jpg

    Custom page with the same product but not showing the red button as needed: https://snipboard.io/JEGOsy.jpg

    Could you please advise how to apply the css to the content inside the blocks? Thank you!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Shameem R. a11n

    (@shameemreza)

    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.

    Thread Starter samovaari

    (@samovaari)

    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?

    Plugin Support Thu P. a11n

    (@thup90)

    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.

    Thread Starter samovaari

    (@samovaari)

    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://www.ads-software.com/support/plugin/woocommerce/reviews.

    Cheers!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change color of out of stock button’ is closed to new replies.