Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Sold out or Out of Stock Badge/Sign for catalogue?

  • Hi,
    is there a way to show a “Sold Out”, “Out of Stock” (or in german “Ausverkauft”) sign or badge in my shop? (through Function or CSS)

    Not sure if this is a Woocommerce issue or if this a Theme issue.

    Thanks

  • Hi there,

    Try this CSS:

    .post-type-archive-product .outofstock .wc-product-image:before {
        content: "sold";
        background: grey;
        color: white;
        border-radius: 100%;
        z-index: 100;
        position: absolute;
        height: 44px;
        width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  • Hi Ying,
    Thanks for the CSS-
    I tested a little bit and changed the CSS with the help of ChatGPT:

    .post-type-archive-product .outofstock .wc-product-image:before {
    content: “Ausverkauft”;
    background: grey;
    color: white;
    z-index: 100;
    position: absolute;
    width: 100%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 35%;
    }

    On my website it looks like this:
    https://imgur.com/a/v16Celu

    I have 1 more question:

    Is this part of the CSS correct?

    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 35%;

    I feel like this CSS is not correct, because this CSS uses the complete box and the position changes, depending on the size of device.
    For example, if I use bottom: 0%
    See this image: https://imgur.com/dmPt37F
    This means the position of the “Ausverkauft” can overlap with the product title on certain devices, even if it looks good with bottom: 35%; on my devices.
    For example like this: https://imgur.com/eg6wmdw
    Which is obviously not good.

    Basically, I want the “Ausverkauft” to appear at the bottom of the product image, meaning only the product image as reference, not the whole box including the title.

    I hope I could explain this correctly.

  • Hi there,

    ChatGPTs CSS is laughable lol – i think it gets paid by the word 🙂

    try this CSS:

    
    li.outofstock .wc-product-image {
        position: relative;
    }
    
    li.outofstock .wc-product-image:before {
        content: 'Ausverkauft';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding: 5px;
        background-color: #000;
        color: #fff;
    }

    The main difference is setting the parent elemnets position to relative.
    So its pseudo child element is absolutely positioned to the parent.
    So now bottom: 0 is always bottom of the image

  • Perfect!

    Thank You. (as always)

    I’m aware of Chat GPT’s flaws, but it still helped me to play with Yings CSS around.

  • You’re welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.