Design WooCommerce-produktkategoriene dine med Elementor

Elementor er en enestående WordPress-sidebygger for å forbedre standard WordPress-byggerens funksjonalitet ved å legge til nye funksjoner.

Hvis du husker, var ikke de tidlige versjonene av WordPress spesielt brukervennlige. I tillegg til å ha begrenset funksjonalitet, krevde det at du stole på forhåndslagde WordPress-temaer for å lage et grunnleggende design for nettstedet ditt. For mange brukere var imidlertid den grunnleggende funksjonaliteten til WordPress-temaer utilstrekkelig, noe som nødvendiggjorde installasjon av plugin -er eller manuell redigering av temakode.

• WooCommerce og Elementor kombinasjon
• Opprette kategoriside i Elementor
• Layoutinnstillinger

Elementor er en blokkbasert bygger som ligner på WordPress, men den er mye mer avansert enn WordPress-byggeren ved at den er mer intuitiv, responsiv og funksjonsrik. Det viktigste er at du kan lage en fantastisk nettside uten å måtte skrive en kodelinje!!

WooCommerce og Elementor kombinasjon

WP-WooCommerce og Elementor er to av de mest brukte WordPress- plugin som er tilgjengelige i dag. Mengden fleksibilitet og det store antallet funksjoner som hver av dem tilbyr er rett og slett uvurderlig. Hvis du driver en e-handelsbutikk, er WooCommerce den beste plugin for nesten alle behov du måtte ha. Det er den mest omfattende plugin som er tilgjengelig for praktisk talt alle behov.

I tillegg er Elementor en av de mest effektive dra-og-slipp-nettstedbyggere som er tilgjengelige på markedet. Det gir deg muligheten til raskt å designe, tilpasse og innrede nesten hvilken som helst side på nettstedet ditt. Enda mer, funksjoner er tilgjengelige, for eksempel å lage megamenyer og få tilgang til et bredt spekter av tillegg og maler som er svært praktiske. Ved hjelp av både WooCommerce og Elementor kan du designe og bygge butikk- og forretningssider av profesjonell kvalitet med minst mulig kostnad og innsats. Ved hjelp av Elementor kan du fullstendig tilpasse butikkoppsettene, produktnettene og karusellene dine, samt velge mellom en rekke vakre oppsett. Også tilgjengelig er muligheten til å sette opp og tilpasse kasse- og handlekurvsidene dine, samt integrere dem med en rekke betalingsalternativer og funksjoner for å gi kundene dine større bekvemmelighet.

I tillegg kan du lage egendefinerte sider og design for digitale varer, inkludere egendefinerte sidealternativer for frakt og betalinger og post- og forhåndskjøpssider, blant annet. Alt dette bidrar til at din bedrifts nettside fremstår som både profesjonell og brukervennlig. Sammen med brukervennlige handlingsfremmende knapper, parallakseklare skyveknapper og en rekke andre funksjoner, kan du integrere WooCommerce-funksjonalitet på nettstedet ditt. Det store antallet tilgjengelige muligheter er praktisk talt ubegrenset. Nå, hvis du er overbevist nok, la oss lede deg gjennom prosessen med å sette planen din ut i livet. Du kan gjøre en rekke ting for å gjøre butikksiden din mer innbydende, og målet er at disse trinnene skal hjelpe deg med å lage en mer innbydende butikkside for din WooCommerce-butikk.

Opprette WooCommerce-kategoriside i Elementor

Hvis du er kjent med WooCommerce, vet du at produktkategorier er avgjørende for å organisere produktene dine for riktig visning og tilgang for kunder – jo raskere de kan finne det de leter etter, jo bedre. Men hva er egentlig produktkategorier?

Kunder bruker betydelig tid på å bla gjennom produktene dine på butikksiden din, så de må ha en positiv opplevelse. Det er ikke noe mer frustrerende enn å måtte navigere gjennom dusinvis av sider for å se på produktene på nettstedet til butikken din.

Som et resultat er kategorisering avgjørende for å gi kundene dine en bedre handleopplevelse. Kunder vil finne det lettere å sortere og filtrere ut sine preferanser hvis det er en oversiktlig og organisert avdeling for alle typer varer som klær eller sko. Hvis du legger til elementer for generering av potensielle kunder som handlingsfremmende knapper, produktseksjoner med fremhevede produkter, popup-vinduer for salg eller tilbud og andre lignende komponenter til denne delen kan gjøre den mer attraktiv for besøkende.

Hvis du har en WooCommerce-butikk og ønsker å gi den en ansiktsløftning, er denne opplæringen akkurat det du trenger for å komme i gang.

Mange WooCommerce-temaer inkluderer et standardoppsett for produktkategorier, som kanskje passer best for bedriftens behov. Selv om disse standardinnstillingene kan bestå av noen nyttige funksjoner, kan de ikke ofte tilpasses.

La oss komme i gang.
Etter å ha satt opp produktet ditt, må du gjøre følgende før du publiserer, slik at det vises i en kategori:

Du vil angi betingelsene som avgjør hvor produktmalen din skal vises i løpet av dette stadiet. Når du bruker en mal, vil den automatisk gjelde for alle produktsidene på nettstedet ditt. Du kan også begrense søket til en bestemt produktkategori.

Klikk på Publiser, og ditt enkeltprodukt er nå tilgjengelig for kjøp!

Vi er ikke ferdige ennå.
Det vi nettopp har gjort er ikke nok til å få kategorier live på siden vår; for å få kategorier live på alle eller noen sider av nettstedet vårt, må vi fortsatt sette opp et par ting. For å fullføre oppgaven oppretter du en produktkatalogside som vil påvirke alle produkter, eller en katalogside som vil påvirke en spesifikk produktkategori.
For å gjøre dette, gå først tilbake til Elementor > Mine maler og lag en produktarkivmal. Velg deretter en eksisterende mal eller lag en ny. Tilpass utseendet til widgeten Arkivprodukter og arkivtittel ved å legge dem til på siden din.

Bruk kopistilfunksjonaliteten mellom sider for å tilpasse den til å matche designet du allerede har laget for enkeltproduktmalen, og lagre deretter endringene.
Gå tilbake til produktsiden og velg Kopier fra rullegardinmenyen. Høyreklikk Lim inn stil når du er tilbake i arkivproduktet. Velg Siste produkter fra rullegardinmenyen Spørring > Kilder i innstillingene for Arkiver produkter.
Velg deretter ringer fra rullegardinmenyen Produktkategori. Bare ringekategorien vil vises på denne måten. Hvis du har en lang liste med produkter for en bestemt kategori, bør du slå på paginering.
Du kan tilpasse avstanden mellom kolonnene og radene ved å velge stilfanen Endre farger, skrifttyper og andre aspekter av designet.

Forhåndspublisering, velg betingelsene som bestemmer hvor arkivet skal vises, akkurat som du gjorde for enkeltproduktmalen, og publiser deretter.

Når du har trykket "publiser", vil arkivsiden din være aktiv.

Elementor pro gir deg muligheten til å designe raske, rene produktkategorier med en rekke alternativer;

Du kan utføre følgende med alternativene som er tilgjengelige på Elementor Pro:

Layoutinnstillinger for WooCommerce-produktkategorier

• Kolonner: Angi nøyaktig antall kolonner som skal vises, fra 1 til 12
• Antall kategorier: Velg antall kategorier som skal vises

Spørringsinnstillinger

• Kilde: Velg kilden du vil vise kategorier fra, og velg fra Alle, Manuelt valg, Av overordnet eller Gjeldende underkategorier. Hvis Manuelt valg er valgt, velger du manuelt hvilke kategorier som skal vises. Hvis "By Parent" er valgt, velg fra Bare toppnivå, eller velg en individuell kategori fra rullegardinlisten.
• Skjul tom: Sett til Ja for kategorier uten produkter i dem
• Bestill etter: Angi rekkefølgen kategoriene skal vises i. Alternativer inkluderer Navn, Slug, Beskrivelse eller Antall
• Rekkefølge: Velg for å vise kategorier i ASC eller DESC (Stigende eller Synkende) rekkefølge

Stilinnstillinger

• Kolonneavstand: Angi nøyaktig avstand mellom kolonnene
• Radavstand: Angi nøyaktig avstand mellom radene
• Justering: Juster produktdataene til venstre, høyre eller senter

Bildeinnstillinger

• Border Type: Velg type kantlinje, velg mellom ingen, solid, dobbel, prikket, stiplet eller rillet
• Kantradius: Angi radius for å kontrollere hjørnet avrunding av kantlinjen
• Avstand: Juster mengden mellomrom mellom bildene og dataene deres

Tittelinnstillinger

• Farge: Velg tittelfargen
• Typografi: Angi typografialternativene for tittelteksten

Telleinnstillinger

• Farge: Velg fargen for tellingen
• Typografi: Angi typografialternativer for greven

Konklusjon

WooCommerce Builder i Elementor gir deg designfleksibiliteten du trenger for å lage og finjustere produktsidene dine visuelt. Tiden det tar å gå fra en idé til en live , og fullt ut funksjonell WooCommerce-butikk på nett er betydelig redusert som et resultat av at du sparer tid. Totalt sett har tilpasning av WooCommerce-butikksiden din med Elementor potensial til å påvirke nettstedets generelle ytelse betydelig. Du kan enten hjelpe eller hindre salg ved å organisere og vise produktene dine på best mulig måte slik at kundene kan se og kjøpe dem. Oppsett og tilpasning av WooCommerce-butikksiden din i Elementor vil bli demonstrert gjennom trinnene i denne veiledningen. Men husk at dette bare er toppen av isfjellet når det gjelder omfanget av problemet. En introduksjon til bruk av Elementor for å lage den ideelle butikksiden for butikken din er demonstrert i denne grunnleggende demonstrasjonen. Bruk dette som et utgangspunkt og lek med det for å få mest mulig ut av denne fantastiske sidebyggeren