Designa dina WooCommerce -produktkategorier med Elementor

Elementor är en enastående WordPress -sidbyggare för att förbättra standardverktyget för WordPress -byggare genom att lägga till nya funktioner.

Om du minns var de tidiga versionerna av WordPress inte särskilt användarvänliga. Förutom att ha begränsad funktionalitet krävs det att du förlitar dig på färdiga WordPress-teman för att skapa en grundläggande design för din webbplats. För många användare var dock grundfunktionen för WordPress -teman otillräcklig, vilket krävde installation av plugin eller manuell redigering av temakod.

• WooCommerce och Elementor kombination
• Skapa kategorisida i Elementor
• Layout inställningar

Elementor är en blockbaserad byggare som liknar WordPress, men den är mycket mer avancerad än WordPress-byggaren eftersom den är mer intuitiv, lyhörd och funktionsrik. Viktigast av allt, du kan skapa en fantastisk webbplats utan att behöva skriva en rad kod !!

WooCommerce och Elementor kombination

WP-WooCommerce och Elementor är två av de mest använda WordPress- plugin finns tillgängliga idag. Mängden flexibilitet och det stora antalet funktioner som alla erbjuder är helt enkelt ovärderliga. Om du driver en e -handelsbutik är WooCommerce det bästa plugin för nästan alla behov du kan ha. Det är den mest omfattande plugin finns tillgänglig för praktiskt taget alla behov.

Dessutom är Elementor en av de mest effektiva drag-and-drop webbplatsbyggare som finns på marknaden. Det ger dig möjlighet att snabbt designa, anpassa och möblera nästan vilken sida som helst på din webbplats. Ännu fler funktioner är tillgängliga, till exempel att skapa megamenyer och få tillgång till ett brett utbud av tillägg och mallar som är mycket praktiska. Med hjälp av både WooCommerce och Elementor kan du designa och bygga butiks- och affärssidor i professionell kvalitet med minsta möjliga kostnad och ansträngning. Med hjälp av Elementor kan du helt anpassa dina butikslayouter, produktnät och karuseller, samt välja bland en mängd vackra layouter. Också tillgängligt är möjligheten att ställa in och anpassa dina kassor och kundvagnar, samt integrera dem med en mängd olika betalningsalternativ och funktioner för att ge dina kunder större bekvämlighet.

Dessutom kan du skapa anpassade sidor och mönster för digitala varor, inkludera anpassade sidalternativ för frakt och betalningar och posta och förköpa sidor, bland annat. Allt detta bidrar till att ditt företags webbplats ser ut som både professionell och användarvänlig. Tillsammans med de användarvänliga uppmaningsknapparna, parallax-redo-reglagen och en mängd andra funktioner kan du integrera WooCommerce-funktionalitet på din webbplats. Det stora antalet möjligheter som finns är praktiskt taget obegränsat. Om du nu är tillräckligt övertygad, låt oss leda dig igenom processen för att genomföra din plan. Du kan göra en mängd olika saker för att göra din butiksida mer välkomnande, och målet är att dessa steg hjälper dig att skapa en mer välkomnande butiksida för din WooCommerce -butik.

Skapa WooCommerce -kategorisida i Elementor

Om du är bekant med WooCommerce vet du att produktkategorier är avgörande för att organisera dina produkter för korrekt visning och åtkomst av kunder - ju snabbare de kan hitta det de letar efter, desto bättre. Men vad är egentligen produktkategorier?

Kunder lägger en betydande tid på att surfa bland dina produkter på din butiksida, så de måste ha en positiv upplevelse. Det finns inget mer frustrerande än att behöva navigera igenom dussintals sidor för att titta på produkter på din butiks webbplats.

Som ett resultat är kategorisering avgörande för att ge dina kunder en bättre shoppingupplevelse. Kunderna kommer att ha lättare att sortera och filtrera bort sina preferenser om det finns en välordnad och organiserad sektion för alla typer av föremål som kläder eller skor. Om du lägger till leadgenereringselement som uppmaningsknappar, utvalda produktsektioner, popup-fönster för försäljning eller erbjudanden och andra liknande komponenter till detta avsnitt kan det bli mer tilltalande för besökare.

Om du har en WooCommerce -butik och vill ge den en ansiktslyftning är den här självstudien exakt vad du behöver för att komma igång.

Många WooCommerce -teman innehåller en standardlayout för produktkategorier, som kanske passar bäst för dina affärsbehov. Även om dessa standardvärden kan bestå av några användbara funktioner, kan de inte ofta anpassas.

Låt oss komma till saken.
Efter att ha konfigurerat din produkt måste du göra följande innan du publicerar så att den visas i en kategori:

