WooCommerce - Product Badge Maken

“Sale Badge”

WooCommerce heeft standaard één “product badge”, de “Sale Badge”, welke automatisch wordt getoond bij producten die zijn afgeprijsd. Het is mogelijk dat het thema wat jouw webshop gebruikt die badge heeft aangepast of dat er de mogelijkheid is om zelf badges toe te voegen.

De “Sale Product Badge” zorgt er dan voor dat producten die afgeprijsd zijn direct in het oog springen.

Nu zijn er overige situaties te verzinnen waarbij je producten extra zou willen laten opvallen; bijvoorbeeld:

• nieuwe producten;
• uitgelichte producten;
• producten in de uitverkoop;
• speciale aanbiedingen;
• etc.

In dit artikel laten we zien hoe je de “Sale Badge” kunt aanpassen en meerdere product badges kunt toevoegen.

WooCommerce Product Badges Plugins

Er zijn diverse plugins verkrijgbaar, zowel gratis als betaalde, om extra product badges aan een product toe te voegen.  Eén van de meest gebruikte is de “Yith Badge Management” plugin voor WooCommerce.

Hiermee is het erg eenvoudig om een product badge met evt. “eigen” tekst aan te maken:

Yith Product Badge Management

Met deze plugin kun je een ongelimiteerd aantal product badges aan maken en per product bepalen welke er getoond wordt en waar.

Heb je geen behoefte aan een extra plugin, maar wil je slechts de tekst van de “Sale Badge” aanpassen dan kun je dat doen met behulp van de volgende code snippet:

add_filter( 'woocommerce_sale_flash', 'my_wc_sale_badge_text' );

function my_wc_sale_badge_text( $html ) {
     return str_replace( 
          __( 'Sale!', 'woocommerce' ), // de oorspronkelijke text
          __( 'Uitverkoop', 'woocommerce' ), // de tekst welke we willen zien
     $html );
}

Hier staat op regel 5 de oorspronkelijke tekst. Deze kan bij jouw installatie van WooCommerce door het thema al aangepast zijn. Vervang dan “Sale!” door de tekst die er bij jou nu staat.

Voorgaande code dien je in het functions.php bestand te plaatsen en bij voorkeur in het Child Theme. Ben je niet geheel bekend met code-snippets, bekijk dan ook dit artikel: WordPress Code Snippets.

Wil je ook de stijl (kleur, etc.) van de sale-badge aanpassen dan is dat mogelijk door de “onsale” class in het style.css bestand van je Child Theme op te nemen.

Bijvoorbeeld:

.onsale {
  background-color: red;
  font-size: 18px;
  color: white;
  font-weight: 700;
}

Hiermee wordt de achtergrondkleur dan rood, de tekst wordt wit, met font-grootte 18px en vet afgebeeld.

“Nieuw” Product Badge

Voor zowel terugkerende als nieuwe bezoekers is het mooi om te zien welke producten er recent zijn toegevoegd aan het assortiment. Bij een webshop met veel producten en met regelmatig nieuwe producten zou het dan handig zijn als die “Nieuw” product badge automatisch zou verdwijnen na een vooraf ingestelde datum. Dat scheelt ons als shopbeheerder veel werk en weten we zeker dat een product welke, bijvoorbeeld, al een half jaar in het assortiment zit niet meer als “nieuw” bestempeld wordt.

Dit kunnen we doen met de volgende code-snippet. Deze dient dan net als voorgaande code toegevoegd te worden aan het functions.php bestand van het Child Theme.

add_action( 'woocommerce_before_shop_loop_item_title', 'my_new_product_badge', 5 );

function my_new_product_badge() {
     $show_badge = 14;                      // Hoeveel dagen dient de badge getoond te worden
     $prod_date  = get_the_time( 'Y-m-d' );
     $prod_date  = strtotime( $postdate );

     // Controle Aantal Dagen Verstreken
     if ( ( time() - ( 60 * 60 * 24 * $show_badge ) ) < $prod_date ) :
          echo '<span class="new-product-badge">' . esc_html__( 'Nieuw', 'my-text-domain' ) . '</span>'; // De "Nieuw" tekst
     endif;
}

Op regel 4 is het aantal dagen dat de product badge getoond wordt ingesteld op 14. Wil je dat dus langer (of korter), verander je 14 in het aantal gewenste dagen.

Op regel 10 staat de tekst “Nieuw”, wil je een andere tekst, pas die dan daar aan.

Deze badge is te stijlen door een class “new-product-badge” op te nemen in het style.css bestand van je Child Theme.

Met dit stukje code wordt er dan automatisch een badge geplaats met de tekst “Nieuw” welke automatisch na een ingesteld aantal dagen zal verdwijnen.

Iedere WebShop is een uitdaging op zich. Wat belangrijk is, om in het achterhoofd te houden, is overzicht en structuur. Een teveel aan badges op bijvoorbeeld de categorie overzicht pagina maakt het dan weer onoverzichtelijk.

Ons advies is dan ook om dan pas met product badges te beginnen als de webshop volledig up-&-running is en al enige tijd in de lucht is. Ben je je webshop net begonnen en nog aan het vullen met producten dan is het gebruik van de “nieuw” badge niet aan te raden…. alle producten zijn dan nml. nieuw…

Overige Artikelen