Beaver Builder WooCommerce-integratie 2024– Hoe Beaver Builder gebruiken om WooCommerce-product- en winkelpagina's te bouwen?

Het kan spannend zijn om een ​​online winkel te creëren. Het draagt ​​bij aan het succes van uw bedrijf om een ​​geweldige etalage te hebben. Als u echter een winkel wilt ontwerpen die goed werkt, kunt u moeite hebben.

Een eCommerce-site die zowel u als uw klanten tevreden stelt, kan worden gemaakt met behulp van een WooCommerce-paginabuilder. Laten we eens kijken naar de WooCommerce inpluggen. Onze volgende stap is om te laten zien hoe eenvoudig het is om uw online winkel te maken met Beaver Builder. Kom op, laten we beginnen!

bever bouwer

Een korte introductie tot WooCommerce

Met WooCommerce kunt u: eCommerce-functionaliteit toevoegen naar uw WordPress-site zodat u uw producten online kunt verkopen:

Bovendien bevindt u zich in goed gezelschap, aangezien WooCommerce in 28 naar verwachting een marktaandeel van ongeveer 2020 procent zal hebben.

WooCommerce is een open source, zeer aanpasbare oplossing, net als WordPress. Hiermee kunt u betalingsgateways en verschillende verzendopties instellen en direct aan de slag met uw eCommerce-imperium.

Met WooCommerce kunt u ook uw producten maken, bewerken en beheren:

Het gebruik van WooCommerce-add-on-plug-ins geeft u toegang tot vele andere functies.  

WooCommerce-winkel- en productpagina's bouwen met Beaver Builder (in 4 eenvoudige stappen)

Voordat u echter de functies van WooCommerce onder de knie kunt krijgen, moet u eerst een website lanceren. Begin met het installeren en activeren van de WooCommerce, Beaver Builder en Beaver Themer WordPress-plug-ins. Nu bent u klaar om uw product- en winkelpagina's te maken.

Stap 1: Creëer uw winkel door producten toe te voegen

Maak vermeldingen voor uw producten als de eerste stap bij het opzetten van uw winkel. Wanneer u WooCommerce gebruikt, kunt u fysieke goederen, digitale goederen en artikelen met variaties (zoals maat en kleur) verkopen.

Als WooCommerce nieuw voor u is, kunt u een voorbeeld van een productset installeren die door WooCommerce wordt geleverd om een ​​idee te krijgen van hoe het systeem werkt met verschillende soorten items. Hier worden verschillende WooCommerce-productfuncties uitgelegd, inclusief variatie- en verkoopopties.

Je leert hoe je een basisproduct maakt, als je helemaal opnieuw wilt beginnen. Wat u ook van plan bent te verkopen, de andere secties in dit bericht zullen u ten goede komen.

Maak een nieuw product in uw WordPress-dashboard. Selecteer Producten > Nieuw toevoegen in het menu aan de linkerkant. Vul de volgende velden in voor het artikel dat u aan uw winkel wilt toevoegen:

U kunt de meeste belangrijke parameters voor uw artikel instellen door naar het paneel Productgegevens te scrollen, inclusief prijzen, belastingen en verzendkosten. In WooCommerce heb je de mogelijkheid om belastingen en verzendopties voor producten op te nemen, die op individuele basis kunnen worden opgeheven.

Bepaal in de algemene instellingen of uw product kan worden gedownload of virtueel. Houd de selectievakjes uitgeschakeld als het een fysiek product is:

Naast het voorraadbeheer kun je aan de slag. Door producten aan elkaar te koppelen heb je de mogelijkheid tot cross-sell en up-sell.

U kunt ook een tweede, kortere beschrijving van uw artikel toevoegen in het veld Korte productbeschrijving, onder het paneel Productgegevens. Storefront-vermeldingen bevatten deze informatie meestal.

U ziet productcategorieën en tags aan de rechterkant van uw scherm. Hier zijn enkele handige organisatoren:

