MENU

Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Elementor webshop: zo stel je de shoppagina in!

Inhoud van dit artikel:

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.

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

Elementor webshop filters instellen jetsmartfilter
JetSmartFilter widgets

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!

Elementor webshop publiceren condities

 

Meer handige tips ontvangen?

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.

Geef een reactie

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

Tips ontvangen?

Schrijf je in voor updates!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.