Maak een Elementor WooCommerce-productpagina

Winkeltrends veranderen in een snel tempo en mensen kopen vaker dan ooit online.

Dat is de reden waarom de behoefte aan een e-commerce winkel steeds groter wordt om aan de online winkelgewoonten te voldoen, omdat mensen het handiger vinden om online te kopen in plaats van uit te gaan om te winkelen.

U kunt uw e-commerce winkel ook meteen starten, met behulp van de juiste tools en instellingen. En u zult binnen een recordtijd een drastische stijging van uw omzet merken.

Als je van plan bent een e-commerce winkel te starten en op zoek bent naar een WordPress-expert om het werk voor je te doen, dan kan ik je vertellen dat je er geen nodig hebt.

Ja! Je kunt het zelf doen omdat je geen WordPress-ontwikkelaar of codeerexpert hoeft te zijn en je kunt het doen zonder enige kennis van coderen met de juiste tools en instellingen.

Volg gewoon de stapsgewijze handleiding voor het maken van een WooCommerce-winkelpagina met behulp van de Elementor-paginabuilder.

Laten we dieper graven om ter zake te komen!

Wat heb je nodig bij het maken van een productpagina met Elementor?

Installeer de WooCommerce- plugin op uw WordPress-site vanuit de WordPress.org-repository en bovendien moet u de Elementor-paginabuilder . De gratis versie kan worden gedownload van WordPress.org, maar de gratis versie wordt geleverd met beperkte aanpassingsmogelijkheden. Als je daarom grenzeloze aanpassingsmogelijkheden wilt, ga dan voor de professionele 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 ins > Nieuw toevoegen > voer Elementor-paginabuilder in > klik op installeren en activeren.

  • Voor Elementor Pro:

Koop de Pro-versie van Elementor.com en upload vervolgens het zipbestand en klik vervolgens op installeren en activeren.

Maak stap voor stap een Elementor WooCommerce productpagina aan

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 gedeelte Sjabloon vanuit uw Dashboard-menu en klik op “Nieuw toevoegen”.

Selecteer nu in het vervolgkeuzemenu het item “Enkel product”

Het beste is dat de Elementor wordt geleverd met een aantal vooraf gemaakte productpaginasjablonen, dus als je snel aan de slag wilt, selecteer dan iemand uit de opties die het dichtst bij de door jou gewenste optie lijkt.

Het is veel eenvoudiger om een ​​productpagina te maken op basis van een vooraf gemaakte sjabloon dan om helemaal opnieuw te beginnen. Wijzig daarom elk bestaand sjabloon en bespaar tijd en moeite.

We hebben dit sjabloon geselecteerd voor onze productpagina.

Nadat u uw favoriete sjabloon heeft geselecteerd, wordt u naar de Elementor-editor geleid, waar u de sjabloon naar eigen smaak kunt aanpassen.

Hier zie je verschillende blokken in het menu aan de linkerkant. Sleep het blok waarmee u wilt werken en zet het daar neer.

Klik op de knop “+” Toevoegen en selecteer welke kolomgrootte u wilt toevoegen.

We hebben twee kolomgroottes geselecteerd voor onze productsjabloon.

Voeg nu een producttitelwidget toe aan de rechterkolom en voeg de titel van uw product eraan toe.

Nadat u de producttitel heeft toegevoegd, is de volgende stap het toevoegen van de “Woo broodkruimels” erboven.

Voeg nu de productafbeelding toe in de linkerkolom en sleep de productafbeeldingwidget uit de linkerkolom.

U kunt de opvulling aan beide kolommen toevoegen om ze enigszins uit elkaar te houden.

Nadat u de afbeelding heeft toegevoegd en de opvulling heeft aangepast aan de vereiste afmetingen, voegt u de productbeoordelingswidget toe onder de producttitel.

Voeg een korte beschrijving van de productwidget toe onder het productrecensieblok. 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. Hiervoor moet u de prijswidget onder de beschrijving van het product slepen en neerzetten.

