Redesign webshop WooCommerce

Al langere tijd mogen wij het webshoponderhoud verzorgen voor Zwaanzinnig.shop, een online webshop voor exclusief handgemaakt aardewerk servies. Afgelopen maanden waren er veel problemen met diverse onderdelen van de bestaande webshop. Deze liepen zo ver op dat besloten is om de webshop te redesignen met behoud van de bestaande producten.

De problemen waren onder andere dat de productafbeeldingen random niet getoond werden en dat de checkout regelmatig niet meer functioneerde. Dit probleem was ook duidelijk te herkennen in het aantal conversies in de webshop over de afgelopen maanden. Tijd voor actie dus.

Uiteraard was er een wensenlijst dat doorgevoerd moest worden bij het redesign om de webshop nog beter te maken. Hierover zul je onder andere in deze blog meer lezen.

De basis van de webshop

Hij is al eerder voorbij gekomen in onze blogs: bij een huis begin je ook niet met dakpannen leggen, je start met een stevige basis. Om de oude problemen te tackelen en niet meer terug te krijgen is besloten om de webshop vanaf de grond opnieuw op te bouwen. Dus een standaard WordPress installatie op een bouwlocatie met daarbij een aantal plugins om bepaalde functionaliteiten mogelijk te maken.

Als basis is gekozen voor het Flatsome theme. Dit hebben wij afgelopen tijd regelmatig ingezet voor andere projecten en is wat ons betreft een fijn thema voor WooCommerce om als basis in te zetten. In ieder geval paste dit het beste bij de nieuwe webshop voor Zwaanzinnig en het design dat hiervoor gewenst was, dat moest aansluiten bij de Zweedse producent van de artikelen.

Daarnaast hebben wij voor de basis gebruik gemaakt van een aantal plugins die we eigenlijk standaard installeren in een WooCommerce webshop. Dit zijn onder andere:

  • Gravity Forms;
  • Ajax Search Pro voor een optimale zoekfunctie in de webshop;
  • Myparcel voor het aanmelden van bestellingen bij PostNL; en
  • WordPress Multi Language voor het meertalig aanbieden van de webshop

De laatste is uiteraard alleen standaard als meertaligheid gewenst is en dit de best passende oplossing hiervoor is.

Een ander belangrijk onderdeel van de basis is het optimaliseren van de afbeeldingen. Als eerste hebben wij alle afbeeldingen in hetzelfde formaat gemaakt zodat ze netjes in dezelfde grootte en verhouding getoond worden (hierover later nog meer).

Naast de basis zit er een aantal specifieke plugins in die gewenste functionaliteit mogelijk maken, met in veel gevallen nog een stuk maatwerk.

Variabele producten enkelvoudig weergeven in de shop

De producten van Zwaanzinnig zijn allemaal als variabele producten geïmporteerd vanuit een CSV-bestand met WP All Import. Maar zoals hieronder beschreven moest er ook een optie in komen om te filteren op kleur. Dit is lastig als er bijvoorbeeld een gele variatie is maar je ziet deze niet in het overzicht terugkomen.

Daarom is ervoor gekozen om van alle variaties alle producten als enkelvoudig product te tonen. De klant hoeft dus alleen de variabele producten te onderhouden/bijwerken maar een bezoeker ziet alle producten uit de variaties die er zijn. Om de shop aantrekkelijk te houden is de volgorde willekeurig ingesteld zodat je niet acht dezelfde borden of mokken in dezelfde kleur naast elkaar ziet staan in het shopoverzicht.

Enkelvoudige producten WooCommerce variaties tonen

Variabele producten enkelvoudig getoond in WooCommerce overzicht

De shop is dus opgebouwd met variabele producten, maar alle variaties worden los getoond in het productoverzicht.

Hoofdmenu met Ubermenu

In een webshop word er vaak gebruik gemaakt van een zogenaamd megamenu. Hiermee kun je als je met je muis over een item heengaat een groter menu uitklappen met bijvoorbeeld alle productcategoriëen. Dit kan een meerwaarde zijn als je een groot assortiment hebt.

In deze webshop hebben wij ook gekozen voor een megamenu als je met je muis over het shop item in het hoofdmenu heen gaat. Gezien het aantal beschikbare categorieën en het design van de shop hebben we hier per productcategorie een afbeelding aan toegevoegd.

Megamenu WooCommerce webshop

Megamenu WooCommerce met afbeeldingen

Ook in dit geval is ervoor gekozen om alleen de belangrijkste items in het hoofdmenu te zetten en hiernaast een topbar-menu bovenaan de pagina te gebruiken voor de overige links. Hierdoor hebben we het hoofdmenu kunnen beperken tot vijf items.

Productfilter op maat gemaakt in de webshop

In iedere webshop is het uiteraard van belang dat er gemakkelijk gefilterd kan worden tot het juiste product getoond wordt. In het geval van Zwaanzinnig.shop hebben wij een horizontale selectiebalk gemaakt op de homepage en bovenaan de shop pagina waar je eenvoudig kunt selecteren op categorie, collectie en kleur.

WooCommerce product Filter op maat

Uit de historie is gebleken dat dit de zaken zij waar het meest op gefilterd wordt, dus het was een harde eis dat dit eenvoudig te gebruiken was. Het eindresultaat zijn drie dropdown-menu’s waarin dit mogelijk is.

Script voor resizen productfoto’s

De productfoto’s zijn zoals eerder geschreven door ons op maat gemaakt buiten de webshop om en vervolgens bij de import van de producten meegenomen bij alle variaties. Iedere variatie heeft een unieke afbeelding met een eigen kleur.

Het probleem dat ontstond was dat verhoudingen op een productfoto niet of nauwelijks weer te geven zijn. Je zou dan een ander voorwerp mee moeten nemen in de productfotografie om het aan te tonen.

