WooCommerce: Toon hoever de klant van gratis verzending is verwijderd

Eén van de goede manieren om de Average Order Value van je webwinkel te verhogen is vanaf een bepaald bedrag gratis verzending aan te bieden. In deze code snippet laat ik je zien hoe je eenvoudig op de winkelwagen pagina kan laten zien, hoever de klant nog verwijderd is van gratis verzending.

Ik zal je eerst de code laten zien, daarna wordt hij besproken.

<?php
add_action('woocommerce_before_cart','wxp_free_shipping_notice');

function wxp_free_shipping_notice() {
   $min_free = 50; //Vul hier het bedrag in wat minimaal bereikt moet worden
   $current = WC()->cart->subtotal;
   if ($current < $min_free) {
      $text = sprintf('Gratis verzending bij bestellingen boven %1$s euro, wanneer je voor minimaal %2$s bestelt, betaal je geen verzendkosten', 
      $min_free, wc_price($min_free - $current));
   } else {
     $text = 'Je hoeft geen verzendkosten te betalen';
   }
   $shop_page = get_permalink(wc_get_page_id('shop'));
   $notice = sprintf('<a href="%s" class="button wc-forward">%s</a>%s'
             esc_url($shop_page), 'Verder winkelen', $text);
   wc_print_notice($notice, 'notice');
}

Omdat we deze tekst boven de shoppingcart willen plaatsen moeten we inhaken op de ‘woocommerce_before_cart’ hook, de hook die door WordPress wordt aangeroepen voordat de winkelwagen wordt getoond. Dat vertellen we WordPress op regel 2, en vanaf regel 4 zie je de inhoud van de functie.

Op regel 5 geven we aan vanaf welk bedrag er gratis verzending is.

Op regel 6 roepen we de methode ‘subtotal’ van de winkelwagen aan om te zien wat op dat moment het totaal aan producten in de winkelwagen is. De reden dat we geen ’total’ aanroepen, is omdat bij ’total’ ook de bijkomende kosten als verzending meegenomen worden in het totaal.

Een aandachtspunt is, dat het bedrag voor gratis verzending ex btw moet zijn, wanneer je de bedragen in de winkel ex btw toont, en -logischerwijs- inclusief, wanneer je de bedragen inclusief toont.

Regel 7 spreekt voor zich. Op regel 8 kan je de tekst aanpassen aan je behoefte. Let op de variabelen %1$s en %2$s. Dit zijn ‘placeholders’ voor respectievelijk de eerste en de tweede parameter, die wordt meegegeven. Hierdoor heb je meer vrijheid in het kiezen van je tekst. Zou je alleen %s als placeholders hebben gebruikt, dan worden de parameters in volgorde van de meegegeven parameters getoond.

Wil je bedragen in WooCommerce laten zien gebruik dan altijd de functie wp_price(), deze geeft de waarden voor de bedragen terug in de formaat opties zoals aangegeven in de settings van WooCommerce.

In regel 13 bepalen we wat de URL naar de winkelwagen is. De functie ‘wc_get_page_id()’ geeft de ID terug van een pagina aan de hand van de slug van een pagina, maar waar de pagina’s ‘speciale’ pagina’s zijn in WooCommerce, zoals bijvoorbeeld de shop, myaccount, cart en checkout pagina, dan wordt niet niet gekeken naar een pagina met die naam, maar de pagina die bij de settings staat ingesteld als de pagina die de winkelwagen, mijn account, winkelwagen of afrekenpagina moet afhandelen.

Op deze manier krijg je -ongeacht de taalversie van de site en veranderingen aan urls, altijd de juiste pagina, de functie ‘get_permalink()’ geeft vervolgens de complete URL voor die pagina.

De regels 14 en 15 laten opnieuw het gebruik van de sprintf variabelen zien. Wanneer daarop geklikt wordt, kan de klant verder winkelen. Belangrijk hier is ook het gebruik van de functie esc_url(). Hierdoor wordt de URL altijd op de juiste manier geformatteerd. Gebruik je URL’s als output voor je WordPress PHP code, dient die url altijd ‘escaped’ te zijn.

Tenslotte tonen we de tekst. Om deze opvallend te tonen gebruiken we de standaard functie wc_print_notice van WooCommerce. Deze krijgt twee parameters mee, de notitie die je wilt tonen en het ’type’ notitie. Hier zijn drie waarden mogelijk: ‘error’, ‘warning’ en ‘notice’.

We zetten hier geen bericht direct op het scherm, omdat de functie wp_print _notice ervoor zorgt, dat het type bericht opgemaakt is volgens de opmaak van het thema.

Ik gebruik (random pagebuilder) en ik zie het bericht niet verschijnen

Wanneer je het bericht niet ziet verschijnen in een pagebuilder dan is het mogelijk dat de maker van jouw pagebuilder een apart component/module/element/widget (afhankelijk van de benaming van je pagebuilder) heeft voor het tonen van Woo berichten. Deze moet je dan eerst plaatsen op je pagina.