Tien Code Snippets voor WooCommerce

In de Snippet base van WordXPression vind je tientallen interessante code snippets voor WooCommerce en WordPress. In dit blogartikel wil ik een tiental WooCommerce specifieke snippets graag onder je aandacht brengen.

Maar allereerst, waarom Code Snippets, waarom geen plugins?

Je vraagt je wellicht af, waarom er zoveel aandacht wordt besteed aan code snippets voor WooCommerce, waarom geen plugin gebruiken?

Daar is een aantal goede redenen voor. De belangrijkste reden is misschien wel, dat jij als webwinkelier bepaalde ideeën hebt die gewoon heel goed zijn, maar toch wel wat ongebruikelijk. De kans dat er dan een plugin bestaat die precies doet wat je wilt is heel klein. Een aardig voorbeeld is een klant die wilde dat zijn webshop op zondag is gesloten. Daar zal je niet zo snel een plugin voor vinden, maar met enkele stukjes PHP code is dat toch heel goed te realiseren.

Een tweede goede reden is dat plugins je site vertragen. Wanneer ik een drietal kleine wijzigingen in mijn webshop wil, is er een redelijke kans, dat ik dat niet allemaal in één plugin kan vinden, en ik er drie verschillende nodig heb. De kans is ook groot, dat die drie verschillende plugins ook functionaliteit bevatten die we niet gebruiken, maar die toch altijd mee geladen wordt, wanneer we onze pagina laden.

En een derde reden is om bepaalde onhebbelijkheden van WooCommerce te omzeilen.

Zijn code snippets altijd de beste oplossing?

Of een code snippet voor WooCommerce ‘de beste’ oplossing is, is sterk afhankelijk van het gebruik. Een aardig voorbeeld is mijn code snippet voor het selectief tonen van een ‘bestel en ontvang het morgen’ badge. Wanneer de tabel voor de dagen dat deze badge wel of niet getoond moet worden statisch is -zoals in ons voorbeeld- dan is dit prima als code snippet op te lossen. Heb je meer specifieke wensen (die ook in de toelichting bij de code snippet worden besproken), dan is het beter om een maatwerk plugin te (laten) ontwikkelen.

In sommige snippets zie je ook code waarbij de ID van een product hard gecodeerd is, omdat die specifieke situatie alleen voor één product zou gelden. Wil je eenzelfde functionaliteit voor een selectie van producten, ook dan is het beter om de functionaliteit in een plugin onder te brengen.

Wil je advies over wat in jouw situatie het beste is, kan je natuurlijk altijd contact opnemen.

1. Tabbladen onder elkaar zetten

WooCommerce heeft standaard een aantal tabbladen. Of tabbladen nu handig zijn of niet, daarover valt te discussiëren, maar wat mij wel opvalt, is dat vrijwel geen van de grote, succesvolle webwinkels tabbladen gebruikt. Wil jij van die tabbladen af, dan kan je dat prima doen met deze code snippet.

2. De prijs van variabele producten psychologisch aantrekkelijker maken

WooCommerce laat standaard productprijzen van variabele producten zien in het formaat ‘€ 100 – € 500’. Het presenteren van een maximum prijs heeft psychologisch echter een negatief effect. Het werkt veel beter om een ‘vanaf’ prijs te tonen. Ondanks dat de prijzen nog steeds hetzelfde zijn, zal de bezoeker eerder tot kopen geneigd zijn.

3. De checkout velden in WooCommerce aanpassen

Eigenlijk zijn dit drie code snippets voor WooCommerce. De eerste code snippet laat je zien, hoe je checkout velden kan verwijderen, de tweede toont hoe je velden wel of niet verplicht kan maken, en de derde code snippet hoe je ze toe kan voegen. Deze drie snippets bij elkaar geven je alle controle over je checkout page, zonder dat je in een extra plugin hoeft te investeren.

Handig toch?

4. De WooCommerce product titel inkorten

Eén van de belangrijkste oorzaken die ervoor zorgt, dat je winkelpagina er ‘rommelig’ uitziet, is wanneer je product titels van ongelijke lengte hebt. Komt een titel over de lengte van één regel, dan gaat hij op de volgende regel verder.

In deze code snippets over de lengte van een titel worden drie methoden besproken om je producttitel in te korten.

5. Laat zien of een product al in de winkelwagen is

Wat ik bij mijn eigen webshops nogal eens zie, is dat mensen tweemaal een product in de winkelwagen doen, zonder dat dit echt de bedoeling was. Zoiets wil je natuurlijk voorkomen. Want als dit bij een grote bestelling niet opvalt, heb je de kans dat na ontvangst de klant het toch alsnog wilt retourneren.

Een goede manier om dit te voorkomen is de tekst op de ‘add to cart’ knop te veranderen, indien een product al in de winkelwagen is. En hoe je dat doet, zie je in dit eenvoudig voorbeeld.

6. ‘Gratis verzending’ als enige optie tonen!

Dit is een goed voorbeeld van één van die ‘onhebbelijkheden’ van WooCommerce. Want wanneer jij gratis verzending aanbiedt, dan gaat WooCommerce daar toch heel vreemd mee om. In een combinatie van een uitgebreide blogpost en een code snippet wordt haarfijn uitgelegd, hoe je dit probleem oplost.

Wist je overigens, dat de code snippet over gratis verzending de meest geraadpleegde snippet in the snippet base is?

7. Prijzen verbergen voor niet ingelogde gebruikers

Wanneer je een webshop hebt die levert aan een exclusief publiek, bijvoorbeeld alleen leden van een club, groothandel of iets vergelijkbaars, dan wil je niet dat iedereen jouw prijzen kan zien. Om dat te voorkomen, kan je deze snippet goed gebruiken.

8. WooCommerce redirect na de aankoop van een specifiek product

De code die je hier ziet, is zo’n typisch voorbeeld van ‘een snippet is goed, wanneer het voor een klein aantal producten is, slecht voor een groter aantal’.

Maar wanneer je na de aankoop van een product iemand door wilt leiden naar een andere URL, bijvoorbeeld een upsell, of een pagina om nog aanvullende informatie in te vullen, dan is deze code goed bruikbaar.

Tenzij het gaat om een groot aantal producten, of wanneer je de pagina waarheen omgeleid moet worden regelmatig wilt veranderen.

9. Totaalprijs tonen op een WooCommerce single Product Page

En dit is weer zo’n prachtig voorbeeld van een ‘onhebbelijkheid van WooCommerce’. In talloze webshops zal wanneer je een aantal artikelen in je winkelmand doet, getoond worden wat de totaalprijs is. WooCommerce doet dat niet!

Natuurlijk, in je winkelwagen en de check out pagina krijg je dat allemaal netjes te zien, maar op de product pagina zelf, zie jij daar niets van.

Met de code snippet hier, werkt het allemaal wel!

10. Een dynamische ‘bestel en ontvang morgen’ badge

Lever jij daags na de bestelling? Dan is dat goed dit op je product pagina aan te geven. Er is echter een aantal dagen, waarop het onmogelijk is te leveren. En met de code in deze code snippet voor WooCommerce zorg je ervoor, dat de dag voor deze ‘niet bezorg dagen’ de vermelding ‘Bestel en ontvang morgen‘ niet getoond wordt.

Dit is een vrij uitgebreid voorbeeld wat ook in detail wordt besproken.

Hoe voeg ik nu zo’n ‘code snippet’ toe?

Laat me je eerst vertellen hoe je zo’n ‘code snippet’ beslist niet toe moet voegen. Wanneer je een code snippet toevoegt met een plugin als Code Snippets, een plugin die overigens op zichzelf heel goed is, stel je je website bloot aan een heel groot gevaar. Heb je namelijk ook maar één plugin geïnstalleerd staan die jouw site blootstelt aan ‘SQL Injection’, kan een kwaadwillende partij code injecteren in de database, die door middel van de ‘Code Snippets’ plugin uitgevoerd kan worden.

Het opslaan van PHP code in de database is beslist op alle manieren compleet af te raden. Laat daar geen twijfel over bestaan!

De verschillende manieren waarop je dit wel veilig kan doen heb ik besproken in mijn blogartikel over code snippets voor WordPress.

Zie je hier, of in de snippet base, code snippets voor WooCommerce die jij graag toegepast zou zien op jouw eigen WooCommerce website, bedenk dan dat het wellicht voordeliger is dan je denkt om dit voor jou uit te laten voeren. De WordXPression Support Strippenkaart is hiervoor een prima oplossing.

Ook wanneer de code ‘ongeveer biedt’ wat je zoekt, maar je het toch net iets anders wilt hebben, dan ben je welkom om eventueel maatwerk te bespreken. Neem gewoon even contact op!

WordPress Developer worden?

Wat heb je nodig om niet alleen code snippets over te kunnen tikken, maar ook je eigen code snippets te kunnen ontwikkelen? Of je eigen plugins, je eigen thema’s?

In mijn blogpost een WordPress Developer worden, wat is daarvoor nodig? heb ik het één en ander op een rijtje gezet. En als je nog niet hebt, wat daarvoor nodig is, is mijn cursus WordPress Developer een snelle shortcut om dat doel te bereiken!

Blijf bij

De WordXPression blog is één van de meest bezochte blogs op het gebied van WordPress, e-Commerce en e-Learning in het Nederlands taalgebied. Zorg dat je geen bericht meer mist en schrijf je in voor de nieuwsbrief, of meld je aan voor browser updates door op de bel linksonder in je scherm te klikken en de instructies te volgen.