Return to previous page

How to edit the styling of the Backorder label

This topic has 4 replies, 3 voices, and was last updated 4 years, 6 months ago ago by Olga Barlow

  • Avatar: teolivier
    teolivier
    Participant
    November 26, 2020 at 10:42

    Hi there,

    How can I edit the colors of the Backorder (you call it “Out of Stock”) label? Transparent background with red text should be ok.
    Is it possible to edit the position and size of the label? For example, smaller and in the bottom right corner.
    Thanks

    Please, contact administrator
    for this information.
    #261334 Copied Theme version: 7.1.2 WooCommerce version: 5.5.3
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 26, 2020 at 11:36

    Hi,

    Have you sorted out? https://prnt.sc/vqg1yr

    Regards

    #261350 Copied
    Avatar: teolivier
    teolivier
    Participant
    November 26, 2020 at 11:41

    Hi there,

    I just recently got that styling done (by experimenting) however I am not too sure if the code is efficient as I am not that good at CSS yet:

    .content-product .stock, .content-product .available-on-backorder {
    position: absolute;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.0);
    z-index: 4;
    margin-bottom: 0;
    font-size: .85rem;
    text-transform: uppercase;
    color: red;
    left: 80%;
    top: 90%;
    transform: translate(-50%, -50%);
    padding: 7px 22px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }

    Is there a better code?

    Thanks

    #261354 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    November 26, 2020 at 13:19

    Hello,

    Replace the previous code by this one

    .content-product .stock, .content-product .available-on-backorder {
    background-color: transparent;
    color: red;
    bottom: 10px;
    top: unset;
}

    Regards

    #261376 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘How to edit the styling of the Backorder label’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme
lazy-placeholder
Organic Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme
lazy-placeholder
Classic Fashion Store (Dark) – WordPress WooCommerce Theme
lazy-placeholder
Sushi Store – WordPress WooCommerce Theme
lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
Flowers Store – WordPress WooCommerce Theme
lazy-placeholder
Sidebar Boxed Store – WooCommerce Theme
lazy-placeholder
Games Dark – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.