Wanneer je aan WooCommerce een variabel product toevoegt, waarvan de prijs verschilt per variatie krijg je een prijs weergave die niet zo veel zeggend is. WooCommerce laat namelijk standaard de van-tot prijs zien zonder tekstuele begeleiding. Het is gebruikelijker om de vanaf prijs weer te geven en dit er bij te vermelden.
Door een stuk code toe te voegen aan de functions.php van het gebruikte thema kan je de weergave aanpassen en de ‘vanaf prijs’ tonen.
De code die je hiervoor kan gebruiken staat hier onder.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| //Vanaf hier Kopiëren | |
| /** | |
| * Toont de tekst "Vanaf" wanneer er een verschil is tussen | |
| * $product->min_variation_price EN $product->max_variation_price | |
| * Geschikt voor WooCommerce versie 3, deze code kan je plakken in de functions.php van je thema | |
| * Version: Woocommerce 3.0 | |
| */ | |
| add_filter('woocommerce_variable_price_html','wphelpdesk_variate_prijs_verschil', 10, 2); | |
| function wphelpdesk_variate_prijs_verschil( $price, $product ) { | |
| if (count($product->get_children()) > 1) { | |
| // De tekst 'Vanaf' is te wijzigen naar het woord dat je wilt weergeven | |
| // Zorg wel dat je de '' laat staan! | |
| $price = '<span class="from">' . __('Vanaf') . '</span> '; | |
| $price .= woocommerce_price($product->price); | |
| } | |
| return $price; | |
| } | |
| // Tot hier Kopiëren | |
| ?> |
Let op! Zorg dat je eerst een backup maakt van je website en bijvoorkeur deze aanpassing doet met een FTP-programma of code bewerker. Één foutieve spatie, komma, apostrof, puntkomma of ander karakter kan je website ‘breken’. Wil je er zeker van zijn dat deze aanpassing goed gaat, laat dit dan door ons uitvoeren. Het verlies van omzet door een webshop die niet werkt is al snel vele malen groter!
Wanneer de code in je functions.php is geplaatst kan je de weergave nog verder aanpassen doormiddel van CSS code.
Vanaf prijs weergave aanpassen
Het woord Vanaf kan je verder qua opmaak nog aanpassen door CSS code. Wanneer je span.from toevoegt aan je aangepaste CSS. Om de weergave van de prijs aan te passen kan je span.amount gebruiken.
In onderstaand voorbeeld hebben we Vanaf dik gedrukt en oranje gemaakt en de prijs dubbel zo groot.
span.from{
font-weight: bold;
font-size: 100%;
color: #ee6322;
}
span.amount{
font-size:200%;
}
Hulp nodig bij de implementatie van de ‘vanaf prijs’?
Wil je dat wij de code voor de vanaf prijs implementeren op je website en deze ook qua stijl direct laten aansluiten met je thema? Vul dan onderstaand formulier in.