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 standaard WooCommerce 'Sale' badge aangepast

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;
}

Beoordeel deze post:

Gemiddeld: 5 / 5. Aantal beoordelingen: 1

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?

Reacties

14 reacties op "Een eigen WooCommerce product badge maken"

    1. Hey Jochem,

      Bedankt voor je compliment!

      Een badge aan een featured product toevoegen kan bijvoorbeeld op de volgende manier:

      function wpsimpel_add_featured_product_badge() {
      global $product;

      if ( $product->is_featured() ) {
      echo '' . esc_html_e( 'Featured product', 'your-text-domain' ) . '';
      }
      }
      add_action( 'woocommerce_before_shop_loop_item_title', 'wpsimpel_add_featured_product_badge' );
      add_action( 'woocommerce_before_single_product_summary', 'wpsimpel_add_featured_product_badge' );

      Hier vind je de code nogmaals, maar dan beter leesbaar: https://pastebin.com/wbPckcvx

      Ik weet niet zeker of ik “een product op basis van ‘menu volgorde’ een custom badge zou meegeven?” goed begrijp… Hoe zie je dit voor je?

  1. Justin,

    Bedankt voor de duidelijke site en uitleg hier.

    Ik probeer je code te gebruiken maar ik slaag er niet in om een specifiek product een badge te geven. Wat ik wil bereiken is vergelijkbaar met de “new” badge, maar dan zonder dat de tijdfactor een rol speelt. Ik wil eigenlijk een specifieke categorie van producten een badge toekennen. Ik wil dit doen zonder de sale badge te moeten wijzigen aangezien die ook actief is op andere producten.

    Heb jij tips hoe ik dit kan doen? Een specifieke category van een badge voorzien?

    1. Hoi Alec,

      Checken of producten in een specifieke categorie horen doe je door de conditional tag if( has_term( 'je-product-categorie-slug', 'product_cat' ) ) te gebruiken in je functie.

      Bijvoorbeeld: wil je een badge toevoegen met de tekst “New arrival” aan producten in de productcategorie posters, dan ziet je code er als volgt uit: https://pastebin.com/WgEYaGsa

      Je kan in plaats van de product categorie slug ook de product categorie ID gebruiken.

      Disclaimer: deze code heb ik niet persoonlijk getest, maar zou in theorie moeten werken.

        1. De strings uit mijn pastebin voorbeeld zijn al vertaalbaar middels esc_html_e( 'New arrival', 'your-text-domain' ). Het verschil met __() en _e() is dat esc_html_e() een ‘escaped’ string (esc_html) is die wordt geëchoed (_e). Escapen is veiliger.

          Voor meer uitleg, zie bijvoorbeeld dit draadje op Stackoverflow.

          Vergeet niet 'your-text-domain' te vervangen door je eigen textdomain, anders gebeurt er nog niet veel 😉.

    1. Beste JV,

      Volgens de standaard ‘hook’ structuur waar de elementen van een shop item precies moeten komen (woocommerce_before_shop_loop_item_title) zou de badge uit mijn voorbeeld in de code boven de productafbeelding geplaatst moeten zijn. Het kan echter zo zijn dat jouw thema hierin verschilt omdat de ontwikkelaar de hooks mogelijk heeft aangepast. Ik kan dit echter uit je bericht en zonder de code en website te hebben gezien niet direct opmaken, dus het blijft gissen.

      Zie hier een overzicht van de WooCommerce hooks: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

      Mocht je willen dat ik je hierbij verder help, dan kan je me natuurlijk altijd even mailen op hallo@wpsimpel.nl.

        1. Top, fijn dat het gelukt is. Maar wat bedoel je precies met “dan blijf je de tekst zien“? Je kan als je de badge niet op mobiele apparaten wil tonen, de badge het beste met CSS en een media querie verbergen.

  2. Ik wil het juist wel laten zien op mobiele weergave. Echter blijf ik het zien als tekst links van de afbeelding. Niet zoals de “sale” badge mooi rechts in de hoek

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.