Hur man anpassar WooCommerce-kategorisidan i WordPress utan kodning

hur man anpassar wooCommerce-kategorisidan

Funderar du på om du ska redigera WooCommerce-produktkategorisidan i Elementor?

Tja, om du är det skulle jag starkt rekommendera att du gör det. Att anpassa WooCommerce-arkivsidan och optimera den kan öka din försäljning.

Men frågan är hur man anpassar WooCommerce produktkategorisida i WordPress?

Tja, du behöver verkligen inte göra någon kodning för att anpassa WooCommerce-kategorisidan om du följer processen som visas i den här bloggen.

I den här artikeln kommer du att lära dig hur man anpassar WooCommerce-kategorisidan utan någon kodning. Dessutom får du också lära känna hur du kan skapa olika anpassade arkivmallar för varje kategori individuellt. Och även sätt du kan optimera din arkivsida för att öka konverteringsfrekvensen.

Så fortsätt läsa….

Varför anpassa WooCommerce-kategorisidor

Enligt byggd med, WooCommerce används av över 29% procent av de 1 miljon bästa webbplatserna. Även om denna popularitet indikerar trovärdigheten hos WooCommerce som ett e-handelsverktyg, återspeglar den också att tusentals och tusentals webbplatser använder samma standardlayout som WooCommerce har att erbjuda.

WooCommerce
WooCommerce-användning bland de 1 miljon bästa sajterna

Och om du tror att du använder standarden WooCommerce sida kommer bara att minimera din webbplatss chans att sticka ut i mängden, då har du fel. Det finns andra skäl som du också måste överväga. För att veta om dessa andra skäl, låt oss ta en titt på WooCommerce standardkategorisida med WordPress Twenty Twenty-Two-tema aktiveras.

Standardsida för WooCommerce-kategori
WooCommerce standardkategorisida

Om du ser, har WooCommerces standardkategorisida ett grundläggande utseende som inte är särskilt tilltalande. Dessutom det har inga avancerade alternativ som att söka efter produkter med namn, filtrera produkter baserat på olika attribut, etc. Allt detta är viktigt för att säkerställa en bra användarupplevelse i din webbutik.

Dessutom, vem gillar inte en snygg sajt som är lugnande för ögonen och lätt att navigera? 

Tja, svaret är alla! Och låt oss gå vidare till nästa avsnitt där du kommer att lära dig hur du anpassar WooCommerce produktkategori sidmallar utan någon kodning.

Anpassa WooCommerce med ShopEngine

Hur man anpassar WooCommerce produktkategorisida i 6 steg

Det här är en lätt att följa handledning om hur man anpassar WooCommerce-kategorisidor i WordPress utan någon kodning. Genom att följa denna process kan du välja layout och design på din WooCommerce-arkivsida på nolltid. Så, låt oss börja...

Steg #1: Installera Elementor sidbyggare och ShopEngine

För att redigera produktkategorisidan för WooCommerce i Elementor med den process som visas i den här bloggen, behöver du två WordPress-plugins:

ShopEngine är den ultimata WooCommerce-byggaren för dra och släpp sidbyggare - Elementor. Det är ett tillägg för Elementor som kommer med ett enormt antal widgets och moduler för att göra WooCommerce-anpassning enkelt.

Notera: Du kan använd kupongen gemenskap20 för att få 20% AV på ShopEngine Pro. Installera Elementor först eftersom ShopEngine är beroende av denna sidbyggare. Om du behöver hjälp med att aktivera ShopEngine Pro, kolla dokumentation.

Steg #2: Skapa en anpassad WooCommerce-kategorisidmall

När du har installerat och aktiverat alla nödvändiga plugins måste du skapa en kategorimall. För att skapa en WooCommerce anpassad kategori sidmall,

  • Navigera till: ShopEngine ⇒ Builders Mall
  • Klicka på Lägg till ny
  • Ange ett mallnamn
  • Välj Skriv som arkiv i rullgardinsmenyn
  • Lämna fältet Tillämplig kategori som det är att skapa en gemensam mall för alla kategorier
  • Aktivera alternativet Set Default för att åsidosätta alla befintliga mallar för kategori/arkivsida
  • Välj det tomma alternativet under Exempeldesign 
  • Klicka på Redigera med Elementor för att börja bygga mallen
skapa WooCommerce anpassad kategori sidmall
Skapa en tom WooCommerce kategori sidmall

Notera: Jag valde det tomma alternativet orsak i den här bloggen, jag ska visa hur man gör skapa en anpassad kategorisida från början. ShopEngine erbjuder flera förbyggd WooCommerce kategori sidmall. Om du vill att använda en förbyggd mall, välj den du gillar och hoppa till steg 5. (steg 3 och 4 är obligatoriska om du vill bygga från grunden)

