Totaalprijs tonen op een WooCommerce Single Product Page

Standaard zal WooCommerce wel het bedrag tonen, maar geen indicatie hoeveel iets kost, wanneer je er meerdere producten van bestelt.

Dit kan een reden zijn, waarom jouw klant mogelijk toch afhaakt, één van de belangrijkste redenen van ‘abandoned carts‘ is dat de uiteindelijke prijs die betaalt moet worden een verrassing is. Eén van de manieren om een onprettige verrassing te voorkomen is om bij het aanpassen van de aantallen ook gelijk het totaalbedrag te tonen, zoals in de afbeelding hieronder.

Het totaalbedrag wat je hier boven ziet staan is geen functie van WooCommerce zelf.

Het codevoorbeeld in dit artikel -of eigenlijk ‘de code voorbeelden- zijn bedoeld voor enkelvoudige producten. Dus geen productvarianten of samengestelde producten.

Maar we krijgen met nog een leuke uitdaging te maken voor dit codefragment. En voor ik de code laat zien en bespreek, wil ik even op dit probleem ingaan.

WooCommerce biedt de mogelijkheid om de prijs in te stellen volgens het formaat van het land. Dat is mooi, want in sommige landen vindt met het mooi om de valuta voor het bedrag te zetten, in andere landen doet men het er liever achter. En in sommige landen gebruiken we de punt als decimaalteken, en de komma als scheidingsteken, in andere landen doen mensen het graag omgekeerd.

En in de meeste landen geven we de prijzen graag met twee cijfers achter de komma, maar wanneer je in jouw webwinkel in BitCoin afrekent, dan het je liever toch wat meer cijfers achter de komma.

En WooCommerce houdt daar allemaal rekening mee, wanneer je dat bij de algemene instellingen goed hebt ingesteld.

Maar wanneer ik dit allemaal ook in de code zou verwerken, zou de code in principe wel heel erg gecompliceerd worden. En bovendien is dit iets, wat je eigenlijk maar eenmaal instelt, want zo snel zal de presentatie van de getallen en de positie van de valuta niet veranderen.

Ik heb er daarom voor gekozen om een stuk ‘basiscode’ te schrijven, waarbij we straks een paar aanpassingen gaan doen afhankelijk van de ‘bijzondere situaties’ die we willen.

Alleen voor ‘Enkelvoudige producten’

Een tweede belangrijk punt is, dat dit alleen voor enkelvoudige producten geldt. Dus niet voor productvarianten of of samengestelde producten. Ben jij een WordPress professional met (enige) programmeerervaring, dan zal het je weinig moeite kosten om de code geschikt te maken voor de ‘bijzondere productsoorten’. En ben je zelf niet in staat te programmeren, dan kan je natuurlijk de wijziging precies zoals jij hem wenst door mij uit laten voeren. Voor meer informatie zie ook de mogelijkheden met een WordXPression Support Strippenkaart.

Alleen voor compatible thema’s

Een tweede puntje om rekening mee te houden, is dat het alleen werkt met thema’s die 100% WooCommerce compatible zijn. Dat zijn dus de meeste thema’s en de meeste templates die je bouwt met de bekende pagebuilders.

Wanneer de code niet werkt -en dit kan je meestal zien doordat het ’totaalbedrag’ niet zichtbaar wordt- probeer het dan eerst eens uit met een ander thema, liefst met één van de WordPress default thema’s. Werkt het dan ook niet, dan heb je iets fout gedaan met de code. Werkt het dan wel, dan is het thema wat je gebruikt gewoon niet compatible.

Met een paar kleine wijzigingen is het altijd compatible te krijgen, maar ook dat is een stukje maatwerk voor de strippenkaart.

De basiscode

Het interessante aan de basiscode is dat we hier twee soorten programmeercode door elkaar gebruiken. Als eerste PHP. De programmeertaal van de server.

Maar omdat wanneer de pagina eenmaal is ‘getekend’ PHP niets meer kan doen om dingen te veranderen, en we willen, dat de pagina reageert op veranderingen in de aantallen producten, hebben we ook nog de hulp van JavaScript nodig. En die JavaScript voegen we in vanuit de PHP code.

