How to use custom wc badge

[dilipsuthar]

i wanted to use custom badge like ‘New’ and ‘Out of stock’ badges for a few of my products, can you tell me the css and badge image specifications

please do tell me also where to implement the css.

Thankyou.

[Melanie – SUPPORT]

The css is

.woocommerce .out-of-stock-badge {
background: #666;
font-size: 10px;
}

.woocommerce span.onsale, .woocommerce .wc-new-badge, .woocommerce .out-of-stock-badge, .woocommerce .free-badge {
background: #ef3f32;
color: #fff;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
white-space: nowrap;
overflow: hidden;
position: absolute;
text-align: center;
padding: 4px;
width: 120px;
min-width: auto!important;
height: 26px!important;
min-height: 26px!important;
max-height: 26px!important;
margin: 0!important;
border-radius: 0;
right: -31px!important;
top: 16px!important;
left: auto;
z-index: 1;
text-transform: uppercase;
font-size: 11px;
line-height: 28px;
font-weight: bold;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}


but I’m not sure what exactly you want to do with it. Only css won’t suffice if you want to add the badges anywhere you like. I’m afraid I cannot follow your explanation.

Cheers

[dilipsuthar]

Sorry for a late reply,
Acctually I wanted to make badge with ‘Pre-oroder!’ This text ,for my pre-order products

[Melanie – SUPPORT]

I’m afraid it takes more than just css to achieve that.
I recommend hiring a developer of your trust in order to help you with that.

Cheers