In WooCommerce de prijs psychologisch aantrekkelijk tonen

Enkele jaren geleden heb ik een blogpost geschreven over hoe je een prijs psychologisch aantrekkelijker kan tonen. In de commentaren op deze post is een korte discussie geweest, met nog een andere code tip.

Nu is het natuurlijk zomaar mogelijk, dat jij op zoek bent naar een manier om de prijs in WooCommerce psychologisch aantrekkelijker te tonen, maar door ‘niet passende’ zoektermen, het artikel ging over meer, deze code toch nooit terug zal vinden. Vandaar dat ik het allemaal even op een rijtje zet.

Laten we met een heel eenvoudige beginnen. Dit is niet naar voren gekomen in de bovengenoemde discussie, maar het is toch een vraag die ik vrij dikwijls krijg.

Hoe kan ik de prijs zonder centen tonen, als het bedrag in gehele euro’s is?

Dat is een heel simpele, wat die functie zit al ingebouwd in WooCommerce, maar er is nergens een ‘schakelaar’ om deze aan of uit te zetten. Je zal dit met een stukje code moeten doen, maar gelukkig voor jou, is dat maar één regel:

<?php
add_filter( 'woocommerce_price_trim_zeros', '__return_true' );

Ok. Wat staat hier in vredesnaam? Want was het niet zo, dat met een filter een functie meegegeven moest worden? Waarom staat er dan geen functie gedefinieerd?

Dat is omdat __return_true een interne functie van WordPress is die -je kan het vast wel raden- de waarde ’true’ terug geeft. Je hoeft dus niet altijd zelf een filter functie te definiëren, je kan ook gebruik maken van bestaande functies.

Het euroteken voor de prijs weghalen

Wanneer je op de grote winkels let, dan zal je wellicht zijn opgevallen, dat de meeste grote winkels een prijs geven zonder euroteken. En wanneer in hele euro’s, ook zonder een ‘centendeel’. Hoe je van dat centendeel afkomt, zonder te programmeren heb ik hierboven al aangegeven.

Maar hoe kom je van dat euroteken af? In de blogpost waarmee ik dit artikel ben begonnen, kwam ik met de volgende code.

<?php
add_filter('woocommerce_currency_symbol', 'wxp_remove_wc_currency_symbols', 10, 2);
function wxp_remove_wc_currency_symbols( $currency_symbol, $currency ) {
    $currency_symbol = '';
    return $currency_symbol;
}

Werkt prima. Maar in de commentaren gaf ‘Remco’ aan, dat, kijkend naar Coolblue, tijdens het afrekenen wel het euroteken werd getoond. Dus ik breidde de code uit.

add_filter('woocommerce_currency_symbol', 'wxp_remove_wc_currency_symbols', 10, 2);
function wxp_remove_wc_currency_symbols( $currency_symbol, $currency ) {
   if (!is_cart() && !is_checkout()) {
      $currency_symbol = '';
   }
   return $currency_symbol;
}

Wat hier dus staat is wanneer de pagina niet de winkelwagen is en niet de checkout pagina, dan moet je geen currency symbol tonen, anders wel.

Werkt als een trein. Had ik destijds nog niet geïmplementeerd bij klanten en bedacht de code ter plekke, maar het werkt.

Paul kwam een jaar later met een aanvullende opmerking. Je bent als webwinkelier verplicht de klant duidelijk te maken, dat je in euro’s handelt. Ik heb dat commentaar niet goed gelezen helaas, want hoewel het antwoord wat ik Paul gaf wel juist is, had ik een beter antwoord kunnen geven. Immers, een jaar later wist ik al, dat de code die ik voor Remco ‘uit mijn mouw had geschud’ inderdaad werkende code was. Ik had dit inmiddels bij verschillende klanten geïmplementeerd. Dit was eigenlijk de vraag die Paul stelde! Bij deze mijn excuses Paul, voor het niet goed lezen van je vraag.

Ik had hem ook nog kunnen vertellen, dat ik inmiddels ook een betere code snippet gebruik. Want de voorwaarde

if (!is_cart() && !is_checkout())

had ik beter anders kunnen verwoorden. Je wilt namelijk eigenlijk iets anders. De prijs van de producten komt nog op een groot aantal andere plaatsen voor ook. Bijvoorbeeld in alle mail die wordt verzonden. En daar wil je ook de valuta symbolen hebben.

