Sådan bygger du en e-handel med Avada WooCommerce builder

Når det kommer til at oprette en online butik, er WooCommerce det perfekte plugin . Det er latterligt enkelt at oprette en online butik og begynde at sælge dine produkter, så snart du er færdig. Avada giver omfattende support og designintegration til WooCommerce, hvilket giver dig mulighed for at skabe din drømmebutik, samtidig med at du sikrer, at den ser ud præcis den ramme, du har i tankerne. 

Avada handler om at give dig muligheden for at tilpasse dit websteds udseende, hvilket ikke er anderledes med WooCommerce-integration. Ved at bruge vores populære netværk af avancerede muligheder kan du vælge mellem en bred vifte af tilpasninger til en række designmuligheder, herunder:

  • WooCommerce har sit eget Avada Global Options Panel, adskilt fra Avada Global Options Panel.
  • Avada-sideindstillinger er tilgængelige for hvert produkt.
  • Avada Builder giver dig mulighed for at oprette produktsidedesign ved at trække og slippe elementer.

At bygge din e-handelsside med Avada. 

Først skal vi installere wooCommerce i Avada.

Installation af WooCommerce - Trin-for-trin instruktioner

Gå til Avada > Plugin s / Add-ons og se efter WooCommerce- plugin , som vist på skærmbilledet nedenfor.

Trin 1 – Installer WooCommerce- plugin .

Trin 2 – Vælg 'Installer' fra rullemenuen.

plugin installeres og aktiveres automatisk.

Trin 3 – Derefter skal WooCommerce-opsætningsguiden vises. Hvis du importerer en af ​​vores Woo-demoer, såsom Modern Shop eller Classic Shop, kan du springe dette trin over uden risiko for at miste dine data. For at springe videre skal du vælge 'Ikke lige nu' i rullemenuen. Hvis du ikke importerer en af ​​vores Woo-demoer, så fortsæt til næste trin ved at klikke på 'Let's Go!' knappen for at starte opsætningsprocessen.

Trin 4 – Følg anvisningerne og instruktionerne på skærmen for at fuldføre processen og indtaste de nødvendige oplysninger om din butik. Ved at klikke på knappen 'Opret dit første produkt', når du er færdig, vil du være i stand til at fortsætte med at oprette dit første produkt. Alternativt kan du vende tilbage til dit WordPress Dashboard ved at klikke på linket under opsætningsvinduet.

Sådan tildeler du en butiksside til dit websted

Som en del af den normale WooCommerce-installationsproces bør installationsguiden startes, så du kan konfigurere din butik og tildele dine butikssider til kunder. Flere oplysninger om de sider, som installationsguiden opretter, kan findes i dette WooCommerce-dokument.

Alternativt, hvis installationsguiden ikke vises, eller hvis du annullerer den af ​​en eller anden grund, kan du altid vende tilbage til opsætningsguiden ved at vælge opsætningsguiden fra menuen Hjælp på en hvilken som helst WooCommerce-side, som kan findes øverst til venstre i vindue.

Du kan manuelt indstille butikssiden ved at gå til fanen Produkter i WooCommerce-indstillingerne – WooCommerce > Indstillinger > Produkter – og vælge den side, der vil være hovedbutikssiden, fra rullemenuen. WooCommerce vil derefter vise dine produkter på denne side som et resultat af din handling.

De resterende sider kan konfigureres på fanen Avanceret, som findes på WooCommerce > Indstillinger > Avanceret .

Oprettelse af dine produkter

Trin 1 – På din WordPress Admin-sidebjælke skal du navigere til fanen Produkter > Tilføj produkt.

Trin 2 – Indtast navnet på dit produkt øverst på siden.

Trin 3 – Udfyld indlægsindholdsfeltet med teksten fra produktbeskrivelsen. Alle produktoplysninger vil blive vist i dette afsnit.

Trin 4 – Udfyld feltet ' Produktdata ' med alle produktoplysningerne . For eksempel amp pris, SKU og forsendelse alle mulige muligheder.

Trin 5 – Indtast en kortfattet beskrivelse af dit produkt i feltet ' Kort beskrivelse af produktet ', der vises ved siden af ​​dine hovedbilleder.

Trin 6 Det vigtigste billede skal placeres under boksen ' Produktbillede ' på højre side af siden; Dette skal udfyldes for hvert produkt.

Trin 7 – Tilføj flere billeder til boksen ' Produktgalleri , hvis du vil bruge et galleri med billeder i stedet for et enkelt billede.

Trin 8 – I feltet ' Produktkategorier du indtaste de kategorier, der gælder for dine produkter. Udfyld derefter de tomme felter med de passende tags til dit produkt i boksen ' Produkttags ' .

Trin 9 – Når du har indtastet alle de nødvendige oplysninger, skal du klikke på knappen ' Udgiv ', og varen vises på din hovedbutiksside.

Oprettelse af produkt Zoom Effect

Hvis du bruger Avada Layouts, skal du sørge for, at WooCommerce Product Images Zoom-indstillingen er aktiveret i Avada > Indstillinger > WooCommerce > Generelt WooCommerce > WooCommerce Product Images Zoom-indstilling eller i fanen Woo Product Images Element General > Produktbilleder Zoom, hvis du bruger WooCommerce Layouts.

