Er zijn genoeg scenario’s te bedenken waarbij je in WooCommerce bepaalde producten net even extra op zou willen laten vallen. Bijvoorbeeld nieuwe producten, uitgelichte producten, of producten met een speciale aanbieding. In dit artikel laat ik je zien hoe je de bestaande ‘Sale’ badge aanpast, en hoe je producten op kan laten vallen met behulp van eigen product badges.
Zoals je misschien al weet heeft WooCommerce standaard al een product badge, de ‘Sale’ badge, welke automatisch getoond wordt bij producten die zijn afgeprijsd. Het kan zijn dat het thema welke je gebruikt deze badge heeft aangepast, of dat er de mogelijkheid is om eigen badges toe te voegen of aan te passen.
De standaard ‘Sale’ badge aanpassen
Wil je enkel de tekst van de ‘Sale’ badge aanpassen, dan hoef je daarvoor geen hele nieuwe badge aan te maken. Met onderstaande functie, die je toevoegt aan je functions.php bestand of een site-specifieke plugin vervang je de standaard tekst met je eigen tekst. De functionaliteit van de badge verandert verder niet.
Lees hier hoe je code snippets op de juiste manier toevoegt aan je website.
Lees hier hoe je een site specifieke plugin maakt.
add_filter( 'woocommerce_sale_flash', 'replace_wc_sale_badge_text' );
function replace_wc_sale_badge_text( $html ) {
return str_replace(
__( 'Sale!', 'woocommerce' ), // Get the original text
__( 'My sale text!', 'woocommerce' ), // Replace original text with this text
$html );
}
De vormgeving aanpassen
Misschien wil je naast de tekst ook nog aanpassingen doen aan de vormgeving van de badge, bijvoorbeeld de achtergrondkleur. Dit kan eenvoudig met het onderstaande CSS-voorbeeld. Natuurlijk kan je aan het blok naar wens nog meer eigenschappen toevoegen.
span.onsale {
background-color: #00FF00;
}Een eigen badge maken
add_action( 'woocommerce_before_shop_loop_item_title', 'my_custom_badge', 5 );
function my_custom_badge() {
echo '<span class="product-badge custom-badge">' . esc_html__( 'My badge text', 'my-text-domain' ) . '</span>';
}, 5 );Badge voor nieuwe producten
In het volgende voorbeeld maak ik een nieuwe badge aan voor nieuw binnengekomen producten.
Deze badge wordt voor 30 dagen getoond bij nieuw toegevoegde producten. Het staat je natuurlijk vrij om deze periode naar eigen wens aan te passen.
add_action( 'woocommerce_before_shop_loop_item_title', 'my_new_arrivals_badge', 5 );
function my_new_arrivals_badge() {
$postdate = get_the_time( 'Y-m-d' ); // Post date
$postdatestamp = strtotime( $postdate ); // Timestamped post date
$newness = 30; // Newness in days
// If product is not older than 30 days show the badge
if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $postdatestamp ) :
echo '<span class="product-badge new-arrival-badge">' . esc_html__( 'New arrival', 'my-text-domain' ) . '</span>'; // The badge with custom text
endif;
}Het resultaat:
Voor dit voorbeeld heb ik gebruik gemaakt van het standaard WooCommerce thema Storefront. Deze kan je gratis downloaden van de WooCommerce website.
Ik heb de badge rechtsboven gepositioneerd en er wat styling aan toegevoegd. Zie onderstaande CSS.
span.new-arrival-badge {
position: absolute;
top: 0;
right: 0;
background-color: #00a0d2;
color: #fff;
padding: 5px 10px;
}
