WooCommerce prijzen weergeven als ‘Vanaf prijs’

standaard WooCommerce prijs-range weergave
Standaard prijsweergave in WooCommerce StoreFront thema

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.


<?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
?>

standaard vanaf prijs weergave
Na juist plaatsen van de code zou het er zou uit moeten zien in het product overzicht.

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.

Aangepaste vanaf prijs weergave
CSS code toegepast op de vanaf prijs
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.

  • Hidden
  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.