WooCommerce beperkte voorraad

Heb je een WooCommerce shop en verkoop je producten die maar beperkt voorradig zijn dan zal je wellicht al gemerkt hebben dat dit niet altijd even lekker werkt zoals je zou willen.

De standaard WooCommerce functionaliteit voor voorraadbeheer “Hold stock” brengt de voorraad pas in mindering op het moment dat het betaalproces gestart wordt.
Wanneer je webshop grote voorraden heeft en niet zoveel gelijktijdige bezoekers zal je hier in praktijk niet zoveel van merken.
Immers kunnen, met 100 producten op voorraad, 20 mensen gelijktijdig er 5 kopen zonder problemen.

Heb je echter een product dat bijvoorbeeld een populaire, limited edition variant is met een voorraad van 5 én je hebt gelijktijdig 20 mensen die dit willen kopen dan wordt het vervelend.

Deze 20 mensen kunnen je limited edition product namelijk allemaal in hun winkelmandje stoppen zonder dat de voorraad aangepast wordt. Pas op het moment dat er afgerekend gaat worden zal de voorraad in mindering worden gebracht en gereserveerd, totdat de betaling geslaagd is.

Dat betekend 15 teleurgestelde klanten met zelfs kans op een zelfde aantal negatieve reviews.

Het mooie van WordPress en WooCommerce is nu dan weer dat er natuurlijk al een oplossing voor is gemaakt in de vorm van een plugin.

De plugin WooCommerce Cart Stock Reducer gemaakt door James Golovich verhelpt dit probleem, door de voorraad al in mindering te brengen op het moment dat het toegevoegd wordt aan het winkelmandje.

Ook kan je met een ‘custom key’ op product niveau aangeven hoelang dit product gereserveerd blijft en dus hoeveel tijd je bezoeker heeft om af te rekenen.

Hoe komt de afreken countdown er in WooCommerce dan uit te zien?

In dit voorbeeld gebruiken we het standaard Storefront thema van WooCommerce zelf en hebben we aan de vormgeving en teksten nog niets aangepast. Verder heeft het voorbeeld product slechts 1 op voorraad.

Na het toevoegen aan je winkelmandje komt er een melding in de shop te staan die de gebruiker er op wijst dat er snel afgerekend moet worden. Op de locatie van de voorraad komt nu een melding dat er op dit moment geen voorraad beschikbaar is maar dat je wel al één van het product in je mandje hebt zitten.

WooCommerce product countdown
De bezoeker heeft maar beperkte tijd om af te rekenen

Als een andere bezoeker het product bekijkt zal die enkel een melding zien dat het product niet beschikbaar is. Hierbij wordt ook aangegeven wanneer de countdown afloopt en mogelijk weer beschikbaar is.

product zo weer beschikbaar
De melding voor andere bezoekers wanneer het product gereserveerd is.

Ben je te traag met afrekenen dan komt er na verloop een melding in beeld dat het product weer uit je mandje is verwijderd, klaar voor de volgende om te bestellen.

WooCommerce product uit mandje verwijderd
De melding wanneer het product uit het mandje is verwijderd omdat er niet snel genoeg is afgerekend.

Ook in het mandje zelf komt een melding met countdown in beeld. Dit is zodat de koper weet wanneer het product uit het mandje wordt verwijdert.

WooCommerce beperkte voorraad countdown in winkelmand
Zo ziet de aftel timer op de winkelmand pagina er standaard uit.

Instellingen

De standaard instellingen van deze plugin kunnen aangepast worden onder “WooCommerce” > “instellingen” (1) > “Integraties” (2) > “cart stock reducer” (3)

WooCommerce beperkte voorraad instellingen
De verschillende instellingen voor de plugin.

Hier kan je alle opties van de plugin vinden. De eerste is zeer belangrijk “Enable Cart Stock Reducer” hiermee activeer je dat de voorraad in mindering wordt gebracht bij het toevoegen aan een winkelmandje.

Vervolgens heb je de opties om de tekst aan de te passen die aan de voorkant van de site wordt getoond.
Een paar codes die hierbij handig zijn, die je zeker niet moet vergeten, zijn:
%CSR_EXPIRE_TIME% – dit geeft de countdown weer.
%CSR_NUM_ITEMS% – deze geeft het aantal dat op dit moment in het mandje van de betreffende gebruiker bevindt.

Er missen echter ook nog 2 tekst regels in de instellingen die enkel aangepast kunnen worden met een vertaal plugin zoals Locotranslate. Dit zijn namelijk de regels:
“Please checkout within -TIME- to guarantee your item does not expire.”
“Please checkout within -TIME- or this item will be removed from your cart.”

Daarnaast kan je nog aangeven of producten in het winkelmandje automatisch moeten verlopen, hoe snel dat dan gebeurd en of de aftel timer wel of niet weergegeven moet worden.

Afwijkende countdown op product niveau

Om een kortere of langere countdown in te stellen voor een enkel product moet dit ingevoerd worden met een ‘Custom key’, in het Nederlands “Extra velden”.
Om die optie te krijgen moet je bij het aanpassen van het product eerst rechtsboven op “Schermopties” (1) klikken, vervolgens moet je zorgen dat de checkbox bij “Extra velden” (2) aanstaat zoals in de afbeelding hier onder gedaan is.

WooCommerce beperkte voorraad toon extra velden
Toon de extra velden bij WooCommerce producten

Vervolgens komt er als je verder naar beneden scrolt een extra kader bij met de titel “extra velden”

In de documentatie van de plugin staat daarover het volgende:

Expiration times are plain english using whatever types php’s strtotime can support (Examples: 10 minutes, 1 hour, 6 hours, 1 day)
Per item expiration time can be configured by adding a Custom Field to each item using the configured
‘Expire Custom Key’ (default name is ‘csr_expire_time’).

De Examples moeten in dit geval Engels blijven, aangezien dit direct vanuit PHP komt.

Om deze waardes toe te voegen moet je in het extra veld kader mogelijk nog op “nieuwe toevoegen” klikken om de waardes in te voeren.

WooCommerce beperkte voorraad verloop tijd
aangepast verlooptijd invoeren in de extra velden sectie

Op deze manier kan je door middel van de plugin WooCommerce Cart Stock Reducer zorgen dat het product niet vaker in een mandje geplaatst wordt dan dat het voorradig is.

Hulp nodig bij de implementatie van deze plugin of aanpassingen?
Dan zijn onze WooCommerce onderhoudspakketten wat voor jou!

Afbeeldingsgrootte aanpassen van product image

Hoi! Ik kan de afbeeldingsgrootte van mijn product image in de customizer niet aanpassen.

Hij geeft wel aan dat ik de grootte kan veranderen, maar zie geen wijzigingen plaatsvinden in de werkelijke grootte van de productafbeelding.

Weten jullie hoe dit komt en hoe dit te verhelpen is?

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.