WooCommerce Product Images Width – Din hovedbilledbredde (se indstillingen nedenfor) og den faktiske størrelse af det uploadede billede skal begge være større end indstillingen Avada > Indstillinger > WooCommerce > Generelt WooCommerce > WooCommerce Product Images Width eller Produktbilleder Max Width i Woo Product Images Element. Bredden af ​​containerkolonnen for et enkelt produktgalleri vil blive bestemt af de indstillinger, du vælger. Når du har foretaget de nødvendige justeringer, er du klar til at indstille bredden på dit WooCommerce-hovedbillede.

WordPress Main Image Width – WooCommerce Main Image Width-indstillingen kan findes i Customizer på dit WordPress-websted. Fra WordPress-dashboardet skal du navigere til Udseende > Tilpas > WooCommerce > Produktbilleder , hvor du finder indstillingen Main Image Width; Dette vil bestemme den faktiske størrelse af billedet, der vises i galleriet.

Jo mere detaljeret din zoom-effekt vil være, jo større billedstørrelse har du indstillet til dit billede. For at præcisere, hvis billedstørrelsen i WooCommerce-indstillingerne matcher billedbredden i Avadas globale muligheder, vil ingen zoom være synlig, når musen svæver over billedet på siden. Derudover skal størrelsen på det faktiske billede, du uploader, være den samme som eller større end indstillingen Main Image Width på dit websteds design.

Sørg for, at du genskaber dine miniaturebilleder efter at have ændret WooCommerce-billedstørrelserne; Dette vil anvende dine nye billedstørrelser på alle billeder, der allerede er blevet uploadet til dit websted. Du kan bruge plugin Regenerate Thumbnails til at opnå dette.

Justering af indstillinger for produktbilledestørrelse i WooCommerce.

WooCommerce inkluderer muligheder for at justere størrelsen på produktbilleder i butikkens katalog og enkelt produktbilleder. Derudover er der specifikke Avada-indstillinger, der fungerer sammen med de billedstørrelser, der bruges af din WooCommerce-butik. Når du konfigurerer disse billedstørrelsesindstillinger, er det vigtigt at huske, at Avadas globale indstillinger også skal tages i betragtning. Vi vil gennemgå hver af disse muligheder mere detaljeret senere.

Antag, at de billeder, du uploader til dine produkter, er mindre ved kilden end de billedstørrelser, der er angivet i dine WooCommerce-indstillinger. I så fald vil du muligvis bemærke nogle visuelle layout-uoverensstemmelser på forsiden af ​​dine butikssider; Dette er ikke en fejl på nogen måde. Det er simpelthen fordi dine billeder var for små til, at WooCommerce-indstillingerne kunne påvirke dem. Du kan tænke på disse indstillinger som den maksimale bredde og højde for dine billeder med hensyn til billeddimensioner. Alt, der falder under den angivne grænse, vil ikke blive ændret.

Når du konfigurerer din butik, skal du sørge for, at både WooCommerce-billedstørrelsesindstillingerne og den faktiske størrelse på dine billeder tages i betragtning. Sammenfattende skal dine billeder have samme størrelse som eller større end billedstørrelsesindstillingerne i din WooCommerce-butik.

Enhver ændring af dine billedstørrelsesindstillinger kræver, at du genskaber dine miniaturebilleder, for at de kan træde i kraft på billeder, der allerede er blevet uploadet til dit websted. Derfor anbefales det stærkt at bruge Regenerate Thumbnails plugin . Derudover kan billedstørrelser justeres ved hjælp af nedenstående trin:

Trin 1 – I din administratorsidebjælke skal du navigere på fanen ' Udseende ' og derefter fanen ' Tilpas ' for at begynde at tilpasse dit websted.

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

Trin 3 – Billedindstillingen for enkeltproduktbilleder kan findes under konfigurationsvinduets fane ' Produktbilleder ' .

Trin 4 – Når du uploader billeder til dine enkelte produktsider, skal du vælge hovedbilledbredden. Miniaturebredde er bredden af ​​miniaturebillederne for dine produkter i kataloget. Udfyld de tomme felter med den ønskede breddeværdi.

Trin 5 – For at genskabe miniaturer, efter at du har ændret billedstørrelserne og gemt dem, skal du bruge plugin , som kan findes i Plugin 's sektion. Installer først plugin og naviger derefter til WP Admin > Tools , hvor du kan vælge at genskabe dine billedthumbnails og skabe de nye billedstørrelser.

Hanson F.

Seneste indlæg

Sådan bruger du sidehoveder og sidefødder med Elementor

Et websteds sidehoveder og sidefødder er væsentlige elementer. I de fleste tilfælde giver overskriften navigation...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To af de mest populære WordPress-temaer på markedet er Astra og OceanWP. Professionel…

2. januar 2022

WordPress nyhedstema sammenligning: Avis vs. Astra

Oprettelse af et fremragende nyhedswebsted kræver ikke, at du bliver webdesigner. Vi…

25. oktober 2021

Opret en nyhedsrelateret hjemmeside med Avis-tema

Avis-temaet er et af de mest betydningsfulde WordPress-temaer designet af tagDiv, en...

18. oktober 2021

Sådan bruger du sticky header og rulleeffekter med Elementor

En header er generelt det første, en person ser, når de besøger dit websted,...

21. september 2021

Sådan bruger du Avadas sidehoved, sidefod og kolonnelayoutbygger

Vores helt egen sidebygger, Avada Builder, er nu tilgængelig i to grænseflader: Avada...

16. september 2021