Uw productvermelding moet een of twee afbeeldingen bevatten. De volgende opties zijn beschikbaar: enkele afbeeldingen of groepen afbeeldingen:

U kunt een foto uploaden vanaf uw apparaat of een afbeelding toevoegen vanuit uw mediabibliotheek. Op dezelfde manier kunt u afbeeldingen toevoegen aan productgalerijen. De afbeeldingen kunnen eenvoudig worden gesleept en neergezet om ze opnieuw te ordenen.

Stap 2: Ontwerp nieuwe productpagina's

Om uw producten weer te geven, kunt u productpagina's maken. De video-tutorial van Beaver Themer biedt stapsgewijze instructies voor het aanpassen van WooCommerce-pagina's met één product. 

Beaver Themer is een krachtige tool om Beaver Builder uit te breiden tot een WooCommerce-paginabuilder. Met deze add-on kunt u sjablonen toepassen op uw hele site.  

 Klik op Themalay-outs > Nieuw toevoegen in Beaver Builder:

Een themalay-out met productinstellingen toevoegen om het te helpen fungeren als een WooCommerce-paginabuilder.

Uw lay-out moet een titel hebben. U moet uw lay-out en type selecteren voordat u op de knop Themerlay-out toevoegen klikt.

Blijf ervoor zorgen dat het nieuwe ontwerp op elke productpagina wordt toegepast terwijl u naar de volgende pagina gaat. Kies in het tweede vak Alle producten onder Locatie en selecteer vervolgens Product:

De juiste Themer-lay-outinstellingen om Beaver Themer als WooCommerce-paginabuilder te gebruiken.

U kunt uw lay-out bewerken met Beaver Builder nadat u uw werk hebt opgeslagen. Klik vanaf de rechterbovenhoek op het blauwe plusteken. Nadat u op Sjablonen hebt geklikt, klikt u op Nieuw:

De locatie van de WooCommerce-productsjabloon in Beaver Thermer.

Vervang bestaande lay-out door Product > Bestaande lay-out vervangen te selecteren. Er zijn al een paar handige standaardinstellingen die van uw sjabloon een productpagina maken:

Beaver Builder's standaard productsjabloon

Het toevoegen of verwijderen van WooCommerce-modules uit uw basislay-out is mogelijk zodra u deze heeft. De WooCommerce-modules zijn toegankelijk via Modules > Themamodules > WooCommerce. Afgezien van productbeoordelingen, beschrijvingen, upsells en vele andere, heb je veel opties:

WooCommerce-modules gebruiken

Tijdens het bewerken van een lay-out kunt u overschakelen naar een ander product door de functie Voorbeeld als: in Beaver Builder te gebruiken:

Voorvertoning van verschillende producten in Beaver Builder

Met die functie kunt u zien hoe elk van uw producten eruitziet wanneer u ze bekijkt. Publiceer uw productpagina zodra u tevreden bent met het ontwerp en de modules die het bevat. Uw afzonderlijke productpagina's worden nu opgemaakt in de nieuwe indeling.

Stap 3: Maak een WooCommerce-winkelpagina

Het is tijd om de winkelpagina dezelfde behandeling te geven als je WooCommerce-producten. Een standaard WooCommerce-winkellay-out is heel eenvoudig en niet erg spannend:

WooCommerce's standaard winkellay-out

Bij het ontwerpen van uw winkelpagina is Beaver Themer een betere keuze. Begin door naar WooCommerce > Instellingen te gaan, op het producttabblad te klikken en ervoor te zorgen dat de winkelpagina naar Winkel of een andere aangepaste pagina die je hebt gemaakt verwijst. Het geeft uw producten weer als een archiefpagina als u er een opgeeft.

Selecteer Themer Layouts > Add New in Beaver Builder > Theme Builder en klik vervolgens op Add New. Kies op het volgende scherm de optie Thema-indeling onder Type:

