-
Dominic
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; }
-
Dominic
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/v16CeluI 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 nowbottom: 0
is always bottom of the image -
Dominic
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 🙂
- You must be logged in to reply to this topic.