Hvordan bygge en e-handel med Avada WooCommerce-bygger

Når det gjelder å sette opp en nettbutikk, er WooCommerce go-to- plugin . Det er latterlig enkelt å sette opp en nettbutikk og begynne å selge produktene dine så snart du er ferdig. Avada gir omfattende støtte og designintegrasjon for WooCommerce, slik at du kan lage drømmebutikken samtidig som du sørger for at den ser akkurat den rammen du har i tankene.  

Avada handler om å gi deg muligheten til å tilpasse nettstedets utseende, noe som ikke er annerledes med WooCommerce-integrasjon. Ved å bruke vårt populære nettverk for avanserte alternativer kan du velge fra et bredt spekter av tilpasninger for en rekke designmuligheter, inkludert:

  • WooCommerce har sitt eget Avada Global Options Panel, atskilt fra Avada Global Options Panel.
  • Avada-sidealternativer er tilgjengelige for hvert produkt.
  • Avada Builder lar deg lage produktsidedesign ved å dra og slippe elementer.

For å bygge din e-handelsside med Avada. 

Først må vi installere wooCommerce i Avada.

Installere WooCommerce – trinnvise instruksjoner

Gå til Avada > Plugin / Add-ons og se etter WooCommerce- plugin , som vist på skjermbildet nedenfor.

Trinn 1 – Installer WooCommerce- plugin .

Trinn 2 – Velg "Installer" fra rullegardinmenyen.

plugin vil bli installert og aktivert automatisk.

Trinn 3 – Etter det skal oppsettveiviseren for WooCommerce vises. Hvis du importerer en av Woo-demoene våre, for eksempel Modern Shop eller Classic Shop, kan du hoppe over dette trinnet uten å risikere å miste dataene dine. For å hoppe videre, velg "Ikke akkurat nå" fra rullegardinmenyen. Hvis du ikke importerer en av Woo-demoene våre, fortsett til neste trinn ved å klikke på "La oss gå!" for å starte oppsettprosessen.

Trinn 4 – Følg instruksjonene og instruksjonene på skjermen for å fullføre prosessen og angi nødvendig informasjon om butikken din. Ved å klikke på "Opprett ditt første produkt"-knappen når du er ferdig, vil du kunne fortsette å lage ditt første produkt. Alternativt kan du gå tilbake til WordPress Dashboard ved å klikke på koblingen under oppsettvinduet.

Slik tildeler du en butikkside til nettstedet ditt

Som en del av den normale WooCommerce-installasjonsprosessen, bør installasjonsveiviseren startes, slik at du kan konfigurere butikken din og tilordne butikksidene dine til kunder. Mer informasjon om sidene som installasjonsveiviseren oppretter, finner du i dette WooCommerce-dokumentet.

Alternativt, hvis installasjonsveiviseren ikke vises, eller hvis du avbryter den av en eller annen grunn, kan du alltid gå tilbake til installasjonsveiviseren ved å velge Setup Wizard fra Hjelp-menyen på en hvilken som helst WooCommerce-side, som du finner øverst til venstre i vindu.

Du kan angi butikksiden manuelt ved å gå til kategorien Produkter i WooCommerce-innstillingene – WooCommerce > Innstillinger > Produkter – og velge siden som skal være hovedbutikksiden fra rullegardinmenyen. WooCommerce vil da vise produktene dine på denne siden som et resultat av handlingen din.

De resterende sidene kan konfigureres i Avansert-fanen, funnet på WooCommerce > Innstillinger > Avansert .

Opprette produktene dine

Trinn 1 – På WordPress Admin-sidefeltet, naviger til kategorien Produkter > Legg til produkt.

Trinn 2 – Skriv inn navnet på produktet ditt øverst på siden.

Trinn 3 – Fyll ut innleggets innholdsfelt med teksten fra produktbeskrivelsen. All produktinformasjon vil bli vist i denne delen.

Trinn 4 – Fyll ut " Produktdata " -boksen med all produktinformasjon. For eksempel amp pris, SKU og frakt alle mulige alternativer.

Trinn 5 – I Kort beskrivelse av produktet skriver du inn en kort beskrivelse av produktet ditt som vises ved siden av hovedbildene dine.

Trinn 6 – Hovedbildet skal plasseres under ' Produktbilde' - boksen på høyre side av siden; Dette må fylles ut for hvert produkt.

Trinn 7 – Legg til flere bilder i ' Produktgalleri' - boksen hvis du vil bruke et bildegalleri i stedet for ett enkelt bilde.

Trinn 8 – I ' Produktkategorier du inn kategoriene som gjelder for produktene dine. Deretter fyller du de tomme feltene med de riktige kodene for produktet ditt i " Produkttagger " -boksen.

Trinn 9 – Når du har angitt all nødvendig informasjon, klikker du på ' Publiser' -knappen, og varen vises på hovedsiden for butikkfronten.

Opprette produktet Zoom Effect

Hvis du bruker Avada Layouts, må du sørge for at WooCommerce Product Images Zoom-alternativet er aktivert i Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom-alternativet , eller i Woo Product Images Element General-fanen > Produktbilder Zoom hvis du bruker WooCommerce-oppsett.

WooCommerce Product Images Width – Din hovedbildebredde (se innstillingen nedenfor) og den faktiske størrelsen på bildet som lastes opp, må begge være større enn Avada > Alternativer > WooCommerce > Generelt WooCommerce > WooCommerce Product Images Width eller innstillingen Produktbilder Max Width i Woo Product Images Element. Bredden på beholderkolonnen for et enkelt produktgalleri bestemmes av innstillingene du velger. Når du har gjort de nødvendige justeringene, vil du være klar til å angi bredden på WooCommerce-hovedbildet ditt.

WordPress Main Image Width – Innstillingen for WooCommerce Main Image Width finner du i Customizer på WordPress-nettstedet ditt. Fra WordPress-dashbordet, naviger til Utseende > Tilpass > WooCommerce > Produktbilder , hvor du finner innstillingen for hovedbildebredde; Dette vil bestemme den faktiske størrelsen på bildet som vises i galleriet.

Jo mer detaljert zoomeffekten din er, desto større bildestørrelse har du angitt for bildet. For å presisere, hvis bildestørrelsen i WooCommerce-innstillingene samsvarer med bildebredden i Avadas globale alternativer, vil ingen zooming være synlig når musen holder musepekeren over bildet på siden. I tillegg må størrelsen på det faktiske bildet du laster opp, være den samme som eller større enn innstillingen for hovedbildebredde på nettstedets design.

Sørg for at du gjenskaper miniatyrbildene dine etter å ha endret WooCommerce-bildestørrelsene; Dette vil bruke de nye bildestørrelsene dine på alle bilder som allerede er lastet opp til nettstedet ditt. Du kan bruke Regenerate Thumbnails- plugin for å oppnå dette.

Justere innstillinger for produktbildestørrelse i WooCommerce.

WooCommerce inkluderer alternativer for å justere størrelsen på produktbilder i butikkens katalog og enkeltproduktbilder. I tillegg er det spesifikke Avada-innstillinger som fungerer sammen med bildestørrelsene som brukes av din WooCommerce-butikk. Når du konfigurerer disse bildestørrelsesinnstillingene, er det viktig å huske at Avadas globale alternativinnstillinger også må vurderes. Vi vil gå over hvert av disse alternativene mer detaljert senere.

Anta at bildene du laster opp for produktene dine er mindre ved kilden enn bildestørrelsene som er spesifisert i WooCommerce-innstillingene. I så fall kan du legge merke til noen visuelle layoutavvik på forsiden av butikksidene dine; Dette er ikke en feil på noen måte. Det er ganske enkelt fordi bildene dine var for små til at WooCommerce-innstillingene kunne påvirke dem. Du kan tenke på disse innstillingene som maksimal bredde og høyde for bildene dine når det gjelder bildedimensjoner. Alt som faller under den angitte grensen vil ikke bli endret.

Når du konfigurerer butikken din, sørg for at både WooCommerce-bildestørrelsesinnstillingene og den faktiske størrelsen på bildene dine tas i betraktning. Oppsummert bør bildene dine ha samme størrelse som eller større enn bildestørrelsesinnstillingene i din WooCommerce-butikk.

Eventuelle endringer i innstillingene for bildestørrelse krever at du gjenskaper miniatyrbildene dine for at de skal tre i kraft på bilder som allerede er lastet opp til nettstedet ditt. Derfor anbefales det på det sterkeste å bruke Regenerate Thumbnails- plugin . I tillegg kan bildestørrelser justeres ved å bruke trinnene nedenfor:

Trinn 1 – I administratorsidefeltet, naviger til fanen " Utseende " og deretter kategorien " Tilpass " for å begynne å tilpasse nettstedet ditt.

Trinn 2 – Naviger til ' WooCommerce '-fanen øverst på siden.

Trinn 3 – Bilder-innstillingen for enkeltproduktbilder finner du under konfigurasjonsvinduets ' Produktbilder' - fane.

Trinn 4 – Når du laster opp bilder til enkeltproduktsidene dine, velg hovedbildebreddealternativet. Miniatyrbildebredde er bredden på miniatyrbildene for produktene dine i katalogen. Fyll ut de tomme feltene med ønsket breddeverdi.

Trinn 5 – For å regenerere miniatyrbilder etter at du har endret bildestørrelsene og lagret dem, må du bruke Regenerate Thumbnails- plugin , som du finner i Plugin delen. Installer først Regenerate Thumbnails- plugin og naviger deretter til WP Admin > Tools- fanen, hvor du kan velge å regenerere bildeminiatyrene dine og lage de nye bildestørrelsene.

Hanson F.

Siste innlegg

Slik bruker du topptekst og bunntekst med Elementor

Et nettsteds topp- og bunntekst er viktige elementer. I de fleste tilfeller gir toppteksten navigasjon...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To av de mest populære WordPress-temaene på markedet er Astra og OceanWP. Profesjonell…

2. januar 2022

WordPress nyhetstema sammenligning: Avis vs. Astra

Å lage et utmerket nyhetsnettsted krever ikke at du blir webdesigner. Vi…

25. oktober 2021

Lag en nyhetsrelatert nettside med avis-tema

Avis-temaet er et av de viktigste WordPress-temaene designet av tagDiv, en...

18. oktober 2021

Hvordan bruke klebrig overskrift og rulleeffekter med Elementor

En overskrift er vanligvis det første en person ser når de besøker nettstedet ditt,...

21. september 2021

Slik bruker du Avadas topptekst-, bunntekst- og kolonnelayoutbygger

Vår egen sidebygger, Avada Builder, er nå tilgjengelig i to grensesnitt: Avada...

16. september 2021