×

 

Home Contact Us Payments SC Commerce SC Commerce Docs SC Commerce Snippets

Simply Computing

We make websites. Simple.

Add a watermark overlay to sold item images

On sites that sell unique, specialised products, it can be useful to leave an item on display for a while, even though it has been sold. It gives the impression that there is regular activity in sales and can encourage potential buyers. A good way to do this is to simply add a “sold” watermark over the image. This method will do this in the archive pages and on the single product page. It requires some customised templates that should be placed in an sc-commerce folder in your child theme. The overlay is triggered to appear when you set a product as “out of stock” in the inventory section.

The following styling for the new classes will need to be added to your css file (adjust as necessary).

		/**
 * Add a watermark overlay to sold item images to css. Adjust elements to suit your theme.
 */

.scc-sold-overlay-category,
.scc-sold-overlay-product {
  position: relative;
}

.outofstock .scc-sold-overlay-category:before,
.outofstock .scc-sold-overlay-product:before {
  content: "";
  background: rgba(255,255,255,0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; top: 0;
}

.outofstock .scc-sold-overlay-category:after {
  content: "SOLD";
  padding: 0 20px;
  color: #F80E16;
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  top: calc(50% - 94px);
  left: calc(50% - 68px);
  font-size: 2em;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.outofstock .scc-sold-overlay-product:after {
  content: "SOLD";
  padding: 0 20px;
  color: #F80E16;
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  top: calc(50% - 370px);
  left: calc(50% - 151px);
  font-size: 6em;
  font-weight: bold;
  display: flex;
  align-items: center;
}
	
   View Raw Code ID: 93492