Out of stock / Sold out overlay badge

Hi,

Is it possible to have the “Sold Out” label in the product gallery displayed as the attached image?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the page URL with the label and specify where do you want to have such a label: on the product grid or on the main product page?

Best Regards

Hi,

I am referring to the product grid:
https://woodmart.xtemos.com/shop/

Thanks,
Marco

Hello,

Please provide your page URL or screen. There are two types of labels: rounded and rectangular. I need to see that to provide you with custom CSS.

Best Regards

Hi,

please see the attached file, I have the SOLD label on the upper left and I would like to have it as described.

Another topic, you see that the label doesn’t have the background color; Not sure if it is as default or it is a configuration error, but I would like the system background color for the “SOLD” label on the product page. For your information, I changed the term from Sold Out to Sold with “Loco Translate”

Attachments:

You must be logged in to view attached files.

Hello,

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

.product-grid-item.outofstock .product-labels {
  left: 0;
  right: 0;
  top: 50%;
  transform:translateY(-50%);
  max-width: 100%;
}
.product-grid-item.outofstock .out-of-stock {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
}
.product-grid-item.outofstock .product-label:not(.out-of-stock) {
  display: none;
}

Best Regards

Hi,

Perfect it solved my rquest, I am loving your theme.
One last point, in the product page I have the cicular label “SOLD” without the system (green) background color. Please see the link copy in the private content.
Could you please tell me how to set the background color for the “Sold” label?

Many thanks,
Marco

Hello,

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

body.single .labels-rounded .out-of-stock {
    background-color: red;
}

Replase “red” with your color.

Best Regards

Perfect, thank you very much again for the help.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts