Een mooiere etalage in je webwinkel – De WooCommerce Shop page Pimpen

Doe je de WooCommerce Shop Page sterk kan verbeteren.

Wanneer je WooCommerce installeert dan is één van de pagina’s doe een grote uitdaging kan vormen de zogenaamde ‘Shop page’, de pagina waarop de producten worden getoond. Want het is tegenwoordig norm, dat producten het liefst in een matrix overzicht getoond worden (dit in contrast met een zogenaamd lijst overzicht). Maar of zo’n matrix ook ‘mooi’ wordt  is sterk afhankelijk van de informatie die wij zo graag kwijt willen in dit overzicht.

Wat je bijvoorbeeld het liefst wilt hebben, is dat alle ‘In Winkelmand’ knoppen allemaal op dezelfde hoogte komen te staan.

Enkele regels voor een mooi overzicht

1. Niet te kleine afbeeldingen

Wil je dit overzicht in je webwinkel er goed uit laten zien zal je in ieder geval rekening moeten houden met een aantal regels. De belangrijkste regel is wel, dat je gebruik moet maken van afbeeldingen die in ieder geval groot genoeg zijn. WooCommerce gaat namelijk niet proberen jouw afbeeldingen te vergroten, is een afbeelding te klein, dan wordt automatisch ook het vak wat hij ‘inneemt’ kleiner… en leidt dit tot een behoorlijk lelijk overzicht.

2. Alle afbeeldingen in eenzelfde beeldverhouding

Een tweede randvoorwaarde om een mooie ‘Shop’ pagina te krijgen is alle afbeeldingen in zelfde beeldverhoudingen te gebruiken. Even grote afbeeldingen is minder belangrijk, want WordPress maakt sowieso verschillende grootten van afbeeldingen aan, maar zorg dat -afhankelijk van je gewenste ‘uiterlijk’- al je afbeeldingen in eenzelfde formaat beeldverhouding zijn. De meest wenselijke verhoudingen (breedte:hoogte) zijn 16:9, 7:5, 4:3, 3:2, 1:1, 2:3, 3:4 of 5:7. De verhouding 9:16 is niet gangbaar. Het is net iets te ‘lang’ om echt mooi te zijn.

3. Alle titelgebieden even hoog

Een andere oorzaak van lelijke product overzichten is een ongelijke hoogte van titels. ‘Vijfkleurige dames jeans met goud en zilveren knopen’ neemt nu eenmaal meer plaats in dan ‘Stropdas – grijs’. Dit is eenvoudig op te lossen door het gebied waar de titel van het product staat door middel van CSS een  vaste hoogte te geven. Weet je niet waar ik het over heb, dan moet je gewoon contact opnemen met je webbouwer. Ben je dat zelf, en weet je nog steeds niet waar ik het over heb, kan je natuurlijk altijd door middel van een strippenkaart extra ondersteuning krijgen.

4. Alle omschrijvingen even hoog, of de omschrijvingen weg laten

Met de omschrijving bij het product is eigenlijk hetzelfde aan de hand. De meeste thema’s laten geen omschrijving zien in het productoverzicht, en als dat het geval is, is er natuurlijk geen vuiltje aan de lucht. Laten ze dit wel zien, dan geldt eigenlijk hetzelfde als onder punt 3… vraag het je webbouwer om aan te passen, of bij gebrek hieraan, roep hulp van een derde partij in.

Wanneer je nog meer wilt om je overzicht te verfraaien

De shop page van je webwinkel is als het ware je etalage. Je moet het belang hiervan niet onderschatten. Wanneer deze etalage onaantrekkelijk wordt gevonden, heeft dit een directe weerslag op je verkoopcijfers. Wanneer je deze aantrekkelijker maakt ook!

En onlangs liep ik toevallig tegen een product aan, wat hier wel heel erg goed voor is. Product loops for WooCommerce neemt namelijk de controle van WooCommerce zelf over voor het tonen van de productoverzichten. In plaats van voor de standaard manier waarop jouw thema je product toont kan je kiezen tussen een groot aantal templates die je bovendien heel makkelijk in stijl aan kan passen.

Het is bovendien mogelijk om voor bijvoorbeeld je upsells, crosssels of favoriete producten een andere template en stijl te kiezen van voor je standaard winkeloverzicht. Je kan zelfs per productcategorie of per tag een ander soort overzicht maken. Dat kan bijvoorbeeld handig zijn, wanneer één productcategorie (kleding bijvoorbeeld) zich beter presenteert in staande foto’s en een ander categorie (computer hardware) er beter uit ziet op liggende.

Met andere woorden, een plugin die het zeker waard is eens te onderzoeken wanneer je niet tevreden bent over je huidige productpresentatie.

Onderschat het uiterlijk niet!

Onderschat het belang van een goede presentatie van je producten in een webwinkel niet. Product Loops for WooCommerce is één van die plugins waardoor je met een kleine investering mogelijk een veel hogere conversie kan behalen.

Wil je meer weten over het verhogen van de conversie van je webwinkel? Dan is WooCommerce in Detail zeker iets voor jou. In deze tweedaagse training leer je hoe je jouw webwinkel voor verkoop kan optimaliseren.