Sold Out image overlay for Simple theme?

[PaulNewton]

---

@JimWatts wrote:

I still have yet to find a solution that works Displaying sold out on the Collection page and Product page over the image for Simple Theme.

---

It is not likely you'll find an off the shelf solution that is not an app without investing your time in reading the resources provided as a starting point.

[JimWatts]

I will be working on this as it seems the community here isn't very helpful. I will develop a good work around for all users using the Simple Theme.
It will be a nice Sold Out button overlay on the Product Image that will be customizable with CSS. Thanks. 
There should be some easily plug and playable code that someone can provide...

[Fayzmo]

@PaulNewton @JimWatts 

We do not charge extra credit for removing the badge/label. One credit will be charged only for applying a new badge on to a product. We do also provide a subscription plan for unlimited usage.

@JimWatts we also provide customer-tailored help for applying sale/sold out stickers for the bulk of products. If you're interested to know more, then please DM me separately and I'll be happy to be of assistance. 

Sincerely,

[JimWatts]

This is what I am trying to achieve. Very simple. 
www.watsinternationalinc.com (Test website)
So I want to remove where it says sold out after the desc., and I want to add SOLD OUT (Button/Banner) over the Images on the Collection Pages. 

[PaulNewton]

---

@JimWatts wrote:

I will be working on this as it seems the community here isn't very helpful.

---

You have been supplied with several resources to get started on a custom solution by several people.

Goodluck with that attitude.

[JimWatts]

Click to expand...

Actually, quite the contrary. However, I have now made some progress. All of the solutions provided are not effective in what is trying to be accomplished. Changing images for 50,000 products would be impossible. Please see progress below.

Now the only thing is to get this styled like the button. That seems to be the hard part as I am not too familiar with this. Anything would help. Thanks. 

[JimWatts]

I have added this code now:
And we are good. There is only one issue. I would like to remove the A:Hover Opacity effect. How can I achieve this?

<p>
  {% if sold_out %} 
  <strong class="badge badge--sold-out-product"> <button id="AddToCart" class="btn product-single__cart-submit
 &lt;span id=" name="SoldOutText" type="text">{{ 'products.product.sold_out' | t }}</button> </strong> 
  {% endif %}
    </p>

[JimWatts]

So now all that needs to be done is removing just the A:hover effect over the Button that is now on the images. I do not want to remove it from the images, and I only want this to be done in that portion of the Shopify theme. See below:

[JimWatts]

<p>
  {% if sold_out %} 
  <strong class="badge badge--sold-out-product"><button id="AddToCart" class="btn product-single__cart-submit
 &lt;span id=" name="SoldOutText" type="text" style="opacity: 1">{{ 'products.product.sold_out' | t }}</button></strong> 
  {% endif %}
    </p>
         

This is what I have now. They only problem now is that OnClick turns it black. How to fix this? Thanks!

[JimWatts]

Final Solution:

---

@JimWatts wrote:

<p>
  {% if sold_out %} 
  <strong class="badge badge--sold-out-product"><button id="AddToCart" class="btn product-single__cart-submit
 &lt;span id=" name="SoldOutText" type="text" style="opacity: 1">{{ 'products.product.sold_out' | t }}</button></strong> 
  {% endif %}
    </p>
         

This is what I have now. They only problem now is that OnClick turns it black. How to fix this? Thanks!

---

Added  to my CSS:  pointer-events: none;

.badge--sold-out-product {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;

  span {
    background-color: $color-sold-out-badge;
  }
}