Met de Elementor Site-instellingen kun je snel veel aspecten van je site die gerelateerd zijn aan WooCommerce aanpassen. Dit helpt je efficiënter te werken en consistentie te behouden op je hele site.
Er zijn twee manieren om deze instellingen te openen:
- Via de Elementor editor
- Via het Hello Commerce gedeelte van WP Admin
Om Site-instellingen te openen via de Elementor Editor:
- Open een van je sitepagina’s in Elementor.
In dit voorbeeld openen we de homepage vanuit WP Admin. - Klik in de bovenste werkbalk op het Site-instellingen icoon.
- Klik in het linkerpaneel op Hello Commerce.
Dit opent het instellingenpaneel. Het instellingenpaneel is verdeeld in drie delen:
- Woo Buttons: Knoppen gerelateerd aan WooCommerce zoals de “Toevoegen aan winkelwagen” knop.
- Woo prijzen: Prijzen die je beheert via WooCommerce. Dit zijn de prijzen die je invoert bij het maken of bewerken van producten.
- Sales flash: Ook bekend als een sales badge, dit is een visuele indicator die verschijnt op productafbeeldingen of lijsten om te tonen dat een product in de uitverkoop is. Je maakt een sales flash door een product te bewerken.
Zie Instellingen hieronder voor een volledige uitleg van alle beschikbare opties.
Om Site-instellingen te openen via de Elementor Editor:
- Ga naar WP admin.
- Navigeer naar het Hello Commerce gedeelte van WP Admin.
- Kies in het rechterpaneel, in het Shop Style gedeelte, een van de drie site-instellingen:
- Woo Buttons: Knoppen gerelateerd aan WooCommerce zoals de “Toevoegen aan winkelwagen” knop.
- Woo prijzen: Prijzen die je beheert via WooCommerce. Dit zijn de prijzen die je invoert bij het maken of bewerken van producten.
- Sales flash: Ook bekend als een sales badge, dit is een visuele indicator die verschijnt op productafbeeldingen of lijsten om te tonen dat een product in de uitverkoop is. Je maakt een sales flash door een product te bewerken.
Een instelling wijzigen – stap voor stap
- Open een pagina in de Elementor Editor
- Klik op het Site-instellingen icoon.
- Klik op Hello Commerce.
De instellingen openen met het Woo Buttons gedeelte open. - Klik op het potlood icoon
naast Typografie.
- Wijzig de familie naar quintessential. Voor details over lettertypen, zie Typografie.
- Klik op wijzigingen opslaan.
Nu, als je naar productpagina’s of de winkelwagen gaat, zullen de Woo Buttons het Quintessential lettertype gebruiken.
Bekijk alle opties die beschikbaar zijn met Site-instellingen.
Bekijk een video die de widget in actie demonstreert.
De site-instellingen
Je kunt je widgets aanpassen met content, stijl en andere geavanceerde parameters, wat je veel flexibiliteit biedt om ze aan te passen aan je behoeften. Klik op de tabbladen hieronder om alle instellingen te zien die beschikbaar zijn voor deze widget.

Typografie
Stel het lettertype en de grootte in. Voor details, zie Typografie.
Normaal/hover
- Normaal: Bepaal hoe de knoppen standaard verschijnen.
- Hover: Bepaal hoe de knoppen verschijnen bij mouse-over.
Tekstkleur
Stel de kleur van de woorden op de knop in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
Achtergrondtype
Gebruik de om te schakelen tussen een effen achtergrond (Classic) of een gemengde achtergrond (Gradient). Voor details, zie Maak een achtergrond.
Kleur
Stel de kleur van de knop in. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
Rand
Je hebt de optie om een rand toe te voegen aan de knoppen. Schakel naar Ja om een rand toe te voegen.
Als je een rand toevoegt, moet je bepalen:
- Randbreedte: Gebruik de schuifregelaar om de dikte van de rand te bepalen.
- Kleur: Voeg kleur toe aan de rand. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
- Rond: Knoppen verschijnen met gladde hoeken.
- Afgerond: Knoppen verschijnen met gelijkmatig gebogen randen.
- Scherp: Rechthoekige knoppen.
- Aangepast: Pas de radius aan, gebruik de vier tellers om elke individuele hoek aan te passen. Leer meer over deze meetmethoden.
- Vorm: Bij het gebruik van een knop gebruik je het dropdown menu om te selecteren:
- Box shadow: Voeg diepte toe aan je knoppen met schaduwen. Voor details, zie Wat is Shadow, Text Shadow en Boxed Shadow?
Padding
Creëer ruimte binnen de knoppen.
Voor details, zie Padding en marges.

Typografie
Stel het lettertype en de grootte van de prijzen in. Voor details, zie Typografie.
Tekstkleur
Stel een kleur in voor productprijzen. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.

Typografie
Stel het lettertype en de grootte van de uitverkoopprijzen in. Voor details, zie Typografie.
Tekstkleur
Stel een kleur in voor uitverkoopprijzen. Voor details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
Achtergrondkleur
Help uitverkoopprijzen op te laten vallen door een achtergrond toe te voegen. Voor details, zie Maak een achtergrond.