Wat je eigenlijk wilt, is dat het valuta symbool alleen in het matrixoverzicht en op de individuele productpagina’s wordt onderdrukt.

Een betere manier om dit te schrijven is

if (is_shop() || is_product() )

Hier zeggen we dus ‘als het de winkelpagina is of de productpagina

Daarmee wordt de complete, gecorrigeerde code dus

<?php 
add_filter('woocommerce_currency_symbol', 'wxp_remove_wc_currency_symbols', 10, 2);
function wxp_remove_wc_currency_symbols( $currency_symbol, $currency ) {
   if (is_shop() || is_product()) {
      $currency_symbol = '';
   }
   return $currency_symbol;
}

Een veel cleanere oplossing. Maar hier ga je nog wel op één punt de mist in.

Wanneer je op de één of andere manier in Gutenberg of een page builder een aantal producten in je pagina opneemt, dan zijn dat dus geen product of winkel pagina’s, en zal het dollarteken wel getoond worden. Je kan deze code nog uitbreiden door met get_permalink() te testen of de pagina nog een specifieke url heeft, maar dat wordt wel heel onderhoudsintensief. Om het toch even met één voorbeeld te tonen, waarbij ik op twee extra pagina’s wil testen :

<?php 
add_filter('woocommerce_currency_symbol', 'wxp_remove_wc_currency_symbols', 10, 2);
function wxp_remove_wc_currency_symbols( $currency_symbol, $currency ) {
   if (is_shop() || is_product() 
       || (get_permalink() == 'mijn-ander-pagina-met-producten')
       || (get_permalink() == 'nog-een-andere-pagina-met-producten')
   )
   {
      $currency_symbol = '';
   }
   return $currency_symbol;
}

Maar wat nu, wanneer we in plaats van 97,00 of 97 de prijs als 97,- willen tonen?

Natuurlijk, we kunnen het ons allemaal nog lastiger maken wanneer we willen. Wat nu, wanneer we de prijs niet in hele euro’s willen tonen, maar in veel webwinkels zie je bij gehele bedragen in euro’s ook de vorm 97,– of 97,- staan.

Hoe doen we dat?

Daarvoor gebruiken we een andere filter, wc_price

Laten we weer eens naar de code kijken.

<?php
add_filter('wc_price', 'wxp_show_rounded_price',10,4);

function wxp_show_rounded_price($price_format, $price,$args, $unformatted) {
   if ($price - floor($price) > 0) {
      return $price_format;
   } else {
      return get_woocommerce_currency_symbol() . 
                      number_format(
$price,
                      0,  //aantal decimalen 
                      '', //decimal separator
                      wc_get_price_thousand_separator() 
      ) . wc_get_price_decimal_separator() . '-';
   } 
}

Ik kan mij voorstellen, dat de bovenstaande code behoorlijk wat vragen op kan roepen. Wat doe ik hier?

Laten we eens met regel 5 beginnen :

if ($price - floor($price) > 0)

De functie ‘floor’ geeft de cijfers van een getal voor het decimaalteken aan. Dus ‘floor(12.45)’ is 12, ‘floor(12) is ook 12.

Wanneer ik nu van $price, het gehele deel van $price aftrek, houd ik nog iets over, als price geen geheel getal is. En als het geen geheel getal is, wil ik gewoon de geformatteerde prijs zien.

Is het wel een geheel getal, dan wil ik dit opnieuw formatteren, op een andere manier. Omdat ik wil dat mijn code de instellingen van WooCommerce ‘gehoorzaamd’ kan ik niet zomaar een aantal dingen invullen, maar haal ik ze op uit de instellingen. En dat doe ik respectievelijk met de functies ‘get_woocommerce_currency_symbol’, ‘wc_get_price_decimal_separator’ en ‘wc_get_price_thousand_separator’. In de functie ‘number_format’ heb ik voor de decimale scheiding een lege string meegegeven, omdat zonder decimalen, dit teken toch niet zichtbaar wordt. In plaats daarvan ‘plak’ ik hem achter het resultaat van de ‘number_format’ functie.

Je hebt nu een aardige toolset om de prijs presentatie helemaal naar je hand te zetten. Mocht je dit zelf toch iets te spannend vinden, dan kan je het natuurlijk altijd door mij laten doen via de WordXPression support strippenkaart.