In WooCommerce de prijs psychologisch aantrekkelijk tonen

In WooCommerce de prijs psychologisch aantrekkelijk tonen

Enkele handige code snippets om je productprijs te formatteren.

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,  
                      '', 
                      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.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

De WordPress 'admin bar' ook daadwerkelijk alleen voor admins
Zelf vind ik de WordPress ‘admin bar’ heel handig om snel toegang te krijgen tot verschillende...
De presentatie van variabele producten hun prijs verbeteren
Een variabel product wordt in WooCommerce weergegeven als een prijs €100-€250 in plaats van 'vanaf €...
Hoe maak ik zelf een shortcode?
Bij het live gaan van de snippet base vroeg ik in mijn nieuwsbrief aan mijn lezers, of ze suggesties...
Koopsuggesties op basis van eerdere orders toevoegen
Het codefragment in deze snippet maakt onderdeel uit van een wat groter project. In het blogartikel ‘Flexibel...
Een 'Niet op voorraad' knop in WooCommerce
Hoe voorkom je teleurstelling bij je klant wanneer hij zijn favoriete product bij jou vindt, zonder dat...
Password Change notificaties onderdrukken in WordPress
Voorkom dat je een email krijgt iedere keer wanneer iemand zijn wachtwoord aanpast.

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Eén reactie

  1. Hallo, heel leuke snippet! Alleen bots ik tegen een probleem aan.

    Ik heb prijzen van € 7,95 die nu als € 7,- worden gegeven, met de korting bv zou het € 6,50 worden maar dit wordt nu weergeven als 6,5.

    Afgeronden prijzen worden prima weergeven 25 wordt weergeven als 25,-
    Bestaat er een manier om als nog eens het getal na de comma groter is dan nu dit correct weer te geven?

    Alvast bedankt.

Geef een antwoord

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

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht