5 eenvoudige stappen naar aangepaste WooCommerce-productpagina met Elementor - DeLaatbusiness
chatbots marketing

5 eenvoudige stappen naar aangepaste WooCommerce-productpagina met Elementor

4 min


133

Als domeineigenaar willen we dat onze e-commerce winkel opvalt, en om echt een unieke ervaring voor uw klanten te creëren, moet u uw productpagina kunnen aanpassen. Bovendien is de mogelijkheid om uw productpagina visueel aan te passen van het grootste belang om één stijl te behouden op uw online winkelpagina’s. 

Dus we vinden een manier om onze WooCommerce-productpagina’s aan te passen. Gelukkig maakt Elementor het veel gemakkelijker om verschillende elementen van uw afzonderlijke productpagina’s visueel te slepen en neer te zetten, door het ontwerp naar wens aan te passen.

Bij WooCommerce-ontwerptutorials waren tientallen regels code betrokken. Maar nu is Elementor voor WooCommerce gemaakt. Elementor WooCommerce Builder kan volledige controle krijgen over uw ontwerp en productpagina-indeling met de kracht van Elementor Pro. Het is niet nodig om acties of hooks op te nemen of in de verschillende PHP-bestanden te duiken. Elke ontwerpaanpassing wordt aan de voorkant gedaan, rechtstreeks vanuit de Elementor Page builder.

Maar maak eerst een Elementor-sjabloon. Klik op ‘Nieuw maken’ en selecteer vervolgens Eén product als de sjabloon die u wilt maken. Na de installatie zou u WooCommerce moeten hebben geïnstalleerd en een paar gerelateerde producten aan uw site moeten hebben toegevoegd. 

Opmerking: je moet eerst je WooCommerce activeren, anders heb je geen toegang tot de productsjablonen van Elementor. 

Stap 1: Maak uw productsjabloon

Om te beginnen met het ontwerpen van de enkele productsjabloon in Elementor, volgen we een vergelijkbare procedure als het maken van een gewone enkele sjabloon. Elementor WooCommerce Builder kan uw sjablonen voor één product en archiefpagina’s ontwerpen.

Een enkel productsjabloon maken:

  1. Kies onder Sjablonen> Themabouwer> Eén product> Nieuw toevoegen in de vervolgkeuzelijst Eén product, geef het een naam en klik op Sjabloon maken.
  2. Kies een enkel productblok en voeg in. U kunt ook uw eigen ontwerpen.
  3. Als u klaar bent met ontwerpen, klikt u op Publiceren.
  4. Kies Conditie. 

Stap 2: Kies een kant-en-klaar productpaginasjabloon

Helemaal opnieuw beginnen kan altijd een optie zijn als u niet wilt beginnen met een vooraf gemaakt sjabloon voor een productpagina. In het bewerkingspaneel ziet u de speciale widgets voor het product. Maar de gemakkelijkste manier om aan de slag te gaan, is door een van de vooraf ontworpen sjablonen voor productpagina’s te gebruiken en deze aan te passen aan uw site. Er zijn verschillende stijlen productpagina’s om uit te kiezen.

Voordat u widgets gaat toevoegen, kunt u ervoor zorgen dat u aan een productpagina over de volledige breedte werkt door over te schakelen naar een sjabloon over de volledige breedte.

Met Elementor heeft u totale controle over de lay-out en stijl van de productpagina. Een ander ding, de galerij met productafbeeldingen moet worden overwogen.

Elk WooCommerce-product heeft een productafbeelding of afbeeldingengalerij, die afbeeldingen van het product aan klanten laat zien. Elementor heeft een ingebouwde module Productafbeeldingen waarmee we dit in onze sjabloon kunnen invoegen.

Stap 3: voeg uw gewenste productwidgets toe 

