Beaver Builder WooCommerce Integration 2024 – Hur använder man Beaver Builder för att bygga WooCommerce-produkt- och butikssidor?

Det kan vara spännande att skapa en webbutik. Det bidrar till ditt företags framgång att ha ett bra skyltfönster. Men om du vill designa en butik som fungerar bra kan du kämpa.

En e-handelssida som är både tilltalande för dig och dina kunder kan skapas med hjälp av en WooCommerce-sidbyggare. Låt oss ta en titt på WooCommerce plug-in. Vårt nästa steg blir att visa hur enkelt det är att skapa din webbutik med Beaver Builder. Kom igen, låt oss börja!

bäverbyggare

En kort introduktion till WooCommerce

Med WooCommerce kan du lägga till e-handelsfunktioner till din WordPress-webbplats så att du kan sälja dina produkter online:

Dessutom kommer du att befinna dig i gott sällskap, eftersom WooCommerce beräknas ha en marknadsandel på cirka 28 procent år 2020.

WooCommerce är en öppen källkod, mycket anpassningsbar lösning, precis som WordPress. Med den kan du ställa in betalningsportar och olika fraktalternativ och komma igång med ditt e-handelsimperium direkt.

Med WooCommerce kan du också skapa, redigera och hantera dina produkter:

Att använda WooCommerce-tilläggsplugin ger dig tillgång till många andra funktioner.  

Bygga WooCommerce butik och produktsidor med Beaver Builder (i 4 enkla steg)

Men innan du kan ta tag i WooCommerces funktioner behöver du först en webbplats för att lansera. Börja med att installera och aktivera WordPress-pluginerna WooCommerce, Beaver Builder och Beaver Themer. Nu är du redo att skapa dina produkt- och butikssidor.

Steg 1: Skapa din butik genom att lägga till produkter

Skapa listor för dina produkter som det första steget för att skapa din butik. När du använder WooCommerce kan du sälja fysiska varor, digitala varor och varor med variationer (som storlek och färg).

Du kan installera en provproduktuppsättning från WooCommerce för att få en känsla av hur systemet fungerar med olika typer av föremål om du är ny på WooCommerce. Flera WooCommerce-produktfunktioner förklaras här, inklusive variation och försäljningsalternativ.

Du kommer att lära dig hur du skapar en basprodukt, om du vill börja om från början. Oavsett vad du planerar att sälja, kommer de andra avsnitten i det här inlägget att gynna dig.

Skapa en ny produkt i din WordPress-instrumentpanel. Välj Produkter > Lägg till nytt i menyn till vänster. Fyll i följande fält för varan du vill lägga till i din butik:

Du kan ställa in de flesta viktiga parametrar för din vara genom att rulla ner till produktdatapanelen, inklusive priser, skatter och frakt. I WooCommerce har du möjlighet att inkludera skatter och fraktalternativ för produkter, som kan åsidosättas på individuell basis.

Bestäm om din produkt är nedladdningsbar eller virtuell i de allmänna inställningarna. Håll rutorna omarkerade om produkten är en fysisk:

Förutom lagerhantering kan du börja. Anslutande produkter ger dig möjligheten att korsförsälja och merförsälja.

Du kan också lägga till en andra, mer kort beskrivning av din vara under fältet Produktbeskrivning under produktdatapanelen. Skyltfönster innehåller vanligtvis denna information.

Du kommer att se produktkategorier och taggar till höger på skärmen. Här är några hjälpsamma arrangörer:

Din produktinformation bör innehålla en bild eller två. Följande alternativ är tillgängliga: enstaka bilder eller grupper av bilder:

Du kan antingen ladda upp ett foto från din enhet eller lägga till en bild från ditt mediebibliotek. På samma sätt kan du lägga till bilder i produktgallerier. Bilderna kan helt enkelt dras och släppas för att ordna om dem.

Steg 2: Designa nya produktsidor

För att visa dina produkter kan du skapa produktsidor. Beaver Themer-videohandledningen ger steg-för-steg-instruktioner om hur du anpassar WooCommerce-enkelproduktsidor. 

Beaver Themer är ett kraftfullt verktyg för att utöka Beaver Builder till en WooCommerce-sidbyggare. Du kan använda mallar på hela din webbplats med detta tillägg.  

 Klicka på Temalayouter > Lägg till nytt i Beaver Builder:

Lägga till en temalayout med produktinställningar för att hjälpa den att fungera som en WooCommerce-sidbyggare.

Din layout bör ha en titel. Du måste välja din layout och typ innan du klickar på knappen Lägg till temalayout.

Fortsätt att se till att den nya designen tillämpas på varje produktsida när du går vidare till nästa sida. I den andra rutan, välj Alla produkter under Plats och välj sedan Produkt:

De korrekta Themer-layoutinställningarna för att använda Beaver Themer som en WooCommerce-sidbyggare.

Du kan redigera din layout med Beaver Builder efter att du har sparat ditt arbete. Börja i det övre högra hörnet, klicka på det blå plustecknet. När du har klickat på Mallar klickar du på Ny:

Platsen för WooCommerce-produktmallen i Beaver Thermer.

