Meer conversie: We breken de WooCommerce tabbladen open

Zonder WooCommerce tabbladen meer conversie?

In het eerste artikel in deze reeks heb ik je laten zien hoe je door informatie te verbergen je webshop omzet kan verhogen. En vandaag gaan we hiermee verder. Maar we doen eigenlijk precies het omgekeerde: We gaan informatie die WooCommerce verborgen laat zichtbaar maken.

Wat we namelijk gaan doen is het ‘openbreken’ van de WooCommerce tabbladen.

Standaard laat WooCommerce drie onderdelen van de informatie zien onder de tabbladen. De productomschrijving, de extra informatie en de reviews. En met name dat laatste onderdeel is best wel ‘schadelijk’ voor de conversie van je webshop.

Uit eigen onderzoek met A/B testen voor een klant bleek, dat na het aanpassen van de product pagina, waarbij de reviews voortaan onder de product omschrijving worden geplaatst, de bezoeker tot 20% meer (afhankelijk van de aard van de reviews) geneigd was een product in het winkelwagentje te plaatsen.

Nu gaat het te ver om in detail te vertellen hoe je zonder Elementor Pro je productpresentatie zo aan kan passen, dat je de tabbladen als het ware ‘openbreekt’, omdat hier aardig wat programmeerwerk bij aan te pas komt. Wanneer je zelf geen ervaring met WordPress, WooCommerce en PHP programmeren hebt, is dat ook iets wat je beter aan een vakman over kan laten.

Maar wanneer je met Elementor Pro werkt, is er wel iets aan handwerk nodig, maar het grootste deel van het werk kan je gewoon met de Elementor widgets doen.

Je tabbladen

Standaard zijn er WooCommerce tabbladen. Dit aantal kan eventueel worden uitgebreid door het gebruik van extra plugins. Er zijn diverse plugins waarmee je ‘maatwerk tabbladen’ aan je site toe kan voegen. Heb je bijvoorbeeld een T-Shirt shop en gebruik je Printful, dan zal de Printful plugin een tab met de maattabellen toevoegen aan je product.

In dit artikel gaan we niet in op de vele mogelijkheden die je hebt om informatie onder andere dan de standaard tab pagina’s zichtbaar te maken. In het laatste artikel in deze serie zal ik daar echter wel wat nader op ingaan. Vandaag kijken we uitsluitend naar de standaard informatie onder de tabs.

Uitgebreide productomschrijving

Onder de eerste tab vind je de uitgebreide productomschrijving. WooCommerce kent twee productomschrijvingen: De korte en de uitgebreide. Deze uitgebreide omschrijving is de ‘standaard omschrijving’ die je invult bij het ingeven van de productinformatie.

De korte omschrijving staat in een kleiner blok lager op de editor pagina voor het product.

Bij de meeste thema’s zal deze korte beschrijving getoond worden naast de productfoto, onder of boven de productprijs. De langere omschrijving vind je lager op de pagina. Onder het eerste van de WooCommerce tabbladen.

Extra informatie

Wanneer er geen extra informatie is, zal deze tab niet voorkomen, maar zodra deze er wel is, vind je onder deze tab ‘extra informatie’.

Ok, dat klinkt logisch, maar je wilt natuurlijk ook graag weten welke informatie dit is.

Maak je gebruik van afmetingen en gewicht van je producten en vul je dit ook in, dan zal je deze informatie hier aantreffen. Ook informatie die je door middel van ‘Product eigenschappen‘ toevoegt, komen hier te staan.

Een extra hint met betrekking tot product eigenschappen

Wanneer je een product hebt met een groot aantal verschillende eigenschappen, dan kan de presentatie van die informatie behoorlijk onoverzichtelijk worden.

Je zou de eigenschappen graag eigenlijk willen kunnen groeperen / categoriseren. De ‘WooCommerce Group Attributes‘ plugin kan je daarbij helpen. In de nabije toekomst zal deze plugin nader worden besproken.

Beoordelingen / Reviews

En onder het derde tabblad vinden we de mogelijkheid om reviews / product beoordelingen achter te laten.

Elementor Pro en de WooCommerce tabbladen

