Zeven dingen die je aan jouw WooCommerce Webshop verbeteren kan
Je WooCommerce Webshop verbeteren zonder plugins
In deze blogpost wil ik het nu eens niet over WooCommerce plugins hebben, maar juist over manieren om die WooCommerce plugins te voorkomen. Want laten we wel zijn… WooCommerce is prachtig, maar er is veel aan te verbeteren. En daar hebben we gelukkig geweldige plugins voor, maar plugins hebben één nadeel. Ze vertragen je website.
En met name wanneer het gaat om kleine puntjes, is het eigenlijk de moeite niet waard om hier plugins voor te gebruiken, maar hiervoor zogenaamde ‘code snippets’ te implementeren. Een ‘code snippet’ is een klein stukje code, wat je binnen je website gebruikt en waardoor het gedrag van je website wordt aangepast.
Het gebruik van snippets is niet zonder risico, en voor je hieraan begint wil ik je in ieder geval wijzen op dit blogartikel over Code snippets voor WordPress, waar de kracht, maar ook de gevaren hiervan uitgebreid worden besproken.
Maar in deze blogpost wil ik me specifiek concentreren op een aantal zaken die je aan WooCommerce kan verbeteren, zonder hiervoor een speciale plugin te moeten installeren.
1. De WooCommerce tabbladen onder elkaar zetten.
Ik heb meer dan eens aangegeven, dat de WooCommerce ’tabbladen’ een gigantische conversiekiller zijn. Je hoeft maar naar de sites van de grote merken te kijken en je merkt al, dat geen van hen ’tabbladen’ gebruikt.
Toen WooCommerce in 2011 uitkwam, waren ’tabbladen’ net nieuw en het zag er toch wel heel gelikt en modern uit, wanneer je ’tabbladen’ kon tonen. Waar dan ook.
Nu, 11 jaar later, weten we inmiddels wel, dat tabbladen behoorlijk irritant kunnen zijn. Vooral wanneer je deze vanaf een telefoon moet ‘bedienen’. Maar de wijze mensen achter Woo hebben in hun oneindige wijsheid besloten, dat tabbladen toch wel cool zijn.
Als je het met mij eens bent, dat dit absoluut niet het geval is, moet je zeker dit stukje over ‘hoe je van tabbladen af kan komen’ eens lezen.
2. Voorkom een rommelige opsomming van producten
Een ander veel voorkomend probleem met WooCommerce is dat in een matrix overzicht van de producten, die matrix er toch wel heel rommelig uitziet. De belangrijkste reden is dat de knoppen niet onder elkaar staan, omdat de titels niet even lang zijn.
Wil je je WooCommerce webshop verbeteren? Eén oplossing is de ruimte gereserveerd voor de titel in hoogte te vergroten. Hierdoor krijg je in principe wel meer witruimte onder sommige titels, maar dat is minder storend dan ‘add to cart’ knoppen die niet op één rij staan.
Maar dat werkt, totdat een nieuwe titel net te lang wordt.
3. Haal overbodige velden weg uit je check out formulier
Vrijwel iedere WooCommerce installatie heeft twee velden teveel: De ’tweede adresregel’ en de ‘staat’. Maar niet alleen dat, ook wil je soms velden die WooCommerce verplicht stelt, niet verplicht stellen of omgekeerd. Of je komt velden te kort in je bestelformulier, en je zou graag een veld toe willen voegen. Wil je je Woocommerce webshop verbeteren, zorg er dan voor, dat alleen de velden die ertoe doen verplicht ingevuld hoeven te worden,.
Gelukkig zijn er voor WooCommerce verschillende plugins, waarmee je makkelijk velden toe kan voegen, verwijderen of veranderen. Maar dat is weer een extra plugin.
Nog veel gelukkiger dus, dat ik code snippers voor jou heb om
- Checkout velden te verwijderen
- Velden al dan niet verplicht te maken
- Nieuwe velden aan het bestel formulier toe te voegen
4. Er schort wat aan de presentatie van de prijs van variabele producten
Wist je dat er iets goed mis is met de manier waarop de prijzen van variabele producten in WooCommerce worden getoond?
Om je er eerst nog even aan te herinneren, wat nu eigenlijk ‘variabele producten’ zijn. Variabele producten zijn producten die je eigenlijk als één product wilt tonen, maar op de achtergrond toch eigenlijk verschillende producten zijn. Een aardig voorbeeld is een kledingstuk. Bijvoorbeeld een T-Shirt.
Stel, ik verkoop T-Shirts. En die T-Shirts heb ik in zes verschillende maten, vier verschillende kleuren. Wanneer ik voor al die combinatiemogelijkheden een apart product aan zou maken, dan zou ik vierentwintig verschillende producten krijgen. Dat is niet echt praktisch. Daarom laten webwinkels normaliter één product zien, en geven maat en kleur als ‘opties’ voor het product.
Soms is het zo, dat grotere maten wat duurder zijn dan kleinere maten. Wat WooCommerce in zo’n geval bijvoorbeeld laat zien als prijs is € 24,00 – € 32,00. Psychologisch gezien niet zo’n goed idee. Want als je dat leest, dan blijft die 32 in je geest hangen, niet die 24.
Beter is om de prijs te tonen als Vanaf € 24,00. Dat vinden we gelijk een stuk prettiger klinken.
En met deze code snippet voor WooCommerce kan je dat makkelijk realiseren.
5. Maak duidelijk wanneer een product niet op voorraad is
Eén van de andere onhebbelijkheden van WooCommerce is dat je in het matrix overzicht niet kan zien, of een product nu wel of niet op voorraad is. Het is waarschijnlijk al veel mensen overkomen, dat ze klikken op een ‘add to cart’ button en pas dan de melding krijgen, dat het product (tijdelijk) niet leverbaar is.
Behoorlijk frustrerend. Wil je je WooCommerce webshop verbeteren, maar dan direct duidelijk wanneer je even geen voorraad meer hebt van het product. Bijvoorbeeld door het gewoon op de ‘Add to cart’ button te vermelden.
6. Laat zien wanneer een product al in de winkelwagen is
Om te voorkomen, dat iemand per ongeluk tweemaal een product in de winkelwagen plaatst, kan het een goed idee zijn om -indien iemand een product bekijkt wat al in de winkelwagen is- dit te melden op de ‘Add to Cart’ knop. En met dit codefragment is dat een fluitje van een cent.
7. De ‘SKU’ verbergen
SKU staat voor Stock Keeping Unit en is een code die je kan gebruiken om te refereren naar jouw producten. Er zijn echter genoeg webshops die hier geen gebruik van maken. Afhankelijk van het thema wat je gebruikt, is het mogelijk dat wanneer je dit niet gebruikt, er toch iets komt te staan. ‘Artikelnummer: Niet beschikbaar’ ziet er toch niet echt fraai uit.
Gelukkig heb ik voor jou een code snippet om de SKU te verbergen.
Je WooCommerce website verbeteren is een peulenschil geworden!
Met deze zeven tips en de bijbehorende code snippets is het verbeteren van je WooCommerce website werkelijk een peulenschil geworden. Mocht je desondanks het zelf allemaal niet zien zitten, om met code in je website te gaan werken, dan kan je dit natuurlijk ook altijd nog laten doen. Met de WordXPression Support Strippenkaart is dat zonder meer mogelijk.
Wist je trouwens dat er aan de WordXPression Snippet Base regelmatig nieuwe code snippets worden toegevoegd? Blijf deze dus in de gaten houden!
Starten met een Webshop?
Wil je starten met een webshop? Dan heb ik twee bijzondere aanbiedingen voor je. Als eerste de online cursus ‘Bouw Zelf je Webshop met Elementor Pro‘. Volg je liever een live cursus inclusief een voorgeinstalleerde webshop, dan moet je ook eens kijken naar de cursus ‘Starten met WooCommerce‘
Nog niet uitgelezen?
Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.