Steg #3: Välj en layout/struktur för WooCommerce-kategorisidan

När du är i redigeringsläget måste du välja en struktur för din WooCommerce-kategorisida.

Jag kommer att använda 3 olika typer av layouter för tre olika sektioner för att bygga en anpassad arkivsida. Du kan göra samma sak som visas i bloggen eller välja den layout du gillar.

För att välja en struktur, klicka på ikonen "+"., håll sedan muspekaren över den layout du gillar och klicka sedan på den.

välj en struktur för anpassad kategorisida hur man anpassar WooCommerce produktkategorisida handledning
Välj en struktur

Notera: Du kan upprepa samma process för att välja olika layouter.

Relaterad: Hur man anpassar WooCommerce produktsida

Steg #4: Dra och släpp ShopEngine-widgets och anpassa inställningarna

ShopEngine tillhandahåller 8+ dedikerade widgets för att bygga anpassade WooCommerce-arkivsidor. Dessa kategorisidwidgetar är

  • Arkivbeskrivning
  • Arkivprodukter
  • Arkivtitel
  • Antal arkivresultat
  • Arkivvisningsläge
  • Beställ efter filter
  • Filter för produkter per sida
  • Produktlista
  • Produktfilter

Jag kommer att använda några av dessa. Du kan välja att använda dem alla för att redigera produktkategorisidan för Elementor WooCommerce. Men innan dess måste du se till att alla widgets är aktiverade och tillgängliga för användning. 

Du kan aktivera/aktivera widgetarna från ShopEngine ⇒ Widgets. Här slå på alla widgets eller de du ska använda och slutligen klicka på knappen "Spara ändringar" för att uppdatera statusen.

Aktivera alla ShopEngine-kategorisidwidgetar
Aktivera alla ShopEngine-kategorisidwidgetar

Jag ska välja en layout med en kolumn och dra och släpp widgets för avancerad sökning och arkivresultaträkning.

dra och släpp sök- och resultaträkningswidget för wooCommerce-kategorisidan hur man anpassar WooCommerce-kategorisidan
Dra och släpp widgets för avancerad sökning och arkivresultaträkning

Du kan välja widgeten och anpassa relaterade inställningar. Om du till exempel klickar på widgeten Avancerad sökning, i den vänstra panelen, får du alternativ som t.ex Produkter kolumn, Visa kategori i sökresultatet, Visa kategori dropdown, Text för alla kategorier, sökikon, etc.

Anpassa WooCommerce Advanced Search Widget
Anpassa WooCommerce Advanced Search Widget

Nu, för nästa avsnitt, kommer jag att använda stegen som beskrivs i steg 3 för att infoga en ny layout med två kolumner. Dra och släpp sedan widgetarna Produktfilter och Arkivprodukter.

drad och släpp produktfilter och arkivproduktwidgetar anpassa WooCommerce-arkivsidan
Välj en ny Elementor-struktur

Notera: De produktfilterwidget är endast tillgänglig med ShopEngine Pro. Så se till att du har installerat och aktiverat ShopEngine Pro.

Du kan anpassa filterrelaterade alternativ som prisfilter, betygsfilter, färgfilter, kategorifilter etc. Dessutom kan du anpassa layoutrelaterade alternativ som filtervyläge, aktivera containerväxlingsknapp, kolumner (per rad) etc. Du kan också lägga till en anpassad attributlista om du vill.

Anpassa Proudct Filters widget hur man anpassar WooCommerce-kategorisidan
Anpassa widgeten Proudc Filters

Du kan ändra layoutinställningarna för Arkivera produkter från layoutalternativet WooCommerce. För mer information om hur du ändrar layoutalternativet kan du kontrollera detta doc. Dessutom kan du anpassa innehållsinställningar som Flash Sale Badge, Visa kategorier, Visa beskrivningsbetyg, etc. Du kan också välja en anpassad sidnumreringsikon och anpassad ordning av CTA-knappen som Lägg till i kundvagn, Lägg till i önskelista, Snabbvy, etc. .

Anpassa widgeten Arkivprodukter

Relaterad: Hur man anpassar WooCommerce Min kontosida

Steg #5: Anpassa WooCommerce Archive-sidans stilinställningar

När du väl är inställd på dina anpassade layouter och personliga widgets är det dags att ändra utseendet på dem genom att ändra stilinställningarna för dessa widgets. För att ändra stilinställningarna måste du klicka på widgeten och på panelen gå till fliken Stil för att komma åt alla stilinställningar. Låt oss ta en titt på stilalternativet för widgetarna som används i denna handledning:

Avancerad sökning:  Du kan anpassa olika alternativ för sökformuläret, sökikon/textstil, kategoristil, produktstil, knapp för fler produkter och globalt teckensnitt. 

Ändra stilinställningarna för Advanced Search Widget hur man anpassar WooCommerce-kategorisidan
Ändra stilinställningarna för Advanced Search Widget

Antal arkivresultat: Du kan anpassa alternativen för justering, färg och typografi.

resultaträkningswidget för elementsKit
Ändra stilinställningarna för Archive Result Count widgeten

Produktfilter: Du kan hitta alternativ för att utforma produktfiltersektionen under olika kategorier som vanliga stilar, prisfilter/intervallreglage, betygsfilter och kategorifilter.

Inställningar för produktfilterstil för att redigera WooCommerce-produktkategorisidan i WordPress
Anpassa stilalternativ för produktfilterwidget

Arkivprodukter: Du kan anpassa inställningarna för arkivets produktstil genom att anpassa alternativen i sektioner som Produktbehållare, Produktbild, Produktkategorier, Produkttitel, Produktpris, Off Tag, Lägg till i kundvagn-knapp, Betyg, Flash-rea och Paginering.

Arkivera produktstilsinställningar för att redigera Elementor WooCommerce-kategorisidan
Anpassa stilen på widgeten Arkivprodukter

Relaterad: Hur man anpassar WooCommerce kundvagnssida

Steg #6: Uppdatera och förhandsgranska den anpassade kategorisidmallen för WooCommerce

När du har avslutat stilanpassningen klickar du på knappen Uppdatera för att spara. Nu kan du antingen klicka på förhandsgranskningsknappen för att se förhandsgranskningen eller besöka valfri kategorisida manuellt och du bör se att den nya mallen är aktiverad som förhandsgranskningen nedan:

Anpassa förhandsvisningen av kategorisidan
Anpassad WooCommerce-kategorisida med ShopEngine

Nu var detta processen att skapa en anpassad kategorisida för din WooCommerce-butik. Men vad sägs om att skapa en annan design för varje kategori i din butik? Tja, du kan också göra det med ShopEngine. Gå till nästa avsnitt om du vill veta mer.

Anpassa WooCommerce med ShopEngine

Hur bygger man en anpassad WooCommerce-arkivsida för varje kategori separat?

Du kan bygga en helt annan design för varje kategori eller endast en specifik kategori i din WooCommerce-butik. För det förblir processen i stort sett densamma som visat ovan. Men i steg 2, Skapa en kategorisidmalldu kan inte lämna fältet Tillämplig kategori tomt.

Du behöver välj kategorin i fältet Tillämplig kategori som du vill använda designmallen du bygger för. Om du till exempel vill skapa en design som endast ska vara tillämplig på kategorin Musik, välj sedan Musik i fältet Tillämplig kategori. 

skapa en annan arkivsida för varje kategori av WooCommerce med ShopEngine

Resten av stegen kommer att vara desamma som att bygga en generell kategorimalldesign som visas i avsnitt ovan.

Notera:  När du skapar en arkivmall för en specifik kategori kommer den att göra det gäller endast den kategorisidan och inte resten av kategorisidorna.
För resten av kategorierna måste du skapa en annan kategorimall med fältet "Applicable Category" tomt för alla kategorier eller en annan för var och en av dem. Annars kommer resten av kategorierna att ha standard WooCommerce-arkivmallen eller mallen som ditt aktiverade tema erbjuder.

olika WooCommerce-arkivsidmallar med ShopEngine - den ultimata WooCommerce-byggaren

Här är en förhandsvisning av olika WooCommerce-kategorisidor med olika design byggda med ShopEngine:

förhandsgranskning av olika anpassade WooCommerce-kategorisidor för varje kategori med ShopEngine

Notera: Alternativet att skapa olika mallar/design för olika kategorier av din WooCommerce-webbplats är endast tillgängligt i Pro-versionen av ShopEngine.

Bonus: 5 sätt att optimera WooCommerce-kategorisidan för att öka konverteringsfrekvensen 

Här är några användbara tips som du kan följa för att optimera din WooCommerce-arkivsida till öka konverteringsfrekvensen:

Tillhandahåll produktfilteralternativ

lägg till produktfilter för att öka konverteringen
Produktfilter på WooCommerce-kategorisidan

Din kategorisida visar som standard alla produkter i den kategorin. Men vanligtvis letar folk efter en produkt av en viss färg eller storlek eller något annat attribut.

Så du bör tillhandahålla alternativen för att filtrera och begränsa antalet produkter i en kategori enligt deras föredragna attribut. På så sätt kan människor enkelt hitta sina produkter och detta kommer att hjälpa dig att öka din försäljning.

Kolla också Hur man lägger till valutaväxel på WooCommerce-webbplatsen i 5 steg

Lägg till alternativ för produktjämförelse

lägg till produktjämförelse och lär dig hur du anpassar WooCommerce-kategorisidan i WordPress
Alternativ för produktjämförelse på WooCommerce