Er is gebruik gemaakt van een maatwerk script waarmee de klant aan de achterkant van de webshop aan kan geven op hoeveel procent een productfoto geschaald moet worden. Hiermee is dus eenvoudig het verschil aan te duiden tussen een bord van bijvoorbeeld 41 centimeter en een espressokopje van een aantal centimeters die naast elkaar op de shop overzichtspagina getoond worden.

Kleurselectie bij een product

Als je bekend bent met WooCommerce en gebruikmaakt van variabele producten, zul je ook weten dat er standaard voor de selectie van een variatie een dropdown-menu getoond wordt naast een product. Dit is soms een prima manier om een keuze aan te bieden, maar in het geval van specifieke kleuren of maten kan het beter zijn om deze dropdown te vervangen voor een meer visuele oplossing.

Bij Zwaanzinnig is gekozen om een selectie van de kleuren aan te bieden in de vorm van een gekleurde cirkel. Alle variaties tonen direct de juiste kleur in de cirkel. In het geval van verschillende maten in bijvoorbeeld kleding kun je in plaats van de kleur de maat weergeven.

Kleurselectie visueel WooCommerce

Om niet bij ieder product apart alle kleuren een afbeelding te moeten geven is er gekozen voor een globale instelling die voor de hele webshop tegelijk aan te passen is voor de eindgebruikers van de webshop.

Globale informatie per product

De wens van de klant was om bij alle producten de informatie weer te geven over de verzorging en over het ontstaan van de producten. Wij hebben hiervoor gebruik gemaakt van de standaard tabs van WooCommerce met extra informatie. Deze hebben we omgebouwd zodat ze standaard verborgen zijn en met een klik op de plus zichtbaar worden. Gekoppeld met JavaScript worden de tabs naar wens geactiveerd.

Extra contentblokken WooCommerce

Om de content te plaatsen is er gebruik gemaakt van de globale blokken die Flatsome standaard aanbiedt. Dit is gedaan zodat ook deze informatie indien nodig eenvoudig aan te passen is voor de klant. Naast het bouwen van een conversiegerichte WooCommerce webshop die ook gebruiksvriendelijk is, vinden wij het belangrijk dat het voor onze klanten eenvoudig is om zelf ook zaken aan te kunnen passen, zeker op het gebied van content.

Permalinks in de webshop

Als je bekend bent met WordPress of WooCommerce dan ken je vast de term permalinks. En dan weet je ook dat de standaard structuur die door WordPress gemaakt wordt niet optimaal is voor je vindbaarheid. (Alles over de vindbaarheid van je webshop lees je meteen hier).

In de webshop van Zwaanzinnig hebben wij om bepaalde opties mogelijk te maken -zoals het groeperen van de collecties- gebruik gemaakt van producttags. De standaard url-structuur van WooCommerce voor producttags is http://webshop.nl/product-tag/gele-borden Aangezien Google van links naar rechts leest is het dus belangrijk dat je zoekterm, in dit geval ‘gele borden’ zover mogelijk vooraan staat. Daarom hebben wij de url-structuur zo omgebouwd dat het woord ‘product-tag’ niet in de url aanwezig is.

Hetzelfde geldt voor /category/ en /product/ voor de categorieën en de enkelvoudige producten. Ook de recepten en nieuwsberichten zijn ontdaan van de categorieterm in de url.

Hosting voor een WooCommerce webshop

In eerste instantie is de webshop live gezet bij een andere provider dan onze eigen hostingprovider. Al snel bleek dat door alle koppelingen en aanpassingen de webshop niet goed draaide op de bestaande hosting. Om deze reden is de webshop kort na livegang overgezet naar onze eigen hosting en verder geoptimaliseerd qua snelheid.

Waarom draaide de webshop niet goed op de oude hosting? Op deze shared hosting was te weinig geheugen beschikbaar om de geavanceerde functies van de webshop te kunnen draaien en aangezien hier geen caching op de server draaide was de webshop heel traag.

Conclusie

Wat hebben wij van deze case geleerd? En wat heeft het onze klant opgeleverd?

Wij hebben geleerd dat het van belang is om de verschillende functies met elkaar af te stemmen zodat twee gewenste plugins correct samenwerken. Daarnaast hebben wij ook weer meegenomen zoals in ieder traject dat de wensen van de klant helder moeten zijn om tot een goede samenwerking te komen.

Het is een belangrijke schakel in de ontwikkeling of het redesign van een website of webshop dat de verwachtingen op elkaar afgestemd zijn en dat het duidelijk is wat technisch wel en niet mogelijk is. Dit voorkomt ruis en vertraging. Zorg als webdesigner dus dat je vooraf 100% helder hebt wat de klant verwacht. Stel vragen aan je klant, je kunt nooit teveel vragen stellen.

Sinds de livegang zien wij het aantal orders weer langzaam stijgen. Ook de vindbaarheid gaat langzaam omhoog, hier werken wij samen met de klant aan en we monitoren dit wekelijks. Dit zijn beiden uiteraard de belangrijkste zaken voor een webshopeigenaar. Je investeert in een webshop en daar wil je resultaat uit halen. Vindbaarheid en conversie zijn met elkaar verbonden als een bloem en een bij. Zonder bezoekers die je webshop vinden geen conversie.

En nu? Nu is het klaar en kunnen we uitrusten? Nee. Nu begint het pas. Wij gaan direct verder met het uitbouwen en verder optimaliseren van deze webshop. Meer en nieuwe producten toevoegen, de snelheid nog meer optimaliseren en de vindbaarheid verder verbeteren. Een webshop is nooit klaar. Heb jij een webshop? Waar loop jij tegenaan? Wij zijn benieuwd, laat het weten in een reactie.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *