Een Elementor webshop maken doe je vrij eenvoudig. Elementor werkt goed samen met WooCommerce, dé plugin voor WordPress als je een website wilt bouwen. Elementor geeft je meer flexibiliteit in het opbouwen van de shoppagina, single productpagina’s en product categorie pagina’s. Je begint met het instellen van de de webshop, oftewel: de winkelpagina.
LET OP: Ben je van plan om te groeien met je webshop en wil je een functioneel goede en snelle webshop? Dan adviseren wij om je webshop custom te laten bouwen.
Elementor webshop: de winkelpagina instellen
Als je bekend bent met WooCommerce, dan weet je dat je een bepaalde pagina wordt ingesteld als de ‘Winkel’ pagina. Dit is een standaard template, waarbij de styling afhankelijk is van het thema dat je gebruikt. Als je een webshop bouwt met Elementor Pro, kun je zelf bepalen hoe de webshop pagina eruit komt te zien.
Voordat je start, is het wel handig om alvast wat producten toe te voegen aan je webshop. Dit maakt het makkelijker om aanpassingen te doen en stijlen aan te passen.
Een webshop pagina maken
Ga naar Templates –> Theme Builder –> Nieuwe toevoegen. Selecteer ‘Product archive’ en geef het template bijvoorbeeld de titel ‘Webshop’.
Als je een nieuwe archiefpagina voor je webshop instelt, krijg je direct een paar mogelijke templates te zien. Nu is een webshop pagina over het algemeen niet heel spannend qua vormgeving, dus veel verschil zit er niet tussen de templates.
Kies een van de templates of klik het scherm weg om zelf een template te maken.
Elementor webshop widgets
Wanneer je bezig gaat met het maken van de shoppagina, kun je hiervoor een aantal widgets gebruiken. Deze zie je nu bovenaan staan in het Elementor panel.
Archive title: laadt de titel in van de pagina (in dit geval dus de titel die je hebt ingesteld voor je shoppagina. Standaard heet dit in WooCommerce ‘Winkel’).
Archive products: toont alle producten in je webshop
Archive description: geeft de samenvatting van de pagina weer
Het verschil tussen de product archief widgets en WooCommerce widgets
Onder de archief widgets zie je ook een aantal WooCommerce widgets. In principe zou je de shoppagina ook kunnen maken door deze widgets te gebruiken. Waarom is dat niet handig?
Je shoppagina is een archiefpagina omdat je hiervoor ook vaak zoekfilters voor gebruikt. Bij veel thema’s zit deze functionaliteit inbegrepen. Zo kunnen je bezoekers bijvoorbeeld sorteren op populariteit, gemiddelde waardering, prijs of nieuwste producten. Je ziet deze functionaliteit direct als je de ‘Archive Products’ widget toevoegt aan de pagina. Gebruik je de ‘Products’ widget, dan zie je deze functionaliteit niet.
Filters in de webshop
Ook kun je op archiefpagina’s gebruik maken van filters. Filters zijn (nog) geen standaard functionaliteit in Elementor, maar er zijn wel add-ons, zoals JetSmartFilters, waarmee je filters kunt instellen (bv. kleuren / maten / categorie / tags etc). Dit werkt alleen als je pagina hebt ingesteld als archiefpagina en daarvoor de archief widget hebt gebruikt.
Hieronder zie je welke filtermogelijkheden er zijn met de JetSmartFilter
Shoppagina stijlen
Als je de archive products gaat bewerken via het tabblad ‘Stijl’ zie je hier een melding staan:
Dit betekent dat de opmaak van je shoppagina afhankelijk is van het thema waarmee je werkt. In veel gratis en betaalde thema’s zitten functionaliteiten voor het stijlen van de webshop. Deze zijn niet altijd te overschrijven met de styling opties van Elementor. Je komt hier vanzelf achter als je met de styling optie bezig gaat. Gebruik je het Hello Theme van Elementor, dan kun je sowieso alle styling opties gebruiken.
Verder kun je op deze pagina natuurlijk naar wens nog extra content toevoegen.
De webshop publiceren
Als je klaar bent met de opmaak, kun je de shoppagina gaan publiceren. Dit doe je door rechtsonderin het Elementorpanel op de groene button ‘publiceren’ te klikken. Er opent vervolgens een nieuw scherm waar je kunt kiezen waar je het template wilt publiceren. In dit geval wil je deze pagina instellen als Shop pagina. Dus je selecteer hier ‘Shop page’.
Je hebt nu de shoppagina ingesteld met Elementor!
