Ontwerp uw WooCommerce-productcategorieën met Elementor

Elementor is een uitstekende WordPress-paginabuilder om de functionaliteit van de standaard WordPress-builder te verbeteren door nieuwe functies toe te voegen.

Als u zich herinnert, waren de vroege versies van WordPress niet bijzonder gebruiksvriendelijk. Naast de beperkte functionaliteit, moest je vertrouwen op vooraf gemaakte WordPress-thema's om een ​​basisontwerp voor je website te maken. Voor veel gebruikers was de basisfunctionaliteit van WordPress-thema's echter onvoldoende, waardoor de installatie van plugin ins of het handmatig bewerken van themacode noodzakelijk was.

• WooCommerce en Elementor combinatie
• Categoriepagina maken in Elementor
• Opmaak instellingen

Elementor is een op blokken gebaseerde builder vergelijkbaar met WordPress, maar het is veel geavanceerder dan de WordPress-builder omdat het intuïtiever, responsiever en rijker aan functies is. Het belangrijkste is dat u een fantastische website kunt maken zonder ooit een regel code te hoeven schrijven!!

WooCommerce en Elementor combinatie

WP-WooCommerce en Elementor zijn twee van de meest gebruikte WordPress- plugin -ins die vandaag beschikbaar zijn. De hoeveelheid flexibiliteit en het enorme aantal functies dat elk van hen biedt, zijn gewoon onbetaalbaar. Als u een eCommerce-winkel heeft, is WooCommerce de beste plugin voor bijna elke behoefte die u heeft. Het is de meest uitgebreide plugin beschikbaar is voor praktisch elke behoefte.

Bovendien is Elementor een van de meest effectieve websitebouwers met slepen en neerzetten die op de markt verkrijgbaar zijn. Het geeft u de mogelijkheid om bijna elke pagina op uw website snel te ontwerpen, aan te passen en in te richten. Bovendien zijn er functies beschikbaar, zoals het maken van megamenu's en toegang tot een breed scala aan add-ons en sjablonen die erg handig zijn. Met de hulp van zowel WooCommerce als Elementor kunt u winkel- en bedrijfspagina's van professionele kwaliteit ontwerpen en bouwen met zo min mogelijk kosten en moeite. Met behulp van Elementor kunt u uw winkellay-outs, productrasters en carrousels volledig aanpassen en kiezen uit een verscheidenheid aan prachtige lay-outs. Ook beschikbaar is de mogelijkheid om uw kassa- en winkelwagenpagina's in te stellen en te personaliseren, en deze te integreren met een verscheidenheid aan betalingsopties en functies om uw klanten meer gemak te bieden.

Bovendien kunt u aangepaste pagina's en ontwerpen voor digitale goederen maken, onder andere aangepaste pagina-opties voor verzending en betalingen en post- en pre-aankooppagina's opnemen. Dit alles draagt ​​bij aan de uitstraling van de website van uw bedrijf als zowel professioneel als gebruiksvriendelijk. Samen met de gebruiksvriendelijke call-to-action-knoppen, parallax-ready sliders en tal van andere functies, kunt u WooCommerce-functionaliteit in uw website integreren. Het enorme aantal beschikbare mogelijkheden is vrijwel onbeperkt. Nu, als u voldoende overtuigd bent, laten we u dan door het proces leiden om uw plan in daden om te zetten. U kunt verschillende dingen doen om uw winkelpagina gastvrijer te maken, en het doel is dat deze stappen u helpen bij het maken van een meer gastvrije winkelpagina voor uw WooCommerce-winkel.

WooCommerce-categoriepagina maken in Elementor

Als u bekend bent met WooCommerce, weet u dat productcategorieën van cruciaal belang zijn bij het organiseren van uw producten voor een juiste weergave en toegang door klanten - hoe sneller ze kunnen vinden wat ze zoeken, hoe beter. Maar wat zijn productcategorieën precies?

Klanten besteden een aanzienlijke hoeveelheid tijd aan het bladeren door uw producten op uw winkelpagina, dus ze moeten een positieve ervaring hebben. Er is niets frustrerender dan door tientallen pagina's te moeten navigeren om producten op de website van uw winkel te bekijken.

Als gevolg hiervan is categorisatie essentieel om uw klanten een betere winkelervaring te bieden. Klanten zullen het gemakkelijker vinden om hun voorkeuren te sorteren en uit te filteren als er een overzichtelijke en georganiseerde sectie is voor alle soorten items, zoals kleding of schoenen. Het toevoegen van leadgeneratie-elementen zoals call-to-action-knoppen, aanbevolen productsecties, pop-ups voor verkopen of aanbiedingen en andere vergelijkbare componenten aan deze sectie kan het aantrekkelijker maken voor bezoekers.

Als je een WooCommerce-winkel hebt en deze een facelift wilt geven, is deze tutorial precies wat je nodig hebt om te beginnen.

Veel WooCommerce-thema's bevatten een standaardlay-out voor productcategorieën, die al dan niet het beste past bij uw zakelijke behoeften. Hoewel deze standaardinstellingen enkele handige functies kunnen bevatten, kunnen ze niet vaak worden aangepast.

Terzake.
Nadat u uw product heeft ingesteld, moet u het volgende doen voordat u het publiceert, zodat het in een categorie wordt weergegeven:

