Skapa en anpassad WooCommerce-produktsida med ett Flatsome-tema

Flatesome tema

Flatsome är ett kraftfullt WordPress -tema utformat för e -handelswebbplatser och levereras med WooCommerce -integration.

Det är ett av de mest populära WooCommerce -teman på ThemeForest. När jag skrev den här självstudien var det över 174 500 försäljning och ett fantastiskt 4,8-stjärnigt betyg från över 6 600+ recensioner.

Flatsome är främst utformad med tanke på nybörjare och icke-tekniska användare.

Det här är bra för människor som vill komma igång med ett onlineföretag men inte vet hur man kodar eller har budget för att anlita en professionell kodare. Med Flatsome kommer du att kunna skapa en professionell webbplats med enkla och intuitiva verktyg.

Nu kommer Flatsome packad med massor av fantastiska funktioner och funktioner. För att visa vad som är tillgängligt och hur det fungerar har vi en snabb handledning som visar dig hur du skapar en WooCommerce -produktsida med Flatsome.

Så, utan vidare, låt oss komma igång:

Innehållsförteckning:

Skillnad mellan Flatsome, WooCommerce och WordPress

När vi välkomnar våra nya läsare måste vi lägga in nödvändig information för att säkerställa att alla våra läsare är på samma sida. Här kommer vi att diskutera skillnaden i alla tre terminologier som vi kommer att använda i denna artikel.

Låt oss börja med WordPress. Det är en plattform där du installerar olika teman och plugin program för att skapa din webbplats. Det finns tusentals plugin program och teman tillgängliga för att utföra andra uppgifter enligt dina krav.

WooCommerce är ett plugin vi installerar på WordPress som låter dig lägga till olika funktioner på vår webbplats. Med den här plugin installationen kan vi skapa vår webbplats och webbutik med ytterligare funktioner som kundvagn, betalningshantering, produkthantering etc.

Slutligen, men säkert, är ett av de mest kritiska elementen utsikterna på vår webbplats. Flatsome är ett tema som låter oss anpassa vår webbplats perspektiv enligt våra önskemål. Till exempel, om din företagslogotyp är orange, vill du reflektera över din webbplats färg. Det är vad Flatsome kan erbjuda dig.

Skapa en WooCommerce -produktsida med Flatsome -temat

Eftersom all vår läsare har kunskap om WordPress, WoCommerce och Flatsome, är det dags för oss att gå vidare till vår produktsidas anpassning med den fantastiska UX-byggaren som kommer med Flatsome-temat. Det är en drag-and-drop-funktion som gör designerns liv extremt enkelt.

Nästan alla har handlat online, förmodligen på grund av de utmanande tider som vi har mött de senaste månaderna. Att stanna hemma var den säkraste lösningen för oss alla. Det är anledningen till att alla våra läsare är överens om att en webbutik är mycket mer komplicerad jämfört med en vanlig webbplats.

Men med hjälp av WooCommerce och Flatsome har denna uppgift blivit extremt lätt. Du måste sitta ner och planera hur din webbplats kommer att se ut, och det är det. WooCommerce kommer att vara där för att hjälpa dig med sina byggalternativ. Du kan skapa en fullfjädrad fungerande webbutik på bara några minuter med dra och släpp.

Med WooCommerce och Flatsome kommer du att kunna ge dina idéer om att ha en webbutik ett helt nytt liv. Din hemsida måste ha ett modernt och vackert utseende så att den kan locka kunder. Därför är Flatsome den bästa lösningen för alla dina problem, så ladda ner den härifrån och låt oss komma igång.

Flatsome har några fantastiska funktioner, men en av delarna är att det har blivit ett toppval bland mer än 300 000 användare. Ett ultimat verktyg hjälper till att skapa fantastiska lyhörd webbplatser utan att behöva koda en enda rad. Dessutom gör dess förmåga att skapa några mycket kreativa och unika onlinebutiker det ännu mer värdigt.

Så utan att slösa bort ytterligare tid, låt oss gå vidare till handledningen. Denna handledning tar dig igenom hela processen för att designa produktsidan. Bilderna hjälper dig att få en bättre uppfattning om hur uppgiften kommer att gå igenom processen.

Steg 1: Välj en layout för produktsidan

Först börjar vi med att välja en layout för produktsidan. Detta urval skapar en grundsida för vår webbutik, som vi kommer att anpassa efter våra önskemål senare. Den här steg-för-steg-guiden kommer att leda dig genom att anpassa sidan.

För den här amp fortsätter vi med Classic Shop-alternativet. Det finns dock ingen begränsning för dig. Processen för anpassning kommer att likna för varje layout du väljer. Den enda skillnaden är att den grundläggande strukturen på sidan kommer att skilja sig från den andra.

Vi gick vidare till produktanpassaren och gav det namnet sidofältet i full höjd.

Det finns två alternativ för att anpassa produktsidan. Den första ska göras med UX-byggaren, medan den andra bygger sidan manuellt. Om du väljer det andra alternativet måste du gå till den officiella dokumentationen och hitta kortkoder. Om du är nybörjare och det här är din första upplevelse med att bygga en webbutik, rekommenderar jag att du går till det här första alternativet.

(Valfritt) Steg 2: Skapa produktsida manuellt

Här är en skärmdump av den officiella dokumentationssidan för Flatsome. Du kan skriva ordets kortkoder och söka efter dem.

När du väl har sökt visas en lista med kortkoder på skärmen. Du kan välja de kortkoder som är viktiga för produktsidan. Att använda kortkoder kräver mindre ansträngning, men det är viktigt att du har lite praktisk erfarenhet av WordPress och att använda kortkoder.

Här är listan över kortkoder som du kan använda på webbplatsen för att skapa sidor.

I den här amp anpassar vi den vänstra sidofältets layout i full höjd; alltså kommer vi att kopiera koden för designen. Följande är en bild av det tillämpade, men du kan enkelt kopiera det från strukturen.

Börja skapa ett block med en titel. Om du vill utveckla huvudet måste du klicka på "Lägg till nytt" tillgängligt under UX -block placerade i din instrumentpanel.

Du kan namnge blocket enligt dina önskemål. Här i denna ex amp le har vi kallat facket som "Fullhöjd vänster sidofält layout." Därefter kan du se kortkoderna i blockredigeraren. När du har kopierat önskade kortkoder kan du trycka på publicera.

Vi kommer att vara i nivå efter detta enda lilla steg där vi kan anpassa vår sida efter våra önskemål. Navigera nu till produktsidans temat och tryck på den anpassade layoutikonen.

När du är klar kan du nu skapa block från rullgardinsmenyn Anpassad produktlayout.

Välj det block som vi just skapade. Vårt främsta mål för att skapa det blocket var att skapa en produktsida ur det. Enligt denna amp är sidovalens layout i full höjd blocket, medan det i slutet är som du har nämnt.

När du är klar trycker du bara på knappen Publicera; inställningarna sparas.

Steg 3: Anpassa produktsidan

Det är dags för oss att börja anpassa. Först navigerar vi på den befintliga produktsidan från fronten som vi ställde tidigare i stegen.

Det är viktigt att du väljer en viss produkt som vi behöver installera. Du bör ha fullständiga detaljer, bilder av arbetet som vi behöver anpassa. På detta sätt blir processen bekvämare att visualisera sidavsnittet du skapar.

Alternativet UX-byggare är synligt. Klicka bara på knappen för att starta anpassningen.

När UX-byggaren är öppen kan du se från bilden att elementen för produktsidan är tillgängliga i vänstra sidopanelen på din produktsida.

Den vänstra sidopanelen är det block som vi ursprungligen skapade. Vi skapade den med hjälp av kortkoderna från dokumentationen.

Du har alternativ för att ordna om elementen från vänster sidopanel och ändra inställningarna från elementalternativet. I den här amp kommer vi att ordna om priset som finns tillgängligt i menyn till vänster.

Dessutom kan du också ordna om element från byggarens förhandsvisning och lägga på ytterligare komponenter på byggarens produktsida. I denna demo har sektionen Produkterflikar och den relaterade produkten omarrangerats med bara en enkel dra och släpp.

Med den betydande dra-och-släpp-funktionen är Flatsome redo att ge dig det du letar efter på din webbplats. Med mycket anpassningsbara moduler kan du enkelt skapa fantastiska sidor. Dra och släpp-funktionen gör livet ännu bekvämare.

Avslutar

Det är absolut nödvändigt att ha en online-verksamhet i denna moderna tidsålder eftersom människor föredrar att stanna hemma för att vara säkra. Så börja bygga ditt företag första onlinebutik med Flatsome och fascinera dina kunder med dess unika och kreativa. Dessutom finns det ingen röra av kod i innehållsredigeraren, bara några kortkodslinjer. Flatsome är utan tvekan det bästa temat jag har stött på. Så det finns ingen anledning att leta efter något annat tema, bara klicka på nedladdningsknappen och börja bygga din anpassade webbutik direkt.

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *