9 Winkellayouts
WooCommerce-catalogusindelingen: aantal kolommen en zijbalkposities, categoriepagina's, filterpagina's, en daarna de winkelwagen en het afrekenen.
Laatst bijgewerkt
- 4 kolommen (opent in een nieuw tabblad)
- 3 kolommen (opent in een nieuw tabblad)
- 2 kolommen (opent in een nieuw tabblad)
- 1 kolom (opent in een nieuw tabblad)
- Productindelingen (opent in een nieuw tabblad)
- Categorieën - Parallax (opent in een nieuw tabblad)
- Combinatiefilter (opent in een nieuw tabblad)
- Winkelwagen (opent in een nieuw tabblad)
- Afrekenen (opent in een nieuw tabblad)
Elke link opent een echte pagina in de live showcase, opgebouwd met hetzelfde thema en dezelfde blokken die je installeert.
Winkelpagina's opgebouwd uit blokken en sjablonen
WooCommerce regelt de winkel: producten, voorraad, de winkelwagen en betalingen. Canvas ontwerpt de pagina's die een klant doorloopt, en elk van deze lay-outs is opgebouwd uit onderdelen die met het thema en de plugin worden meegeleverd.
Cataloguskolommen
De pagina met vier kolommen is de WooCommerce-winkelpagina zelf, weergegeven door het producten-archiefsjabloon van het thema. De pagina's met drie, twee en één kolom bevatten het Canvas Products-blok, waarvan de instelling Kolommen de rij bepaalt, binnen een pagina die een van de vier winkelsjablonen gebruikt: volledige breedte, of een zijbalk links, rechts of aan beide kanten.
Productpagina
Een product krijgt zijn lay-out van een sjabloon dat je kiest tijdens het bewerken. Naast de standaardpagina zijn er versies met een zijbalk aan één of aan beide kanten, een samenvatting die vastblijft tijdens het scrollen, kleurstalen en een specificatielijst, plus een Linked Gallery-sjabloon dat ook als carrousel beschikbaar is.
Categoriebanners
Een reeks van volledige hoogte Parallax Image-blokken, één afbeelding per categorie, die elk meebeweegt wanneer de pagina scrolt. Het blok heeft een eigen overlay en eigen inhoud, zodat een kop en een knop klanten naar dat deel van de winkel kunnen leiden.
Combinatiefilter
Het Canvas Products-blok met twee Grid Filter-balken erboven, één met het label Categorie selecteren en één met het label Sorteren op, zodat een klant de catalogus meteen beperkt tot één type en op naam of prijs sorteert, zonder dat de pagina opnieuw laadt.
Winkelwagen
De showcase-winkelwagen gebruikt het Cart-blok dat WooCommerce meelevert. Canvas voegt eigen Cart Table- en Cart Totals-blokken toe voor een winkel die de winkelwagenpagina blok voor blok wil opmaken.
Afrekenen
Een lege winkelwagen heeft geen afrekening om te tonen, dus deze link opent het afrekenproces van de Christmas Store-demo, opgebouwd uit de blokken Canvas Checkout Billing en Canvas Checkout Order Review. Die demo wordt geïmporteerd met de producten en deze afrekenpagina al klaar.
Welke winkelindeling past bij je catalogus?
Laat de omvang van de catalogus leidend zijn. Een klein assortiment met sterke foto's komt het best tot zijn recht in brede kaarten, dus twee of drie per rij, of één kolom wanneer elk product een eigen alinea nodig heeft. Een grote catalogus vraagt om meer tegelijk in beeld, en daarvoor is de winkelpagina met vier kolommen bedoeld.
Gebruik het combinatiefilter wanneer klanten op twee manieren tegelijk denken, eerst op type en dan op prijs. Plaats categoriebanners op een homepage of in een lookbook, waar de foto de verkoop al doet voordat het raster dat doet.
Kies op de productpagina het sjabloon op basis van wat klanten doet kopen. Kleding verkoopt op kleur, dus de versie met kleurstalen verdient zijn plek. Technische producten verkopen op detail, en daarvoor is de specificatielijst bedoeld. Een zwevende samenvatting houdt de prijs en de knop in beeld op een lange pagina.
21 van de 88 demo-websites worden geïmporteerd als WooCommerce-winkels, met producten, categorieën en de winkelwagen- en afrekenpagina's al ingericht.
Winkelfuncties
24 WooCommerce-blokken en 18 winkelsjablonen, van de productgalerij tot het besteloverzicht.
De rondleiding
Producten, een winkelpagina, een productpagina, een winkelwagen en een checkout, in de volgorde waarin je ze zou bouwen.
De winkeldemo's
Mode, aardewerk, meubels en meer, die je pagina voor pagina kunt bekijken voordat je ze importeert.
De rest van de bibliotheek
Start met een kant-en-klare pagina
Alle 141 layouts zitten in elk abonnement, naast elk blok en elke demowebsite.