Wil je leren hoe je een gepersonaliseerde winkelpagina maakt? WooCommerce met Elementor?
Zoals je misschien weet, wordt Elementor Pro geleverd met een builder-functie WooCommerce waarmee u maak een website van gepersonaliseerde e-commerce met WooCommerce zonder codering. Met deze functie kunt u aangepaste WooCommerce-pagina's maken met behulp van de visuele editor van Elementor, die een intuïtieve interface biedt.
Zie ook: Hoe Elementor op WordPress te installeren
Op het moment dat u dit artikel schrijft, kunt u aangepaste pagina's maken voor de winkelpagina, productpagina en productarchiefpagina's (tags en categorieën). Binnenkort kunt u ook aangepaste pagina's maken voor de afrekenpagina en de winkelwagenpagina.
In dit artikel laten we u zien hoe u een aangepaste WooCommerce-winkelpagina maakt met de WooCommerce-builderfunctie van Elementor Pro.
De winkelpagina zelf is een van de standaardpagina's in WooCommerce. Deze pagina fungeert als een etalage om uw producten te tonen. U kunt deze pagina openen door naar uwsite.com/store. Standaard toont de WooCommerce-winkelpagina alleen WooCommerce-producten.
Door een aangepaste winkelpagina te maken met Elementor Pro, kunt u elementen toevoegen om uw etalage aantrekkelijker te maken.
Een aangepaste pagina van een WooCommerce-winkel maken met Elementor Element
Er zijn ten minste twee Elementor-widgets die u kunt gebruiken om een ​​aangepaste pagina van een WooCommerce-winkel te maken: Archiefproducten en Producten.
In dit voorbeeld gebruiken we de laatste.
De functie van de widget Producten lijkt veel op die van de widget Berichten. Het verschil is dat de widget Producten wordt gebruikt om WooCommerce-producten weer te geven, terwijl de widget Berichten wordt gebruikt om blogberichten weer te geven.
Lees ook: Hoe modellen te importeren of exporteren in Elementor
Houd er rekening mee dat u de widget Producten alleen kunt vinden als de WooCommerce-plug-in is geïnstalleerd en geactiveerd.
Om te beginnen met het maken van een aangepaste WooCommerce-winkelpagina met Elementor Pro, gaat u naar eerst à Sjablonen -> Themabouwer op uw WordPress-dashboard. Klik op het tabblad Producten Archief van de Theme Builder-pagina en klik vervolgens op de knop ajouter a PRODUCTEN ARCHIEF.
Geef je model een naam en klik op de knop MAAK EEN MODEL.
Er zijn drie sjablonen voor aangepaste winkelpagina's waaruit u kunt kiezen voor het geval u de aangepaste winkelpagina van een sjabloon wilt maken. Als u de aangepaste winkelpagina helemaal opnieuw wilt bouwen, kunt u gewoon de sjabloonbibliotheek sluiten.
Zie ook: Hoe gebruik je de Color Sampler in Elementor
In dit voorbeeld maken we de aangepaste winkelpagina helemaal opnieuw. Zoals hierboven vermeld, zullen we de widget Producten gebruiken om de producten weer te geven.
Voordat u de widget Producten aan het invoervak ​​toevoegt, kunt u de lay-out definiëren door secties en kolommen toe te voegen. Zodra de lay-out klaar is, kunt u de widget Producten eenvoudig naar het bewerkingsvak slepen.
Zoals u kunt zien, laadt en toont de widget Producten automatisch de nieuwste WooCommerce-producten. U kunt de query wijzigen door het blok te openen Vraag onder het tabblad Inhoud vanuit het instellingenpaneel. Er zijn vijf opties om uit te kiezen:
- Huidige zoekopdracht - Huidige zoekopdracht
- Nieuwste producten - Nieuwste producten
- Verkoop - Verkoop
- Uitgelicht - Uitgelicht
- Handmatige selectie - Handmatige selectie
U kunt ook de volgorde instellen waarin de producten worden weergegeven of bepaalde producten uitsluiten
Om het aantal kolommen en rijen in te stellen, kun je het blok openen Content onder het tabblad Inhoud. Vanuit dit blok kun je ook de paginering.
U kunt met het instellingenpaneel spelen totdat u de beste instellingen voor de widget Producten krijgt. Als u klaar bent met de widget Producten, kunt u meer widgets aan uw pagina toevoegen.
Lees ook: Hoe de kleurenkiezer te gebruiken in Elementor
Als u klaar bent met het bewerken van de pagina, kunt u op de knop klikken pUBLICEREN onderaan het instellingenpaneel.
Voeg een weergavevoorwaarde toe door op de knop te klikken een voorwaarde toevoegen. Aangezien u een aangepaste winkelpagina wilt maken, selecteert u de optie Shop Pagina. Klik op de knop OPSLAAN & SLUITEN om de wijziging op te slaan.
Tot nu toe heb je met succes de aangepaste WooCommerce-winkelpagina gemaakt met Elementor Pro. Je kunt gaan op uw site.com/store om het resultaat te controleren.
Pas de widget Producten aan
Voordat u uw pagina publiceert, kunt u de widget Producten aanpassen om deze aantrekkelijker te maken. Klik hiervoor op de widget in het bewerkingsvak en navigeer naar het tabblad Style vanuit het instellingenpaneel. Er zijn vier blokken die u als volgt kunt openen:
Producten
U kunt dit blok openen om de opening tussen kolommen en rijen te definiëren. Vanuit dit blok kunt u ook de typografie (lettertypefamilie, lettergrootte, etc.) instellen, evenals de tekstkleur van productelementen zoals producttitel, productprijs, beoordeling van product, product, etc…. U kunt ook de rand van de productafbeelding instellen,
- Box camera's
In deze context verwijst Box naar de container van elk product. U kunt het blok openen Box camera's om de grensbreedte van de container te definiëren, de grensradius, schaduw van de doos, de achtergrondkleur, de randkleur, enz.
- Opdelen
Als u de optie activeert Opdelen van het blok Inhoud, je kunt het blok openen Opdelen onder het tabblad Style om de paginering aan te passen. U kunt dingen instellen zoals spatiëring, randkleur, achtergrondkleur, enz.
U kunt ook verschillende parameters definiëren voor elke status (normaal, wijzend en actief).
- Vuile flits
Wanneer je een nieuw product toevoegt in WooCommerce, kun je een uitverkoopprijskenmerk instellen om je bezoekers te laten zien dat het bijbehorende product afgeprijsd is. Om dit te benadrukken, kunt u het sale-kenmerk op de winkelpagina weergeven, zodat afgeprijsde producten een sale-badge krijgen.
U kunt het blok openen Vuile flits om de verkoopbadge te personaliseren. U kunt elementen definiëren zoals tekstkleur, achtergrondkleur, typografie, randradius, grootte (breedte en hoogte), afstand, etc….
Op het einde
WooCommerce Builder is een van de functies die Elementor Pro biedt. Het stelt je in staat om maak een website gepersonaliseerd en uniek e-commerce platform met WooCommerce en zonder codering. Het is niet nodig om een ​​te installeren WordPress theme die beweert te zijn ontworpen voor WooCommerce. In plaats daarvan kunt u zelf aangepaste WooCommerce-pagina's maken met de visuele editor van Elementor.
Lees ook: Hoe een scheidingslijn toe te voegen om een ​​sectie te maken in Elementor
Tot versie 3.2.2 kunt u met Elementor Pro alleen aangepaste winkelpagina's, aangepaste enkele productpagina's en aangepaste productarchiefpagina's maken. Maar Elementor heeft aangekondigd dat u in de volgende versie van Elementor Pro ook een aangepaste winkelwagenpagina, een aangepaste afrekenpagina en een aangepaste klantaccountpagina kunt maken.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een aangepaste pagina voor een WooCommerce-winkel kunt maken met Elementor. Als u zich zorgen maakt over hoe er te komen flaat het ons weten in de commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