U stelt de voorwaarden in die bepalen waar uw productsjabloon tijdens deze fase wordt weergegeven. Wanneer u een sjabloon gebruikt, wordt deze automatisch toegepast op alle productpagina's op uw site. U kunt uw zoekopdracht ook verfijnen tot een specifieke productcategorie.

Klik op Publiceren en uw enkele product is nu beschikbaar voor aankoop!

We zijn nog niet klaar.
Wat we zojuist hebben gedaan, is niet genoeg om categorieën live op onze site te krijgen; om categorieën live te krijgen op alle of sommige pagina's van onze website, moeten we nog een paar dingen instellen. Om de taak te voltooien, maakt u een productcataloguspagina die van invloed is op alle producten of een cataloguspagina die van invloed is op een specifieke categorie producten.
Om dit te doen, ga je eerst terug naar Elementor > Mijn sjablonen en maak je een productarchiefsjabloon aan. Kies vervolgens een bestaande sjabloon of maak een nieuwe aan. Pas het uiterlijk van de widget Archiefproducten en de widget Archieftitel aan door ze aan uw pagina toe te voegen.

Gebruik de kopieerstijlfunctionaliteit tussen pagina's om deze aan te passen aan het ontwerp dat u al hebt gemaakt voor uw enkele productsjabloon, en sla vervolgens uw wijzigingen op.
Keer terug naar de productpagina en selecteer Kopiëren in het vervolgkeuzemenu. Klik met de rechtermuisknop op Stijl plakken wanneer u weer in het archiefproduct bent. Kies Nieuwste producten in het vervolgkeuzemenu Query > Bronnen in de instellingen van Producten archiveren.
Selecteer vervolgens ringen in het vervolgkeuzemenu Productcategorie. Alleen de ringcategorie wordt op deze manier weergegeven. Als u een lange lijst met producten voor een bepaalde categorie heeft, moet u paginering inschakelen.
U kunt de afstand tussen de kolommen en de rijen aanpassen door het tabblad Stijl te selecteren. Wijzig de kleuren, lettertypen en andere aspecten van het ontwerp.

Selecteer voorafgaand aan publicatie de voorwaarden die bepalen waar het archief wordt weergegeven, net zoals u deed voor de enkele productsjabloon, en publiceer vervolgens.

Zodra u op 'publiceren' heeft geklikt, is uw archiefpagina live.

Elementor pro geeft je de mogelijkheid om squicky clean productcategorieën te ontwerpen met zijn arsenaal aan opties;

U kunt het volgende doen met de opties die beschikbaar zijn op Elementor Pro:

Lay-outinstellingen voor WooCommerce-productcategorieën

• Kolommen: stel het exacte aantal kolommen in dat moet worden weergegeven, van 1 tot 12
• Aantal categorieën: selecteer het aantal categorieën dat u wilt weergeven

Query-instellingen

• Bron: Selecteer de bron waaruit u categorieën wilt weergeven, kies uit Alles, Handmatige selectie, Op bovenliggende of Huidige subcategorieën. Als Handmatige selectie is gekozen, selecteert u handmatig welke categorieën moeten worden weergegeven. Als 'Op ouder' is gekozen, selecteert u Alleen het hoogste niveau of selecteert u een afzonderlijke categorie in de vervolgkeuzelijst.
• Verberg leeg: stel in op Ja voor categorieën zonder producten erin
• Order By: Stel de volgorde in waarin de categorieën worden weergegeven. Opties zijn onder meer Naam, Slug, Beschrijving of Aantal
• Volgorde: Selecteer om categorieën in ASC- of DESC-volgorde (oplopend of aflopend) weer te geven

Stijlinstellingen

• Columns Gap: Stel de exacte opening tussen de kolommen in
• Tussenruimte rijen: stel de exacte tussenruimte tussen de rijen in
• Uitlijning: lijn de productgegevens links, rechts of in het midden uit

Afbeeldingsinstellingen

• Randtype: selecteer het type rand, kies uit geen, effen, dubbel, gestippeld, gestreept of gegroefd
• Randradius: stel de straal in om de hoekronding van de rand te regelen
• Afstand: pas de hoeveelheid ruimte tussen de afbeeldingen en hun gegevens aan

Titel instellingen

• Kleur: Kies de titelkleur
• Typografie: stel de typografie-opties voor de titeltekst in

Tel instellingen

• Kleur: Kies de kleur voor de Count
• Typografie: Typografische opties instellen voor de Count

Conclusie

De WooCommerce Builder in Elementor biedt u de ontwerpflexibiliteit die u nodig hebt om uw productpagina's visueel te maken en te verfijnen. De tijd die nodig is om van een idee naar een leven te gaan , en volledig functionele online WooCommerce-winkel wordt aanzienlijk verminderd, waardoor u tijd bespaart. Over het algemeen kan het aanpassen van uw WooCommerce-winkelpagina met Elementor de algehele prestaties van uw website aanzienlijk beïnvloeden. U kunt de verkoop helpen of belemmeren door uw producten zo te organiseren en weer te geven dat klanten ze kunnen zien en kopen. Het instellen en aanpassen van uw WooCommerce-winkelpagina in Elementor wordt gedemonstreerd via de stappen in deze handleiding. Houd er echter rekening mee dat dit slechts het topje van de ijsberg is in termen van de omvang van het probleem. Een inleiding tot het gebruik van Elementor om de ideale winkelpagina voor uw winkel te maken, wordt gedemonstreerd in deze basisdemonstratie. Gebruik dit als uitgangspunt en speel ermee om het meeste uit deze fantastische paginabuilder te halen