Op het moment dat ik dit schrijf heeft Elementor Pro één heel naar probleempje. Alle informatie die je in WooCommerce onder de tabbladen vindt is ook als een aparte widget beschikbaar… behalve de informatie onder je review / beoordelingen tabblad.

En dat is eigenlijk behoorlijk irritant.

Vind jij ook dat er een WooCommerce widget zou moeten komen voor de product reviews, dan nodig ik je van harte uit om voor deze uitbreiding van features te stemmen op GitHub. Het is voldoende om een account aan te maken (als je dat nog niet hebt) en ‘+1’ in een commentaar toe te voegen. Als er voldoende ‘+1’-en komen, is er een grote kans, dat deze widget snel zal worden toegevoegd.

Maar tot die tijd zal je je moeten behelpen met een stuk je ‘eigen code’.

Een shortcode maken om de review informatie toe te voegen

We kunnen echter een eigen shortcode maken. Enkele jaren terug heb ik je uitgelegd hoe je zelf code aan WooCommerce kan toevoegen. Welke methode om zelf code toe te voegen je ook kiest, voeg aan jouw ‘eigen code’ het volgende fragment toe :

add_shortcode('wxp_reviews','wxp_show_reviews');

function wxp_show_reviews() {
	ob_start();
	comments_template();
	$buffer = ob_get_contents();
	ob_end_clean();
	return $buffer;
		
}

Vervang eventueel de ‘wxp_’ prefix door je eigen prefix. En vergeet vooral niet: Doe dit nooit op een live site!

Wat doet deze code?

Je hoeft deze code niet te begrijpen, maar als je het wel wilt, dan kan je hieronder verder lezen. Interesseert het je weinig, ga dan gewoon door naar de volgende koptekst.

De regel ‘add shortcode’ geeft aan, dat wanneer de shortcode wxp_reviews wordt gebruikt, de functie wxp_show_reviews uit moet worden gevoerd. En die functie doet het volgende :

ob_start()
De functie ob_start() die activeert de output buffering. De functie die volgt (comments_template()) die wil de uitvoer direct naar het scherm sturen. Maar dat willen we niet, we willen dit via een variabele teruggeven, zodat de functie ‘netjes werkt’.

comments_template()
Deze functie haalt het ‘commentaar template’ voor WooCommerce voor het betreffende thema op en toont de uitvoer hiervan. Omdat we net iets eerder de uitvoer hebben gebufferd, zal dit echter niet gebeuren.

$buffer = ob_get_contents()
En hier halen we de inhoud van de output buffer op en kennen die toe aan de variabele $buffer

De rest van de code is het opruimen van de buffers en het teruggeven van de inhoud van de variabele $buffer.

De shortcode

We hebben nu dus een shortcode gemaakt die we aan kunnen roepen met [wxp_reviews]. Je hoeft er verder geen parameters aan mee te geven. Plaatsen we deze in een ‘shortcode’ widget van Elementor, dan krijgen we op die plaats de inhoud van de shortcode te zien.

Het nadeel van deze methode is, dat de inhoud die je hier te zien krijgt direct door het thema wordt bepaald, niet door Elementor. Je zal zelf dus aan de slag moeten gaan met CSS om het font, lettergrootten en kleuren aan te passen aan de stijl van je website.

De product omschrijving

De product omschrijving gaat gelukkig iets makkelijker. Hiervoor is direct een Elementor Widget beschikbaar die je kan gebruiken.

De ‘Extra informatie’

En ook de extra informatie levert geen enkel probleem op, omdat ook hiervoor direct een widget beschikbaar is.

En nu verder…

Vorige keer hebben we gekeken hoe we meer conversie krijgen door het verbergen van informatie… en deze keer hoe we juist meer conversie krijgen, door verborgen informatie te tonen.

De volgende keer kijken we hoe we ervoor zorgen, dat deze twee tegenstrijdige handelingen elkaar gaan ondersteunen.

Bovendien krijg je dan nog een aantal extra tips om je productpagina’s te verbeteren.

Meer halen uit je webshop?

Wil je meer halen uit je webshop? Tijdens de cursus ‘WooCommerce in Detail‘ krijg je daar alle gelegenheid voor!