Nadat u het prijstabblad onder de productbeschrijving hebt 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 letterkleur van zwart naar een andere kleur naar keuze.

Voeg nu de widget "toevoegen aan winkelwagen" toe en pas desgewenst de kleur, het lettertype of de stijl aan via het menu.

Voeg nu product-meta toe onder de prijswidget die de productcategorie en het serienummer van het product toont.

Stap 2: voeg aanvullende informatie over het product toe in het volgende gedeelte.

Maak een nieuwe sectie met twee kolommen en voeg vervolgens tabbladen met productgegevens toe, inclusief beschrijving, aanvullende informatie en recensies. En voeg aan de rechterkant van de kolom een ​​gerelateerde productsectie toe.

Om hetzelfde formaat voor 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 of voeg een “up-sell-sectie” toe.

Hier ziet u hoe uw up-sell-sectie eruit ziet na toevoeging. Voeg wat opvulling toe om de sectie uit te lijnen.

En ten slotte bent u klaar met het ontwerpen van uw productpagina. De laatste stap is nu 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 voorwaarde toevoegen, selecteer vervolgens de categorie van uw product en klik op publiceren.

Mobiel optimaliseer uw WooCommerce-productpagina

Omdat er veel verkeer via de smartphone komt, moet u uw winkel optimaliseren voor weergave op de smartphone, anders loopt u mogelijk uw omzet mis.

Hoewel WooCommerce al voor mobiel is geoptimaliseerd, volgt u de procedure om er zeker van te zijn dat uw productpaginasjablonen er absoluut goed uitzien op een mobiel scherm.

Je vindt een optie Responsieve modus in de linkerbenedenhoek van de Elementor-interface.

Wanneer u op de mobiel responsieve optie klikt, kunt u schakelen tussen de weergaveopties voor mobiel, desktop en tabblad.

Klik op een van de opties die u wilt bekijken en pas het ontwerp aan als u een complicatie tegenkomt.

Sla nu uw productpagina op en ga verder met het publiceren ervan.

Elementor Pro-prijzen

De basisversie van Elementor 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-bouwer kunt krijgen samen met meer dan 90 professionele widgets.

Terwijl de plus- en expertlicenties geschikt zijn voor volwassen bedrijven of bureaus met een ondersteuning van respectievelijk 3 sites en 1000 sites.

Inpakken

Het enige doel van de Elementor-paginabuilder is om 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 als u het gewenste element niet in het Elementor-menu vindt, hoeft u zich geen zorgen te maken! Er zijn nog veel meer geavanceerde instellingen die je arsenaal kunnen upgraden en meerdere elementen aan je bibliotheek kunnen toevoegen. Een daarvan zijn Essential Add-ons die alleen speciale elementen voor WooCommerce bevatten.

Holderkhu

live:.cid.e495888558d5265f

Recente berichten

Kop- en voettekst gebruiken met Elementor

De kop- en voetteksten van een website zijn essentiële elementen. In de meeste gevallen biedt de kop navigatie...

6 januari 2022

WordPress-themavergelijking: Astra versus OceanWP

Twee van de meest populaire WordPress-thema’s op de markt zijn Astra en OceanWP. Professioneel…

2 januari 2022

Vergelijking van WordPress-nieuwsthema's: Krant versus Astra

Voor het maken van een uitstekende nieuwswebsite hoeft u geen webdesigner te worden. Wij…

25 oktober 2021

Maak een nieuwsgerelateerde website met Krant Thema

Het krantenthema is een van de belangrijkste WordPress-thema's ontworpen door tagDiv, een…

18 oktober 2021

Hoe u een e-commerce kunt bouwen met de Avada WooCommerce-builder

Als het gaat om het opzetten van een online winkel, is WooCommerce de go-to plugin . Het…

4 oktober 2021

Hoe u sticky header- en scrolleffecten gebruikt met Elementor

Een header is over het algemeen het eerste dat iemand ziet wanneer hij of zij uw website bezoekt,…

21 september 2021