Vanuit de Nederlandse wetgeving ben je als webshopeigenaar verplicht je bezoeker / klant duidelijk te laten weten waar deze in het aankoopproces zit. Geen “ooh, wat zou dit knopje doen?!” met als gevolg dat er ineens een bestelling is geplaatst, maar duidelijkheid zoals de “je staat hier” bekende stip op kaarten in pretparken.
Helaas zijn veel standaard webshop oplossingen daar niet standaard op voorbereid. WooCommerce is daar zeker niet de enige in. Gelukkig is het best makkelijk om de stappen toe te voegen. Het enige dat je nodig hebt? Toegang tot de functions.php van je (bij voorkeur child) theme.
Code
Voor het weergeven van de stappen tijdens het bestelproces (van winkelwagen tot ‘Bestelling geplaatst’ of ‘Oeps, er ging iets fout!’) kun je onderstaande code gebruiken. Het ‘your-theme’ kun je aanpassen naar de ‘domain’ die je (is) gebruikt voor het vertalen van je thema (er breekt overigens niks als je geen gebruik maakt van vertalingen en het zo laat staan).
Met behulp van de $step (array) waarden kun je de tekst die per stap wordt weergegeven personaliseren als je dit wil. Hetzelfde geldt voor de $classes (array) die bij de verschillende stappen (geweest, huidig en toekomst) worden gebruikt.
De classes die zijn gebruikt, komen uit Bootstrap 4. Voor de iconen bij de stappen zijn classes van FontAwesome 5 (Free) gebruikt.
