Custom Product Label - Wells Template - Specific Product

Site URL: https://www.whiteincolour.com.au/original-paintings/paper-pear-pine-50x60-cm/

Hello, I need to add a custom product label to a select few product items - in this case, I need the product to say 'Auction'. I created an 'auction' tag and used the below code that I found online, however it isn't working on the Wells Template. Can this code be adjusted for Wells? Or is a custom label not possible with this template? Thank you for any help! 

.ProductList-item.tag-auction::before {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'Auction';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}

5 hours ago, earthwindflowermoon said:

Site URL: https://www.whiteincolour.com.au/original-paintings/paper-pear-pine-50x60-cm/

Hello, I need to add a custom product label to a select few product items - in this case, I need the product to say 'Auction'. I created an 'auction' tag and used the below code that I found online, however it isn't working on the Wells Template. Can this code be adjusted for Wells? Or is a custom label not possible with this template? Thank you for any help! 

.ProductList-item.tag-auction::before {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'Auction';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}

Try adding to Home > Design > Custom Css

.tag-auction:after  {
  align-items: center;
  padding: 5px;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'Auction';
  display: flex;
  font-size: 1em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

Thank you for your help on this! The word auction did appear in the product listing however, can it be present on the main image? Similar to how the word 'sold' is for other items... please see attached. Thanks again!

Try adding to Design > Custom CSS (test code for first product)

a#thumb-paper-pear-pine-50x60cm .product-image:before {
    content: "Auction";
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 9999;
    background-color: black;
    color: white;
    padding: 5px;
}

It worked! Tuan ~ thank you again!!!!! Is there now a way to get the same label on the product image once you click on the product link? 

On 3/11/2022 at 3:29 PM, earthwindflowermoon said:

It worked! Tuan ~ thank you again!!!!! Is there now a way to get the same label on the product image once you click on the product link? 

Edit product > Additional Info > Paste this code

<style>
  #productGallery #productSlideshow .slide:after {
    content: "Auction";
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 9999;
    background-color: black;
    color: white;
    padding: 5px;
}
</style>

Perfect!! Thanks again!!!!!!