Zie de code onderstaand in verschillende stappen:
Stap 1: Voeg hieronder het codefragment toe
// New badge for recent products
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );
function new_badge() {
global $product;
$newness_days = 30; // Number of days the badge is shown
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '' . esc_html__( 'NEW', 'woocommerce' ) . '';
}
}
Stap 2: Pas uw badge aan
Let op, dacht dat de hieronder weergegeven CSS mogelijk moet worden aangepast en afhankelijk is van uw thema. Pas het dus dienovereenkomstig aan.
// “NEW” Badge for Woocommerce Recent Products that are less than 30 days old
.woocommerce ul.products li.product .new-badge.onsale {
background: #ffcc00;
top: 50px;
z-index: 10;
left: 0px;
color: #000;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9em;
border-radius: 0px;
min-width: 60px;
padding-left: 19px !important;
}
span.new-badge.onsale:after {
border: 5px solid #ffcc00;
border-color: transparent transparent #ffcc00 #ffcc00;
border-width: 9px 6px;
position: absolute;
right: -10px;
bottom: 0;
content: '';
}
span.new-badge.onsale:before {
border: 5px solid #ffcc00;
border-color: #ffcc00 transparent transparent #ffcc00;
border-width: 9px 6px;
position: absolute;
right: -10px;
top: 0;
content: '';
}
Als je het als een verticaal lint wilt laten zien, voeg dan dit stukje CSS toe.
span.new-badge.onsale {
min-width: 60px;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}