Du kommer att ställa de villkor som avgör var din produktmall ska visas under detta skede. När du använder en mall gäller den automatiskt för alla produktsidor på din webbplats. Du kan också begränsa din sökning till en specifik produktkategori.

Klicka på Publicera, så kan din enda produkt köpas!

Vi är inte klara än.
Det vi just har gjort är inte tillräckligt för att få kategorier live på vår sida; för att få kategorier live på alla eller vissa sidor på vår webbplats behöver vi fortfarande ställa in några saker. För att slutföra uppgiften, skapa en produktkatalogsida som kommer att påverka alla produkter eller en katalogsida som kommer att påverka en specifik produktkategori.
För att göra detta, gå först tillbaka till Elementor > Mina mallar och skapa en produktarkivmall. Välj sedan antingen en befintlig mall eller skapa en ny. Anpassa utseendet på widgeten Arkivprodukter och widgeten Arkivtitel genom att lägga till dem på din sida.

Använd funktionen för kopieringsstil mellan sidor för att anpassa den så att den matchar designen du redan skapat för din enda produktmall och spara sedan dina ändringar.
Gå tillbaka till produktsidan och välj Kopiera från rullgardinsmenyn. Högerklicka på Klistra in stil när du är tillbaka i arkivprodukten. Välj Senaste produkterna från rullgardinsmenyn Fråga > Källor i inställningarna för Arkivprodukter.
Välj sedan ringar från rullgardinsmenyn Produktkategori. Endast ringkategorin kommer att visas på detta sätt. Om du har en lång lista med produkter för en viss kategori bör du aktivera paginering.
Du kan anpassa avståndet mellan kolumnerna och raderna genom att välja stilfliken. Ändra färger, typsnitt och andra aspekter av designen.

Förpublicera, välj de villkor som avgör var arkivet ska visas, precis som du gjorde för den enda produktmallen och publicera sedan.

När du har tryckt på "publicera" kommer din arkivsida att visas.

Elementor pro ger dig möjlighet att designa knepiga rena produktkategorier med en mängd olika alternativ;

Du kan utföra följande med alternativen som är tillgängliga på Elementor Pro:

Layoutinställningar för WooCommerce -produktkategorier

• Kolumner: Ange det exakta antalet kolumner som ska visas, från 1 till 12
• Kategorier räkna: Välj antalet kategorier som ska visas

Frågeinställningar

• Källa: Välj källan från vilken kategorier ska visas, välj från Alla, Manuellt val, Av förälder eller Aktuella underkategorier. Om Manuellt val är valt, välj manuellt vilka kategorier som ska visas. Om "Av förälder" är vald, välj från Endast toppnivå, eller välj en enskild kategori från rullgardinsmenyn.
• Dölj tom: Ställ in på Ja för kategorier utan produkter
• Order By: Ange i vilken ordning kategorierna ska visas. Alternativen inkluderar Namn, Slug, Beskrivning eller Count
• Ordning: Välj för att visa kategorier i ASC eller DESC (stigande eller fallande) ordning

Stilinställningar

• Kolumneravstånd: Ange det exakta gapet mellan kolumnerna
• Radgap: Ställ in det exakta gapet mellan raderna
• Justering: Justera produktdata till vänster, höger eller mitt

Bildinställningar

• Kanttyp: Välj typ av kant, välj bland ingen, fast, dubbel, prickad, streckad eller räfflad
• Kantradie: Ställ in radien för att styra hörnets rundhet
• Avstånd: Justera utrymmet mellan bilderna och deras data

Titelinställningar

• Färg: Välj titelfärg
• Typografi: Ställ in typografialternativen för titeltexten

Räkna inställningar

• Färg: Välj färg för räkningen
• Typografi: Ställ in typografialternativ för räkningen

Slutsats

WooCommerce Builder i Elementor ger dig den designflexibilitet du behöver för att skapa och finjustera dina produktsidor visuellt. Den tid det tar att gå från en idé till en live , och helt funktionell online WooCommerce -butik reduceras avsevärt till följd av att du sparar tid. Sammantaget har anpassning av din WooCommerce -butiksida med Elementor potential att påverka din webbplats övergripande prestanda avsevärt. Du kan antingen hjälpa eller hindra försäljning genom att organisera och visa dina produkter på bästa möjliga sätt för kunderna att se och köpa dem. Installation och anpassning av din WooCommerce -butiksida i Elementor kommer att demonstreras genom stegen i den här guiden. Tänk dock på att detta bara är toppen av isberget när det gäller problemets omfattning. En introduktion till hur du använder Elementor för att skapa den perfekta butiksidan för din butik visas i denna grundläggande demonstration. Använd detta som utgångspunkt och lek med det för att få ut det mesta av denna fantastiska sidbyggare