Nadat u uw afbeeldingen en teksten heeft ingesteld, kunt u nu widgets toevoegen om uw website functioneel te maken. Het goede van Elementor- en WooCommerce-add-ons en -bouwers is dat je een product, winkelwagenpagina en andere widgets kunt toevoegen die bij je thema passen. Ga voor de volledige lijst met productwidgets naar onze documentatie over het onderwerp. Hier zijn de lijsten met widgets die u aan uw pagina zou willen toevoegen.

  • Producttitel widget
  • Woo Breadcrumbs-widget
  • Productafbeelding widget
  • Widget voor productbeoordeling
  • Korte beschrijving widget
  • Productprijs widget
  • Toevoegen aan winkelwagen widget
  • Meta-widget voor producten
  • Tabbladen met productgegevens
  • Product-gerelateerd 
  • Upsells-widget

U kunt natuurlijk altijd widgets op uw pagina verwijderen of toevoegen die niet op onze lijsten staan. Het belangrijkste om te onthouden waarom we widgets op onze pagina plaatsen, is om deze effectief en boeiend te maken. Deelknoppen, call-to-action-widgets, uitgelichte afbeelding, vervolgkeuzemenu’s en andere knoppen helpen uw bezoekers u te bereiken. 

Onthoud dat elk product wat basisinformatie moet bevatten, zoals productbeschrijvingen en recensies, indien beschikbaar. Dit wordt vaak afgehandeld door producttabbladen. Maak een nieuwe rij onder het bovenste gedeelte en sleep de module Productgegevens-tabbladen van de Elementor-builder naar de rij om deze in te voegen. Er is hier niet veel styling vereist, omdat het sommige stijlen van het Hello Elementor-thema heeft geërfd. Laten we echter de stijl van de knop voor het indienen van beoordelingen wijzigen.

Stap 4: Productvoorbeeld met een ander product

Om er zeker van te zijn dat uw productsjabloon het juiste ontwerp heeft, is het raadzaam om er een voorbeeld van te bekijken met verschillende producten.

Klik op het oogpictogram in het linkeronderpaneel en vervolgens op instellingen. Kies onder Voorbeeldinstellingen het specifieke product dat u wilt weergeven. Meld u nu aan en bekijk hoe het eruit ziet.

Stap 5: Stel de voorwaarden voor uw pagina of website in

U bent bezig met het bouwen van een prachtige website voor uw bedrijf wanneer de ontwikkelaar om uw algemene voorwaarden vraagt.

Dit is de fase waarin u de voorwaarden stelt die bepalen waar uw productsjabloon wordt weergegeven. Standaard heeft de sjabloon invloed op alle productpagina’s op uw site. U kunt ook een specifieke categorie producten selecteren.

Hier is wat basisinhoud die in uw Algemene voorwaarden moet worden opgenomen:

  • Beperking van uw aansprakelijkheid – Disclaimer gericht op het beperken van uw aansprakelijkheid in gevallen waarin uw webinhoud fouten bevat. U kunt ook taal toevoegen die uw aansprakelijkheid voor hun aanstootgevende berichten beperkt.
  • Copyright – Voeg copyright en handelsmerk toe zoals “Copyright © 2020. Uw domein.com. “
  • Privacybeleid – Deze is erg belangrijk. Als u informatie van uw klanten verzamelt, zoals e-mailadressen of creditcardgegevens, moet u een privacybeleid publiceren waarin wordt uiteengezet hoe deze informatie zal worden gebruikt of niet.
  • Bepaal het toepasselijke recht – Uw algemene voorwaarden moeten in overeenstemming zijn met het toepasselijke recht van uw regio. 

Gevolgtrekking

De WooCommerce Builder van Elementor geeft u de ontwerpflexibiliteit om uw productpagina’s visueel te maken en te verfijnen. Dit bespaart u tijd en vermindert aanzienlijk de tijd die nodig is om van een idee dat u hebt naar een live en volledig functionele online WooCommerce-winkel te gaan. 

U zult vele andere gratis WooCommerce-sjablonen ontdekken in Envato Elements, die meer dan 2000 verschillende sjablonen aanbieden, waarvan er vele gerelateerd zijn aan e-commercesites. Bovendien zijn er tal van WooCommerce-thema’s die u kunt bekijken, zoals degene die we in ons artikel noemen.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

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

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format