Lägger till en Produktjämförelse alternativet till din WooCommerce kommer att hjälpa konsumenterna att jämföra produkter av liknande slag. Det här alternativet behövs speciellt om du erbjuder digitala produkter som mobiler, klockor, etc.

Alternativet för produktjämförelse hjälper kunderna att fatta ett beslut snabbare. Och detta kommer att hjälpa dig att nå ditt mål om högre försäljning snabbt.

Knapp för önskelista

anpassa woocommerce-arkivsidans önskelista för att anpassa WooCommerce-kategorisidan
Knapp för önskelista på kategorisidan

önskelista ger möjlighet att lägga till produkter i varukorgen för senare köp. Vissa människor tycker inte att önskelistan är så effektiv när det kommer till konvertering. Men ärligt talat, det är mycket effektivt.

Eftersom folk vanligtvis lägger till produkter på sin önskelista när de verkligen gillar produkten men av någon anledning inte kan köpa den direkt. Men det betyder inte att den personen inte kommer att köpa produkterna senare.

I de flesta fall tenderar människor att köpa produkter som de har lagt till på sin önskelista. Så lägg till ett önskelistaalternativ på din WooCommerce-kategorisida.

Snabbvy alternativ

add-quick view för att öka omvandlingsfrekvensen för kategorisidor med hjälp av sidmall för anpassad kategori för woocommerce
Snabbvisningsalternativ på WooCommerce-arkivsidan

Lägger till en snabbtitt knappen säkerställer en fantastisk användarupplevelse eftersom människor inte behöver besöka separata sidor för att veta om en produkt. Genom att använda detta snabbvy-alternativ kan din kund stanna kvar på kategorisidan och få veta detaljer om produkter med bara ett klick.

Om folk måste gå till en produktsida för att se den kan de lämna din sida utan att köpa produkten ifall de inte gillar den. Men om du tillhandahåller snabbvisningsalternativet så att kunder kan kolla in flera produkter medan de stannar på samma sida, kommer det att höja shoppingupplevelsen. Och som ett resultat kommer det att hjälpa dig att öka din butiks försäljning.

SEO-optimering på sidan

På sidan SEO

Kategorisidor är indikatorn för sidhierarkin på din webbplats. Så, optimera din kategorisida för sökmotorer bör aldrig försummas. För medan du vill att din hem- och produktsida ska rankas, kan din kategorisida om den rankas också ge dig mycket trafik.

Ju mer trafik du får på din webbplats ökar din chans att du får fler konverteringar. Så se till att du lägger till korrekt SEO-metadata, optimerar intern och extern länkning, optimerar webbadressen, etc. Du kan ta hjälp av SEO-plugins som Rankmath, Yoast SEO etc.

Tycker du att alla punkter verkar giltiga, men behöver jag flera plugins för att lägga till dessa alternativ på min webbplats för att öka konverteringen?

Tja, du har inget att oroa dig för. Eftersom ShopEngine förutom att vara en fantastisk WooCommerce-anpassare med överflöd av WooCommerce-widgets, det ger också 13+ moduler som önskelista, snabb utcheckning, produktjämförelse, etc.

Dessutom kan du anpassa din kompletta WooCommerce-butik med detta plugin. med denna kategoriredigerare kan du redigera alla dina WooCommerce-sidor; från butikssida till tacksida. Titta på videon för att lära känna de stora funktionerna ShopEngine har att erbjuda.

ShopEngine – Den ultimata WooCommerce-byggaren

Andra WooCommerce-relaterade bloggar:

👉 Hur man lägger till avancerade WooCommerce anpassade kassafält
👉 Bästa Shopping Cart Plugins för WooCoomerce
👉 Hur man löser WooCommerce Empty Cart Error
👉 Hur man lägger till WooCommerce Multi Step Checkout

Sista ord på anpassad WooCommerce-kategorisida

En kategorisida är en viktig sida för både dina kunder och sökmotorer. Att anpassa och optimera dina kategorisidor kan bara hjälpa dig att få större framgång i din e-handelsverksamhet. 

Det som är bra är att du nu vet hur du anpassar WooCommerce-kategorisidan i WordPress och hur du optimerar sidan för att fördubbla din omvandlingsfrekvens. Utöver det vet du nu hur du skapar anpassade WooCommerce-kategorisidor för varje kategori separat.

Du kan utnyttja den mest kompletta WooCommerce-byggaren som finns på marknaden med namnet ShopEngine för att optimera din eStores kategorisida. Och du kan få hans allsidiga WooCommerce-plugin på 20% OFF nu!

🔔 🔔 Att köpa ShopEngine Pro till 20% mindre pris använd kupongkoden gemenskap20.

Så låt oss skynda oss och gå med i gemenskapen av WooCommerce-älskare nu!

Kommentarer

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *