Home › Forums › WoodMart support forum › Button Customization for Out-of-Stock Products

Button Customization for Out-of-Stock Products

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 11, 2024 at 7:49 pm #611412

    barisayarr
    Participant

    Hello there

    I am trying to customize the look of my website. On the product archive page, I changed the “Add to Cart” button color to orange.

    My question is this:

    For out of stock products; I want it to say “Out of Stock” instead of “Read More” and I want the button color to be gray. Is this possible?

    Thank you.

    • This topic was modified 3 days ago by barisayarr.
    November 13, 2024 at 8:04 am #611759

    Hung Pham
    Keymaster

    Hi barisayarr,

    Thanks for reaching to us and appreciate your patience.

    1. Out of stock translation

    In order to change / translate words. Please make sure you synced the strings first before changing / translating WooCommerce, WoodMart Core plugins and WoodMart theme. You can refer to article

    https://xtemos.com/docs-topic/theme-translation/

    2. Background color

    Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

    div.wd-product.wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) div.wd-add-btn>a:not(.ajax_add_to_cart,.add_to_cart_button){
    background-color: #000;
}

    Regards,

    November 14, 2024 at 2:07 pm #612137

    vannquish
    Participant

    I’ve added that CSS to change the background colour but it doesn’t make any difference.

    November 14, 2024 at 7:20 pm #612235

    Hung Pham
    Keymaster

    Hi vannquish,

    Please provide URL of the mentioned page to the Private Content, so I can take a closer look.

    Regards,

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)