Shoppingtrender endrer seg i et raskt tempo, og folk har en tendens til å kjøpe online mer enn noen gang.
Det er derfor de trenger en e-handelsbutikk øker for å tilfredsstille netthandelsvanene fordi folk synes det er mer praktisk å kjøpe på nettet i stedet for å gå ut for å handle.
Du kan også starte e-handelsbutikken din med en gang, ved å bruke de riktige verktøyene og oppsettet. Og du vil merke en drastisk økning i salget ditt i løpet av en rekordperiode.
Hvis du har planlagt å starte en e-handelsbutikk og ser etter en WordPress-ekspert til å gjøre jobben for deg, la meg fortelle deg at du ikke trenger noen.
Ja! Du kan gjøre det selv fordi du ikke trenger å være WordPress-utvikler eller kodeekspert og du kan gjøre det uten å ha noen kunnskap om koding med riktige verktøy og oppsett.
Bare følg den trinnvise veiledningen for å lage en WooCommerce-butikkside ved å bruke Elementor-sidebyggeren.
La oss grave dypere for å komme til poenget!
- Hva trenger du for å lage en produktside med Elementor?
- Hvordan installerer jeg Elementor-sidebyggeren?
- Lag en Elementor WooCommerce-produktside trinn for trinn
- Mobiloptimaliser WooCommerce-produktsiden din
- Elementor Pro-priser
- Avslutter
Hva trenger du for å lage en produktside med Elementor?
Installer WooCommerce- plugin på WordPress-nettstedet ditt fra WordPress.org-depotet, og på toppen av det må du installere Elementor-sidebyggeren . Gratisversjonen kan lastes ned fra WordPress.org, men gratisversjonen kommer med begrensede tilpasningsmuligheter. Derfor, hvis du liker å få ubegrensede tilpasningsmuligheter, gå for pro Elementor og last den ned fra den offisielle Elementor.org.
Hvordan installerer jeg Elementor-sidebyggeren?
- For Elementor gratisversjon:
Gå til Plugin > Legg til ny > skriv inn Elementor-sidebygger > klikk installer og aktiver.
- For Elementor Pro:
Kjøp Pro-versjonen fra Elementor.com og last opp zip-filen og klikk deretter på installer og aktiver.
Lag en Elementor WooCommerce-produktside trinn for trinn
Standard WooCommerce-produktsiden ser ut som en hvilken som helst grunnleggende WooCommerce-produktside uten noen skarphet.
![](https://www.holdersing.com/wp-content/uploads/2020/06/2nd-1.png)
Men hvis du liker å legge til merkevarens stemme, må du tilpasse den unikt.
Trinn 1: Gå til mal-delen fra Dashboard-menyen og klikk på "Legg til ny".
![](https://www.holdersing.com/wp-content/uploads/2020/06/Ad-new-template-2.png)
Velg nå elementet "Enkelt produkt" fra rullegardinmenyen
![](https://www.holdersing.com/wp-content/uploads/2020/06/seelct-single-product.png)
Det beste er at Elementor kommer med noen forhåndslagde produktsidemaler, så hvis du liker å komme raskt i gang, velg hvem som helst fra alternativene som ser nærmest ut til ønsket.
Det er mye enklere å lage en produktside fra den forhåndslagde malen i stedet for å lage fra bunnen av. Endre derfor enhver eksisterende mal og spar tid og krefter.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-page-template.png)
Vi har valgt denne malen for vår produktside.
![](https://www.holdersing.com/wp-content/uploads/2020/06/aaa.png)
Når du har valgt favorittmalen din, vil den føre deg til Elementor-editoren hvor du kan tilpasse malen etter din smak.
![](https://www.holdersing.com/wp-content/uploads/2020/06/elementor-editor.png)
Her kan du se forskjellige blokker på menyen til venstre. Dra og slipp blokken du liker å jobbe med.
Klikk på "+" Legg til-knappen og velg hvilken kolonnestørrelse du vil legge til.
Vi har valgt to kolonnestørrelser for vår produktmal.
Legg nå til en produkttittel-widget i høyre kolonne og legg til tittelen på produktet på den.
![](https://www.holdersing.com/wp-content/uploads/2020/06/poduct-tite-widegt-1.png)
Når du har lagt til produkttittelen, er neste trinn å legge til "Woo-brødsmulene" over den.
Legg nå til produktbildet i venstre kolonne og dra og slipp produktbilde-widgeten fra venstre kolonne.
![](https://www.holdersing.com/wp-content/uploads/2020/06/drop-the-image-in-left-column.png)
Du kan legge til polstring i begge kolonnene for å holde dem litt fra hverandre.
Etter å ha lagt til bildet og justert polstringen i henhold til de nødvendige dimensjonene, legg til produktvurderingswidgeten under produkttittelen.
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-the-product-ratign.png)
Legg til en kort beskrivelse av produktwidgeten under produktanmeldelsesblokken. du kan også justere avstanden mellom de to blokkene.
Når du er ferdig med produktbeskrivelsen og alle detaljer, er neste trinn vårt å legge til prisen på produktet, og for dette må du dra og slippe priswidgeten under beskrivelsen av produktet.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-price.png)
Etter å ha lagt til prisfanen under produktbeskrivelsen kan du tilpasse priswidgeten ved å velge alternativene fra venstremenyen. Du kan forstørre ikonet, endre skriftstilen og også skriftfargen fra svart til en hvilken som helst annen farge du ønsker.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-price-foramt-1.png)
Legg nå til widgeten "legg til i handlekurven" og tilpass fargen, fonten eller stilen fra menyen hvis du vil.
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-to-the-cart-widget.png)
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-to-the-cart-options.png)
Legg nå til produktmeta under priswidgeten som viser produktkategorien og produktets serienummer.
Trinn 2: legg til tilleggsinformasjon om produktet i neste avsnitt.
Opprett en ny seksjon med to kolonner og legg deretter til produktdatafaner, inkludert beskrivelse, tilleggsinformasjon og anmeldelser. Og på høyre side av kolonnen legger du til relatert produktseksjon.
For å beholde samme format for hver kolonne kan du klikke i venstre hjørne av hver kolonne og kopiere og lime inn kolonneformatet for hver kolonne.
Trinn 3: legg til en ny seksjon eller legg til «oppsalgsseksjon».
![](https://www.holdersing.com/wp-content/uploads/2020/06/up-sell-section-1.png)
Slik vil oppsalgsseksjonen se ut etter tillegg. Legg til litt polstring for å justere seksjonen.
![](https://www.holdersing.com/wp-content/uploads/2020/06/up-sell-section-2.png)
Og til slutt er du ferdig med utformingen av produktsiden din. Nå er det siste trinnet hvor du vil publisere produktet ditt? du kan klikke på publiser eller gå til øyedelen nederst i venstre meny og klikke på innstillingene for å velge kategorien til produktet.
![](https://www.holdersing.com/wp-content/uploads/2020/06/find-category.png)
Klikk på menyen for å legge til tilstand og velg kategorien for produktet ditt og klikk på publiser.
Mobiloptimaliser WooCommerce-produktsiden din
Siden mye trafikk kommer til å komme gjennom smarttelefonen, så må du optimalisere butikken din for smarttelefonvisning, ellers kan du miste salget.
Selv om WooCommerce allerede er mobiloptimalisert, følg prosedyren for å forsikre deg om at produktsidemalene dine ser helt bra ut på mobilskjermen.
Du finner et alternativ Responsive Mode nederst til venstre i Elementor-grensesnittet.
![](https://www.holdersing.com/wp-content/uploads/2020/06/mobile-responsive.png)
Når du klikker på det mobile responsive alternativet, kan du bytte mellom alternativer for mobil, skrivebord og fanevisning.
Klikk på et av alternativene du liker for å se og finjuster designet hvis du finner noen komplikasjoner.
Lagre nå og fortsett å publisere produktsiden din.
Elementor Pro-priser
![](https://www.holdersing.com/wp-content/uploads/2020/06/pridicn.png)
Elementor grunnleggende versjon er tilgjengelig gratis mens pro-versjonen kommer med tre lisenser. Hvis du leter etter din personlige blogg eller et enkelt nettsted, er den personlige lisensen best egnet for deg der du kan få en WooCommerce-bygger sammen med 90+ pro-widgets.
Mens pluss- og ekspertlisensene passer for voksne bedrifter eller byråer med støtte for henholdsvis 3 nettsteder og 1000 nettsteder.
Avslutter
Det eneste formålet med Elementor sidebygger er å gjøre det mulig for brukerne å slippe kreativiteten løs uten å stole på kodingen. Elementor kommer med en rekke widgets som lar deg lage alle slags produktsider basert på attraktive layouter. De grunnleggende WooCommerce-elementene er mer enn 10 som gjør det mulig for brukerne å tilpasse hver kink og kurve på butikksiden. Og hvis du ikke finner ønsket element i Elementor-menyen, ikke bekymre deg! Det er mange andre avanserte innstillinger som kan oppgradere arsenalet ditt og legge til flere elementer i biblioteket ditt. En av dem er Essential Add-ons som kommer med dedikerte elementer kun for WooCommerce.