Een winkelpagina-indeling maken

In het volgende scherm kunt u de locatie van het Productarchief kiezen. De producten van uw winkel worden weergegeven op de winkelpagina en productcategoriepagina's. Indien nodig kunt u deze wijzigen.

De productarchiefpagina aanpassen

Door op Beaver Builder starten te klikken, kunt u uw lay-out aanpassen. De volgende pagina verschijnt wanneer u op het plusteken bovenaan het scherm klikt en vervolgens op Sjablonen klikt:

Een Beaver Builder-sjabloon gebruiken

Een nieuwe winkelpagina kan eenvoudig worden gemaakt met behulp van de sjabloon Producten. Met behulp van alle tools die we tot nu toe hebben behandeld, kunt u wijzigingen aanbrengen in de sjabloon zodra deze is gemaakt. 

Zorg ervoor dat uw winkellay-out past bij de stijlinstellingen van de module Berichten door ze aan te passen totdat ze passen. 

Klik boven aan het scherm op Gereed > Publiceren zodra de wijzigingen in de module zijn opgeslagen. 

Het laatste dat u hoeft te doen, is ervoor zorgen dat de pagina die u heeft aangewezen als uw winkelpagina, wordt weergegeven in het navigatiemenu van uw site. Anders kunt u het toevoegen vanuit het gedeelte Uiterlijk> Menu's van het WordPress-dashboard.

Stap 4: Pas uw winkelpagina verder aan met WooCommerce-lay-outs

Een WooCommerce-module is ook een uitstekende functie van Beaver Builder, waardoor het een uitstekende WooCommerce-paginabuilder is. Hiermee kunt u delen van WooCommerce-functionaliteit toevoegen aan elke Beaver Builder-structuur op uw site. De volgende opties zijn beschikbaar in deze module:

  • Enkele en meerdere producten: 
  • U kunt geselecteerde producten weergeven op basis van product-ID's of categorieën, of u kunt producten tonen die in de uitverkoop zijn, recente producten, best beoordeelde producten of wat u maar wilt.
  • Winkelwagen: Toont de inhoud van de WooCommerce-winkelwagen.
  • Afrekenen: geeft de afrekenpagina weer zoals deze er normaal uitziet.
  • Bestelling volgen: voert informatie over bestellingen in dit formulier in.
  • Mijn account: deze pagina bevat de informatie die u normaal op de pagina Mijn account vindt, zoals accountgegevens, eerdere bestellingen en adresgegevens
WooCommerce-lay-outs in Beaver Builder.

Links

Conclusie

Het creëren van een online winkel die uw merk effectief vertegenwoordigt, is een uitdagende onderneming. Het proces kan echter eenvoudiger worden gemaakt met behulp van Beaver Builder, een plug-in voor WooCommerce.

Zoals u kunt zien, hebben we vier belangrijke stappen uiteengezet voor het bouwen van uw etalage met zowel WooCommerce als Beaver Builder:

  1. Creëer een winkel door producten toe te voegen.
  2. Ontwerp een nieuwe productpagina.
  3. Maak een nieuwe WooCommerce-winkelpagina aan.
  4. Met WooCommerce-lay-outs kunt u uw eCommerce-site verder aanpassen.

Is er iets dat u wilt weten over het gebruik van Beaver Builder om product- en winkelpagina's te bouwen? Deel uw mening hieronder in het commentaargedeelte!

Aishwar Babber

Aishwar Babber is een gepassioneerd blogger en een digitale marketeer. Hij praat en blogt graag over de nieuwste technologie en gadgets, wat hem motiveert om te rennen GizmoBase. Momenteel oefent hij zijn expertise op het gebied van digitale marketing, SEO en SMO uit als fulltime marketeer op verschillende projecten. Hij is een actieve investeerder in AffiliateBay en een directeur bij ImageStation.

Laat een bericht achter