Winkeltrends veranderen in hoog tempo en mensen kopen vaker dan ooit online.
Dat is waarom ze behoefte hebben aan een eCommerce-winkel om te voldoen aan de online winkelgewoonten omdat mensen het gemakkelijker vinden om online te kopen in plaats van te gaan winkelen.
U kunt ook meteen uw e-commerce winkel starten met de juiste tools en instellingen. En u zult binnen een recordtijd een drastische stijging van uw verkopen opmerken.
Als je van plan bent om een e-commerce winkel te starten en op zoek bent naar een WordPress-expert om het werk voor je te doen, laat me je dan vertellen dat je die niet nodig hebt.
Ja! U kunt het zelf doen omdat u geen WordPress-ontwikkelaar of coderingsdeskundige hoeft te zijn en u kunt het doen zonder enige kennis van codering met de juiste tools en instellingen.
Volg gewoon de stapsgewijze handleiding voor het maken van een WooCommerce-winkelpagina met Elementor- paginabuilder .
Laten we dieper graven om ter zake te komen!
- Wat heb je nodig om een productpagina te maken met Elementor?
- Hoe installeer ik de Elementor paginabuilder?
- Maak stap voor stap een Elementor WooCommerce-productpagina
- Mobile optimaliseer uw WooCommerce-productpagina
- Elementor Pro-prijzen
- Afsluiten
Wat heb je nodig om een productpagina te maken met Elementor?
Installeer de WooCommerce- plugin in op uw WordPress-site vanuit de WordPress.org-repository en bovendien moet u de Elementor- . De gratis versie kan worden gedownload van WordPress.org, maar de gratis versie wordt geleverd met beperkte aanpassingsopties. Daarom, als je graag onbeperkte aanpassingsopties wilt krijgen, ga dan voor de pro Elementor en download deze van de officiële Elementor.org.
Hoe installeer ik de Elementor paginabuilder?
- Voor de gratis versie van Elementor:
Ga naar Plugin > Nieuwe toevoegen> voer Elementor-paginabuilder in> klik op installeren en activeren.
- Voor Elementor Pro:
Koop de Pro-versie van Elementor.com en upload vervolgens het zip-bestand en klik vervolgens op installeren en activeren.
Maak stap voor stap een Elementor WooCommerce-productpagina
De standaard WooCommerce-productpagina ziet eruit als elke standaard WooCommerce-productpagina zonder enige scherpte.
Als u echter de stem van uw merk wilt toevoegen, moet u deze op unieke wijze aanpassen.
Stap 1: Ga naar het sjabloongedeelte vanuit uw Dashboard-menu en klik op "Nieuwe toevoegen".
Selecteer nu in het vervolgkeuzemenu het item "Single Product"
Het beste deel is dat de Elementor wordt geleverd met een aantal vooraf gemaakte sjablonen voor productpagina's, dus als u snel wilt beginnen, selecteert u iemand uit de opties die het dichtst bij uw gewenste staan.
Het is veel gemakkelijker om een productpagina te maken vanuit de vooraf gemaakte sjabloon in plaats van helemaal opnieuw te maken. Pas daarom een bestaande sjabloon aan en bespaar tijd en moeite.
We hebben deze sjabloon geselecteerd voor onze productpagina.
Zodra u uw favoriete sjabloon heeft geselecteerd, wordt u naar de Elementor-editor geleid waar u de sjabloon naar eigen smaak kunt aanpassen.
Hier ziet u verschillende blokken in het menu aan de linkerkant. Sleep het blok waar je graag mee werkt en zet het neer.
Klik op de knop "+" Toevoegen en selecteer welke kolomgrootte u wilt toevoegen.
We hebben twee kolomgrootten geselecteerd voor onze productsjabloon.
Voeg nu een producttitel-widget toe in de rechterkolom en voeg de titel van uw product erop toe.
Nadat u de producttitel heeft toegevoegd, is de volgende stap het toevoegen van de "Woo breadcrumbs" erboven.
Voeg nu de productafbeelding toe in de linkerkolom en sleep de productafbeelding-widget vanuit de linkerkolom.
U kunt de opvulling aan beide kolommen toevoegen om ze iets uit elkaar te houden.
Na het toevoegen van de afbeelding en het aanpassen van de opvulling volgens de vereiste afmetingen, voegt u de productbeoordelingswidget toe onder de producttitel.
Voeg een korte beschrijving van de productwidget toe onder het productbeoordelingsblok. je kunt ook de ruimte tussen de twee blokken aanpassen.
Zodra u klaar bent met de productbeschrijving en alle details, is onze volgende stap het toevoegen van de prijs van het product en hiervoor moet u de prijswidget slepen en neerzetten onder de beschrijving van het product.
Nadat u het prijstabblad onder de productbeschrijving heeft toegevoegd, kunt u de prijswidget aanpassen door de opties in het linkermenu te selecteren. U kunt het pictogram vergroten, de lettertypestijl wijzigen en ook de lettertypekleur van zwart naar een andere kleur naar keuze.
Voeg nu de widget "toevoegen aan de winkelwagen" toe en pas de kleur, het lettertype of de stijl aan vanuit het menu als je dat wilt.
Voeg nu productmeta toe onder de prijswidget met de productcategorie en het serienummer van het product.
Stap 2: voeg aanvullende informatie over het product toe in de volgende sectie.
Maak een nieuwe sectie met twee kolommen en voeg vervolgens Productgegevens-tabbladen toe, inclusief beschrijving, aanvullende informatie en recensies. En aan de rechterkant van de kolom voegt u de gerelateerde productsectie toe.
Om hetzelfde formaat van elke kolom te behouden, kunt u op de linkerhoek van elke kolom klikken en het kolomformaat voor elke kolom kopiëren en plakken.
Stap 3: voeg nog een sectie toe van 'up-sell-sectie' toevoegen.
Hier ziet u hoe u de sectie up-sell eruit ziet na toevoeging. Voeg wat opvulling toe om de sectie uit te lijnen.
En tot slot bent u klaar met het ontwerpen van uw productpagina. Nu is de laatste stap waar u uw product wilt publiceren? u kunt op publiceren klikken of naar het ooggedeelte in de onderste hoek van het linkermenu gaan en op de instellingen klikken om de categorie van het product te selecteren.
Klik op het menu voor het toevoegen van voorwaarden en selecteer vervolgens de categorie van uw product en klik op publiceren.
Mobile optimaliseer uw WooCommerce-productpagina
Aangezien er veel verkeer via de smartphone zal komen, moet u uw winkel optimaliseren voor het bekijken van smartphones, anders kunt u uw verkoop verliezen.
Hoewel de WooCommerce al voor mobiel is geoptimaliseerd, volgt u de procedure om te verzekeren dat uw productpaginasjablonen er absoluut goed uitzien op het mobiele scherm.
Je vindt een optie Responsieve modus in de linkerbenedenhoek van de Elementor-interface.
Wanneer u op de mobiel reagerende optie klikt, kunt u schakelen tussen opties voor mobiel, desktop en tabbladweergave.
Klik op een van de opties die u wilt bekijken en pas het ontwerp aan als u een complicatie vindt.
Sla nu uw productpagina op en ga door met publiceren.
Elementor Pro-prijzen
Elementor-basisversie is gratis beschikbaar, terwijl de pro-versie wordt geleverd met drie licenties. Als u op zoek bent naar uw persoonlijke blog of naar een enkele site, dan is de persoonlijke licentie het meest geschikt voor u, waar u een WooCommerce-builder kunt krijgen, samen met meer dan 90 professionele widgets.
Terwijl de plus- en expertlicenties geschikt zijn voor volwassen bedrijven of agentschappen met een ondersteuning van respectievelijk 3 sites en 1000 sites.
Afsluiten
Het enige doel van Elementor-paginabuilder is om de gebruikers in staat te stellen hun creativiteit de vrije loop te laten zonder afhankelijk te zijn van de codering. Elementor wordt geleverd met een verscheidenheid aan widgets waarmee u elk soort productpagina's kunt maken op basis van aantrekkelijke lay-outs. De basis WooCommerce-elementen zijn meer dan 10 waarmee gebruikers elke knik en curve van de winkelpagina kunnen aanpassen. En maak je geen zorgen als je het gewenste element niet in het Elementor-menu vindt! Er zijn veel andere geavanceerde instellingen die je arsenaal kunnen upgraden en meerdere elementen aan je bibliotheek kunnen toevoegen. Een daarvan is Essential Add-ons die wordt geleverd met speciale elementen voor alleen WooCommerce.
