WordPress & Elementor kennisbank

WooCommerce categorie pagina aanpassen met Elementor in 4 stappen

Inhoud van dit artikel:

Een WooCommerce categorie pagina aanpassen kun je eenvoudig doen met Elementor Pro. Zonder kennis van code kun je de producten inladen, de categoriebeschrijving toevoegen en de pagina naar wens opmaken. Dit kan bijvoorbeeld handig zijn als je de vindbaarheid van de verschillende categorieën wilt verbeteren of eventueel bepaalde call to actions aan de pagina wilt toevoegen. In dit artikel leg ik je uit hoe je een WooCommerce categorie pagina kunt aanpassen met Elementor Pro.

Ontdek meer voordelen van Elementor & WooCommerce

Stap 1: Categorieën maken

Ik ga er even vanuit dat je de categorieën al hebt ingesteld bij je producten in de webshop. Mocht je dit nog niet hebben gedaan, doe dit dan eerst. Vul ook alvast de categorie beschrijving in, mocht je deze straks willen tonen op de categorie pagina. Zorg ook dat je al producten hebt toegewezen aan de categorieën, dat maakt het zo iets makkelijker om de pagina goed vorm te geven.

Stap 2: Product archief pagina aanmaken

Een WooCommerce categorie pagina aanpassen doe je door het aanmaken van een nieuw archief template met behulp van Elementor Pro. Dit doe je als volgt:

  • Ga naar Elementor -> Theme Builder

Themebuilder elementor openen

  • Kies ‘Nieuwe toevoegen
  • Selecteer ‘Product Archive

WooCommerce categorie pagina aanpassen template elementor maken

  • Geef het template een naam. Bijvoorbeeld: ‘Product categorieën’.

Stap 3: de WooCommerce categorie pagina aanpassen

Je krijgt vervolgens een popup waaruit je kunt kiezen uit verschillende standaard templates. Mocht je deze niet willen gebruiken, dan klik je dit weg door op het kruisje te klikken.

WooCommerce categorie pagina aanpassen templates Elementor

Product archief widgets

Met de product archief widgets kun je de juiste producten tonen, de categorietitel en beschrijving toevoegen:

Archive Title

Deze widget laadt automatisch de titel van de WooCommerce categorie pagina. Bijvoorbeeld ‘boeken’.
Let op; als je kiest voor deze widget wordt automatisch de taxonomie titel genoemd, in dit geval ‘Categorie’ of ‘Category’. Dan krijg je dus ‘Categorie: boeken’. Als je dit niet wilt, kun je dit uitschakelen door ‘Include context’ op ‘Nee’ te zetten. Dit doe je door op de titel te klikken.

woocommerce archief pagina aanpassen elementor titel

Archive Products

Toont de producten in de specifieke categorie. Je hoeft deze categorie met deze widget niet eerst te selecteren (zoals met de posts widget). De juiste producten worden straks automatisch geladen. In hoeverre je deze weergave kunt aanpassen is afhankelijk van het thema dat je gebruikt. Bij OceanWP zie je bijvoorbeeld de onderstaande opties en melding. Wil je hier aanpassingen in doen, dan kun je dit dus het beste via de customizer van het thema doen.

WooCommerce categorie pagina aanpassen elementor oceanwp
Voorbeeld thema OceanWP

Hieronder zie je een voorbeeld van de opties bij het thema Astra. Zoals je ziet kun je hier wel kolommen en rijen aanpassen. Maar ook kun je hier de pagination instellen en het aantal zoekresultaten instellen. Maar ook bij dit thema, kun je deze instellingen beter aanpassen via de customizer.

Woocommerce categorie pagina aanpassen elementor opties weergave
Voorbeeld Astra thema

Archive Description

Hiermee toon je de product categoriebeschrijving (mits je deze hebt ingevuld).

WooCommerce categorie pagina aanpassen archief widgets elementor

Andere Elementor widgets gebruiken

Daarnaast kun je de pagina verder opmaken met andere Elementor widgets. Let er wel op: deze product archief pagina wordt gebruikt voor alle categorieën. De informatie die je op deze pagina plaatst wordt dus bij alle categorieën getoond. Wil je meer informatie plaatsen of een specifieke opmaak gebruiken voor een bepaalde categorie? Dan moet je meerdere product archiefpagina’s maken, die je enkel publiceert voor die categorie (zie stap 4).

Preview instellen

Als je bezig bent met het aanpassen van de WooCommerce categorie pagina, dan is het handig om bij de preview instellingen alvast een categorie in te stellen. Dit doe je als volgt:

  • Klik linksonderin op het tandwieltje om naar ‘Instellingen’ te gaan.
  • Klik op het tabje ‘Preview settings
  • Selecteer ‘Productcategorieën Archive’
  • Selecteer vervolgens een categorie waarvan je een voorbeeld wilt zien.
  • Klik vervolgens op ‘Apply & Preview’. De pagina wordt opnieuw geladen.

WooCommerce categorie pagina aanpassen preview instellen

WooCommerce categorie pagina aanpassen preview productcategorie

Stap 4: De categorie pagina publiceren

Als je klaar bent met de pagina kun je deze gaan publiceren. Klik op de knop ‘Publiceren’. Het scherm voor publicatie condities opent. Stel hier in dat je dit archief template wilt instellen voor alle productcategorieën. Je kunt vervolgens het template publiceren. Deze werkt nu direct voor alle product categorie pagina’s.

WooCommerce categorie pagina aanpassen publicatie condities instellen

WooCommerce categorie pagina aanpassen voor specifieke categorieën

Heb je een template gemaakt voor een specifieke productcategorie? Dan publiceer je de pagina alleen voor die productcategorie. Zie het voorbeeld hieronder. Het is ook mogelijk om bepaalde categorieën uit te sluiten. Lees hier meer over publicatie condities in Elementor Pro. 

WooCommerce categorie pagina aanpassen specifieke categorie

Ook interessant voor jou

Elementor loop builder: 10 praktische voorbeelden

Transparante header WordPress maken met Elementor

De 8 voordelen van Elementor Pro voor marketeers

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.