Ersätt befintlig layout genom att välja Produkt > Ersätt befintlig layout. Några användbara standardinställningar finns redan på plats, vilket gör din mall till en produktsida:

Beaver Builders standardproduktmall

Att lägga till eller ta bort WooCommerce-moduler från din grundläggande layout är möjligt när du väl har det. WooCommerce-modulerna kan nås via Moduler > Temamoduler > WooCommerce. Bortsett från produktbetyg, beskrivningar, merförsäljningar och många andra, har du många alternativ:

Använder WooCommerce-moduler

När du redigerar en layout kan du växla till att se en annan produkt genom att använda funktionen Förhandsgranska som: i Beaver Builder:

Förhandsgranska olika produkter i Beaver Builder

Med den funktionen kan du kolla in hur var och en av dina produkter ser ut när du tittar på dem. Publicera din produktsida när du är nöjd med designen och modulerna den innehåller. Dina enskilda produktsidor kommer nu att utformas i det nya formatet.

Steg 3: Skapa en WooCommerce-butikssida

Det är dags att ge butikssidan samma behandling som dina WooCommerce-produkter. En standard WooCommerce-butikslayout är väldigt enkel och inte särskilt spännande:

WooCommerces standardbutikslayout

När du designar din butikssida är Beaver Themer ett bättre val. Börja med att gå till WooCommerce > Inställningar, klicka på produktfliken och se till att butikssidan pekar på butik eller någon annan anpassad sida som du har skapat. Den visar dina produkter som en arkivsida om du anger en.

Välj Themer Layouts > Lägg till nytt i Beaver Builder > Theme Builder och klicka sedan på Lägg till nytt. Välj alternativet Temalayout under Typ på nästa skärm:

Skapa en butikslayout

Följande skärm låter dig välja platsen för produktarkivet. Din butiks produkter kommer att visas på butikssidan och produktkategorisidor. Om det behövs kan du ändra det.

Anpassa produktarkivsidan

Genom att klicka på Starta Beaver Builder kommer du att kunna anpassa din layout. Följande sida visas när du klickar på plustecknet högst upp på skärmen och sedan klickar på Mallar:

Använda en Beaver Builder-mall

En ny butikssida kan enkelt skapas med hjälp av produktmallen. Med hjälp av alla verktyg som vi har täckt hittills kan du göra ändringar i mallen när den väl har skapats. 

Se till att din butikslayout passar inläggsmodulens stilinställningar genom att justera dem tills de passar. 

Högst upp på skärmen klickar du på Klar > Publicera när ändringarna har sparats i modulen. 

Det sista du behöver göra är att se till att vilken sida du än har angett som din butikssida visas i din webbplatss navigeringsmeny. Annars kan du lägga till det från avsnittet Utseende > Menyer på WordPress-instrumentpanelen.

Steg 4: Anpassa din butikssida ytterligare med WooCommerce-layouter

En WooCommerce-modul är också en utmärkt funktion i Beaver Builder som gör den till en utmärkt WooCommerce-sidbyggare. Det gör att du kan lägga till delar av WooCommerce-funktionaliteten till vilken Beaver Builder-struktur som helst på din webbplats. Följande alternativ är tillgängliga i denna modul:

  • Enstaka och flera produkter: 
  • Du kan visa utvalda produkter baserat på produkt-id:n eller kategorier, eller så kan du visa produkter som finns på rea, senaste produkter, högst rankade produkter eller något annat du vill.
  • Varukorg: Visar innehållet i WooCommerce-varukorgen.
  • Utcheckning: Visar kassasidan som den normalt skulle se ut.
  • Orderspårning: Anger information om beställningar i detta formulär.
  • Mitt konto: Den här sidan innehåller informationen som normalt finns på sidan Mitt konto, såsom kontoinformation, tidigare beställningar och adressuppgifter
WooCommerce-layouter i Beaver Builder.

Snabblänkar

Slutsats

Att skapa en onlinebutik som representerar ditt varumärke på ett effektivt sätt är en utmanande strävan. Processen kan dock göras enklare med hjälp av Beaver Builder, ett plugin för WooCommerce.

Som du kan se har vi beskrivit fyra viktiga steg för att bygga ditt skyltfönster med både WooCommerce och Beaver Builder:

  1. Skapa en butik genom att lägga till produkter.
  2. Designa en ny produktsida.
  3. Skapa en ny WooCommerce-butikssida.
  4. Med WooCommerce-layouter kan du ytterligare anpassa din e-handelswebbplats.

Finns det något du vill veta om att använda Beaver Builder för att bygga produkt- och butikssidor? Dela gärna dina tankar nedan i kommentarsfältet!

Aishwar Babber

Aishwar Babber är en passionerad bloggare och en digital marknadsförare. Han älskar att prata och blogga om den senaste tekniken och prylarna, vilket motiverar honom att springa GizmoBase. Han utövar för närvarande sin expertis inom digital marknadsföring, SEO och SMO som heltidsmarknadsförare i olika projekt. Han är en aktiv investerare i AffiliateBay och en regissör i ImageStation.

Lämna en kommentar