Cold Lava Clothing: WooCommerce kleding webshop op maat

Een kledingmerk verkoopt niet alleen een shirt of trui. De uitstraling, fotografie en manier waarop een collectie wordt gepresenteerd horen net zo goed bij het product. Voor Danique maakten we daarom de webshop van Cold Lava Clothing: een WooCommerce kleding webshop waarin het merk direct de hoofdrol krijgt.

De website combineert een rustige zwart-witbasis met grote beelden, duidelijke productkeuzes en een koopproces zonder onnodige tussenstappen. Aan de voorkant voelt het als Cold Lava; achter de schermen blijft het een praktische WooCommerce-winkel die gewoon vanuit WordPress te beheren is.

Bekijk Cold Lava Clothing live.

Een webshop die bij het kledingmerk past

Cold Lava heeft een duidelijke visuele stijl. Daarom was een standaard webwinkeltemplate geen logisch vertrekpunt. We bouwden een eigen WordPress-thema waarin het logo, de fotografie en de collecties veel ruimte krijgen. De navigatie blijft compact, zodat de website niet gaat concurreren met de kleding die Danique wil laten zien.

Het ontwerp werkt op grote en kleine schermen. Beeld mag groot zijn waar het sfeer en herkenning toevoegt, terwijl productinformatie, prijzen en knoppen rustig en leesbaar blijven. Zo voelt de winkel merkgericht zonder dat bezoekers hoeven te zoeken naar de shop, hun account of het winkelmandje.

Nieuwe items en collecties vooraan

Op de homepage komen de nieuwste producten automatisch naar voren. Danique hoeft een artikel dus niet nog een keer handmatig in een los homepageblok te zetten. Zodra het product in WooCommerce staat, kan het bij Newest Arrivals verschijnen.

Daarnaast zijn er aparte collectieblokken die vanuit WordPress kunnen worden samengesteld. Per blok wordt een WooCommerce-categorie met een eigen beeld gekoppeld. Bezoekers kunnen daardoor vanuit de merkbeleving meteen verder naar de collectie die hen aanspreekt. Een optionele video maakt het mogelijk om een release of campagne extra kracht bij te zetten. Die video wordt pas geladen wanneer dat nodig is, zodat hij de eerste paginalading niet onnodig zwaar maakt.

Kleur en maat kiezen vanuit het productoverzicht

Kleding heeft bijna altijd variaties. Alleen een knop met ‘opties kiezen’ laat bezoekers daarvoor vaak onnodig heen en weer klikken. Voor Cold Lava maakten we eigen variatie-swatches waarmee beschikbare kleuren en maten al in het productoverzicht zichtbaar zijn.

Een kleur kan met de bijbehorende productfoto worden getoond en maten verschijnen als duidelijke keuzeknoppen. De webshop houdt rekening met de combinaties die echt als WooCommerce-variatie bestaan. Na het kiezen kan het juiste product direct aan het winkelmandje worden toegevoegd. Ook wisselt de productafbeelding mee waar daarvoor een variatiefoto beschikbaar is.

Productpagina’s gemaakt voor kleding

Op een kledingpagina wil je beelden kunnen vergelijken zonder steeds terug naar boven te scrollen. Desktopbezoekers krijgen daarom een ruime productgalerij, terwijl de mobiele versie als een veegbare Swiper-galerij werkt. Afbeeldingen kunnen ook groter worden bekeken.

De belangrijkste koopinformatie staat direct naast de beelden. Langere uitleg en de maattabel zijn in uitklapbare onderdelen geplaatst. Daardoor blijft de pagina rustig wanneer iemand vooral kleur, maat en prijs wil zien, maar is extra informatie wel beschikbaar op het moment dat die nodig is. Gerelateerde artikelen en passende aanvullingen kunnen via de normale WooCommerce-functies onder het product worden getoond.

Sneller van kiezen naar afrekenen

Na het toevoegen van een product wordt het winkelmandje direct bijgewerkt. De teller in de header verandert zonder een volledige paginaverversing en het compacte winkelmandje kan meteen de inhoud laten zien. Zo krijgt een bezoeker duidelijke bevestiging dat de gekozen kleur en maat zijn toegevoegd.

Ook de Nederlandse checkout kreeg extra aandacht. Op basis van postcode en huisnummer kan het adres via de openbare PDOK-adresgegevens worden opgezocht en ingevuld. Invoer wordt gecontroleerd en veelgebruikte resultaten worden tijdelijk opgeslagen om onnodige aanvragen te voorkomen. Dat betekent minder typwerk voor de klant en verkleint de kans op een verkeerd overgenomen straatnaam of woonplaats.

Producten beheren in het bekende WooCommerce-dashboard

Het maatwerk zit in de winkelervaring, maar de dagelijkse inhoud blijft op een herkenbare plek. Productnamen, prijzen, voorraad, afbeeldingen, categorieen, kleuren en maten worden in WooCommerce beheerd. Nieuwe producten kunnen daardoor aan de shop worden toegevoegd zonder dat voor iedere collectie een ontwikkelaar nodig is.

Ook de grote homepagebanner, collectiebeelden en video zijn als beheerbare onderdelen opgezet. Daarmee kan Danique een nieuwe release zichtbaar maken en later weer vervangen, terwijl de vaste vormgeving van Cold Lava overeind blijft.

Techniek die de beelden niet in de weg zit

De Cold Lava-webshop is opgebouwd met PHP, SCSS, JavaScript, WooCommerce en Advanced Custom Fields. Scripts en styles krijgen automatisch een nieuwe versienummering wanneer bestanden veranderen, waardoor bezoekers minder snel een oude gecachte variant te zien krijgen.

Productbeelden buiten het eerste scherm worden lazy-loaded en krijgen responsive afbeeldingsinformatie mee. De homepagevideo gebruikt geen zware preload en productgalerijen zijn afgestemd op desktop en mobiel. Dat is belangrijk voor een kledingwebshop: fotografie mag de pagina bepalen, maar hoeft de winkel niet onnodig traag te maken.

Het resultaat: Cold Lava blijft herkenbaar tot in de checkout

Voor Danique ontstond een webshop die niet aanvoelt als WooCommerce met een ander kleurtje. Nieuwe releases, collecties en productvariaties zijn onderdeel van dezelfde merkervaring. Tegelijk blijft het beheer praktisch en kan de winkel verder groeien met de vertrouwde mogelijkheden van WordPress en WooCommerce.