Circle Stamps CSS for featured products/stock

Add the style code below to your content.css stylesheet file. This code is provided as-is and may not work on all templates so if there are any issues remove the code to revert. This code can be tweaked to your template or applied on your behalf for a fee please contact support.

By putting the code in your content.css stylesheet the code will remain if you change themes. If you change to a theme that has existing stamps you may need to remove this custom code if there are issues. No free support is offered to resolve issues related to the code, or any modifications made.

To set the promotion tags (new/feat/sale/hot) choose a promotion status.
Out of stock will show if stock = 0. Back Order will show if stock = 0 and back orders are allowed.

STYLE CODE BELOW:


/*========================================
SHOPPING PRODUCTS STAMPS WITH FEATURED STATUS
========================================*/
#featuredcontent>* {
margin-top: 30px;
padding-top: 1px;
}

#featuredcontent ul.cmsList>li {
position: relative;
vertical-align: top;
}

.featuredProduct {
position: relative;
}

.featuredProductStamp_On_Sale, .featuredProductStamp_New_Item, .featuredProductStamp_Best_Seller,
.cmsFeaturedProduct .cmsImage:before,
.featuredProduct_Home_Page_-_On_Sale .cmsImage:before,
.cmsFeaturedProduct_OnSale .cmsImage:before,
.cmsFeaturedProduct_Featured .cmsImage:before,
.AvailabilityOutOfStock .cmsImage:before,
.AvailabilityBackOrder .cmsImage:before {
position: absolute;
right:0.5rem;
top:0.5rem;
z-index: 3;
height: 56px;
width: 56px;
text-transform: uppercase;
color: #fff;
background-color: [WSCOL_THEME_PRIMARY];
opacity: 1;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
display: FLEX;
align-items: center;
justify-content: center;
border-radius:50px;
}

.fptitle {
margin-top: 2rem;

}

.fpprice {
margin-bottom: 4rem;
}

.cmsFeaturedProduct_NewItem .cmsImage:before,
.cmsFeaturedProduct_HomePageNewProducts .cmsImage:before {
content: "NEW";
}

.cmsFeaturedProduct_BestSeller .cmsImage:before,
.cmsFeaturedProduct_HomePageBestSeller .cmsImage:before {
content: "HOT";
}

.featuredProduct_Home_Page_-_On_Sale .cmsImage:before,
.cmsFeaturedProduct_OnSale .cmsImage:before {
content: "SALE";
}

.cmsFeaturedProduct_Featured .cmsImage:before {
content: "FEAT";
}

.AvailabilityOutOfStock .cmsImage:before{
content: "SOLD OUT";
}

.AvailabilityBackOrder .cmsImage:before{
content: "BACK ORDER";
}

Index Previous