In deze basiscode gaan we uit van het Engels / Amerikaanse valutaformaat. Dus met punten als decimaalscheiding en komma’s als duizendscheiding.

En de valuta voor het bedrag.

<?php 
add_action( 'woocommerce_after_add_to_cart_button', 'wxp_product_price_recalculate' );
 
function wxp_product_price_recalculate() {
   global $product;
   echo '<div id="subtot" style="display:inline-block;">Totaal: <span></span></div>';
   $price = $product->get_price();
   $currency = get_woocommerce_currency_symbol();
   wc_enqueue_js( "      
      $('[name=quantity]').on('input change', function() { 
         var qty = $(this).val();
         var price = '" . esc_js( $price ) . "';
         var price_string = (price*qty).toFixed(2);
         $('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);
      }).change();
   " );
}

Wat we hier doen is een stukje tekst toevoegen achter de ‘Winkelwagen’ knop. In PHP doen we eigenlijk niet veel anders. De grap zit hem echter in de <span></span> HTML code, want daar tussen gaan we totaalprijs invoegen.

Dat kan alleen niet met PHP. En daarom maken we gebruik van JavaScript. Of eigenlijk van JQuery, een heel uitgebreide JavaScript library, waarmee een paar dingen net iets makkelijker kan.

De code van regel 10 tot en met regel 15 is JavaScript code, waar we af en toe -dat zie je al aan de andere kleuren- een stukje PHP hebben ingevoegd.

We doen eigenlijk twee dingen met PHP. We geven aan JavaScript via PHP de stuksprijs door, en we gebruiken PHP om de valuta te bepalen. Alle andere functionaliteit is puur JavaScript.

De functie wc_enqueue_js is een WooCommerce functie die ervoor zorgt, dat die JavaScript code netjes in de header of onderaan by de </body> tag komt te staan.

Wat er eigenlijk heel simpel in die JS code staat is dat voor het veld met de naam ‘quantity’ iedere keer dat er iets wordt ingevoerd, of aangepast een stukje code moet worden uitgevoerd.

En dat stukje code berekent wat het resultaat is van de stuksprijs maal de hoeveelheid, om dit tenslotte tussen de <span></span> html tag binnen de #subtot ID dat eindresultaat te plaatsen. En dat natuurlijk op twee decimalen.

Dit is de code die werkt voor webshops met een Amerikaanse getalsaanduiding.

Voor Nederland dus niet.

Om te bepalen wat we voor Nederland moeten doen, willen we eerst eens even kijken hoe ‘price’ er nu precies uitziet.

En om dat te doen heb ik tijdelijk even voor regel 14 een extra JavaScript regel toegevoegd.

console.log(price);

Wat deze regel doet, is de variabele tonen binnen de ‘console’ van je browser, een onderdeel van de Developer Tools, zoals je die tegenwoordig in vrijwel iedere moderne browser aantreft.

Om een goed idee van de getalformaten te hebben, heb ik bovendien de prijs aardig hoog gemaakt. 300.000,01 euro.

Dit getal wordt binnen de console log getoond als 300000.01

Daar kan ik mee werken.

Om een de komma te plaatsen op de positie van de punt is geen punt. JQuery kent een ‘replace’ methode. Ik zou regel 13 kunnen vervangen door onderstaande code:

var price_string = (price*qty).toFixed(2).toString().replace('.',',');

Ik kan mij voorstellen, dat je een beetje in de war begint te raken van een dergelijk lange regel. Laat me je iets over JavaScript / JQuery vertellen.

In JavaScript kan je bepaalde ‘functies’, die overigens in dat geval ‘methoden’ heten toepassen op het resultaat van een andere methode.

Wat ik hier dus eigenlijk doe is het volgende: Op het resultaat van price*qty pas ik de methode .toFixed(2) toe. Dus dat resultaat wordt nu naar 2 decimalen afgerond. Dat resultaat is een getal.

Maar in een getal kan ik niet naar tekens zoeken, of tekens verplaatsen, dus ik maak daar eerst een tekenreeks van. Een ‘string’.

Nu kan ik in deze tekenreeks wel zoeken en vervangen, en dat is precies wat de methode .replace hier doet. Alle punten worden vervangen door komma’s. En aangezien er maar één punt was, krijgen we nu het volgende resultaat: 300000,01

Nu vinden we dat nu niet direct makkelijk te lezen. Dat is ook, waarom we meestal punten tussen de duizendtallen gebruiken. Dus wat we eigenlijk willen is van achteraf bekeken na iedere groep van drie cijfers een punt te zetten.

En dat het liefst in code die op één regel past.

Dat is vrijwel onmogelijk tenzij je gebruik maakt van een wel heel interessant mechanisme, ‘Regular Expressions’. En ik ben hier gelijk heel eerlijk, ik kan aardig overweg met regular expressions, maar hier wist ik ook even geen raad mee. Gelukkig ken ik iemand die daar wel heel goed in is, en het bovendien nog leuk vindt ook. Gert lost regular expressions op met eenzelfde plezier als een ander de kruiswoordpuzzel in de krant.

En omdat de replace method ook met regular expressions overweg kan, voegde ik de geheimzinnige code die ik van Gert had gekregen in tussen de haakjes van de replace functie.

Overigens, wanneer je een waarde meegeeft als eerste parameter moeten er quotes omheen, bij een expression niet. Doe je dat wel, dan gaat de methode op zoek naar alle waarden ‘/\B(?=(\d{3})+(?!\d))/g’ binnen een string en vervangt deze door een punt.

En omdat niemand behalve Gert ooit zomaar ‘/\B(?=(\d{3})+(?!\d))/g’ in zal tikken, tenzij je op zoek bent naar een sterk password wat ‘makkelijk te onthouden’ is, zou er niets gebeuren.

Maar nu dus wel. Van achter naar voor wordt er op zoek gegaan naar groepjes van drie cijfers. En zodra een groepje van 3 cijfers is gevonden, wordt er een punt toegevoegd.

Dit geeft ook direct het zwakke punt van deze code aan.

Want zijn jouw cijfers drie of meer cijfers achter de komma, zal deze code niet werken. Wil je je prijzen in Bitcoin laten zien, dan moeten we Gert eens een nieuwe puzzel geven. Maar voorlopig kunnen we het ermee doen.

Wil je dus nette decimale komma’s en duizendtallen met punten er tussen vervang je regel 13 door

var price_string = (price*qty).toFixed(2).toString().replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');

Dan hebben we nog een tweede ‘uitdaging’. Alhoewel deze valt wel mee, omdat met de code die we nu hebben iedere Nederlandse situatie wel aankunnen. Maar in sommige landen schrijft met het valuta teken achter het bedrag.

Gelukkig is dit ook heel makkelijk aan te passen en dit doen we in regel 14.

$('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);

vervangen we door

$('#subtot > span').html(price_string+' " . esc_js( $currency ) . "');

En nu nog even één keer de volledige code zoals deze voor een Nederlandse site zou moeten met de valuta voor het bedrag en met een decimale komma en duizendtallenpunten (3x woordwaarde)

<?php 
add_action( 'woocommerce_after_add_to_cart_button', 'wxp_product_price_recalculate' );
 
function wxp_product_price_recalculate() {
   global $product;
   echo '<div id="subtot" style="display:inline-block;">Totaal: <span></span></div>';
   $price = $product->get_price();
   $currency = get_woocommerce_currency_symbol();
   wc_enqueue_js( "      
      $('[name=quantity]').on('input change', function() { 
         var qty = $(this).val();
         var price = '" . esc_js( $price ) . "';
         var price_string = (price*qty).toFixed(2).toString().replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
         $('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);
      }).change();
   " );
}

Nogmaals, deze code werkt uitsluitend op enkelvoudige producten. Wanneer je behoefte hebt aan meer functionaliteit met deze functie op jouw site, zoals ook bij variabele producten, dan kan je hiervoor altijd contact opnemen om dit als maatwerk uit te laten voeren via een WordXPression Support Strippenkaart.