Hur man bygger en e-handel med Avada WooCommerce Builder

När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Det är löjligt enkelt att skapa en onlinebutik och börja sälja dina produkter så fort du är klar. Avada tillhandahåller omfattande support och designintegration för WooCommerce, så att du kan skapa dina drömmars butik samtidigt som du ser till att den ser ut exakt den ram du har i åtanke. 

Avada handlar om att ge dig möjligheten att anpassa din webbplats utseende, vilket inte är annorlunda med WooCommerce-integration. Genom att använda vårt populära nätverk för avancerade alternativ kan du välja från ett brett utbud av anpassningar för en mängd olika designmöjligheter, inklusive:

  • WooCommerce har sin egen Avada Global Options Panel, separat från Avada Global Options Panel.
  • Avada sidalternativ är tillgängliga för varje produkt.
  • Avada Builder låter dig skapa produktsidor genom att dra och släppa element.

För att bygga din e-handelssida med Avada. 

Först måste vi installera wooCommerce i Avada.

Installera WooCommerce – Steg-för-steg-instruktioner

Gå till Avada > Plugin s / Add-ons och leta efter WooCommerce- plugin , som visas i skärmdumpen nedan.

Steg 1 – Installera WooCommerce- plugin .

Steg 2 – Välj "Installera" från rullgardinsmenyn.

plugin kommer att installeras och aktiveras automatiskt.

Steg 3 – Efter det ska WooCommerce Setup Wizard visas. Om du importerar en av våra Woo-demos, som Modern Shop eller Classic Shop, kan du hoppa över det här steget utan att riskera att förlora din data. För att hoppa framåt, välj "Inte just nu" från rullgardinsmenyn. Om du inte importerar en av våra Woo-demos, gå vidare till nästa steg genom att klicka på "Let's Go!" för att starta installationsprocessen.

Steg 4 – Följ anvisningarna och instruktionerna på skärmen för att slutföra processen och ange nödvändig information om din butik. Genom att klicka på knappen "Skapa din första produkt" när du är klar kommer du att kunna fortsätta med att skapa din första produkt. Alternativt kan du återgå till din WordPress Dashboard genom att klicka på länken under inställningsfönstret.

Hur man tilldelar en butikssida till din webbplats

Som en del av den normala WooCommerce installationsprocessen bör installationsguiden startas, så att du kan konfigurera din butik och tilldela dina butikssidor till kunder. Mer information om sidorna som installationsguiden skapar finns i detta WooCommerce-dokument.

Alternativt, om installationsguiden inte visas, eller om du av någon anledning avbryter den, kan du alltid återgå till installationsguiden genom att välja installationsguiden från hjälpmenyn på valfri WooCommerce-sida, som finns längst upp till vänster i fönster.

Du kan ställa in butikssidan manuellt genom att gå till fliken Produkter i WooCommerce-inställningarna – WooCommerce > Inställningar > Produkter – och välja sidan som kommer att vara huvudbutikssidan från rullgardinsmenyn. WooCommerce kommer sedan att visa dina produkter på denna sida som ett resultat av din åtgärd.

De återstående sidorna kan konfigureras på fliken Avancerat, som finns på WooCommerce > Inställningar > Avancerat .

Skapa dina produkter

Steg 1 – På din WordPress Admin-sidofält, navigera till fliken Produkter > Lägg till produkt.

Steg 2 – Högst upp på sidan anger du namnet på din produkt.

Steg 3 – Fyll i inläggets innehållsfält med texten från produktbeskrivningen. All produktinformation kommer att visas i detta avsnitt.

Steg 4 – Fyll i rutan ' Produktdata ' med all produktinformation . Till exempel amp pris, SKU och frakt alla möjliga alternativ.

Steg 5 – I rutan " Kort beskrivning av produkten " skriver du en kortfattad beskrivning av din produkt som kommer att visas bredvid dina huvudbilder.

Steg 6 – Den huvudsakliga bilden ska placeras under rutan ' Produktbild ' till höger på sidan ; Detta måste fyllas i för varje produkt.

Steg 7 till fler bilder i rutan ' Produktgalleri ' om du vill använda ett galleri med bilder istället för en enda bild.

Steg 8 – I rutan ' Produktkategorier kategorier som gäller för dina produkter. Fyll sedan i de tomma fälten med lämpliga taggar för din produkt i rutan " Produktetiketter " .

Steg 9 – När du har angett all nödvändig information klickar du på knappen " Publicera " så kommer objektet att visas på din huvudsakliga skyltfönster.

Skapar produkten Zoom Effect

Om du använder Avada-layouter måste du se till att zoomalternativet WooCommerce produktbilder är aktiverat i Avada > Alternativ > WooCommerce > Allmänt WooCommerce > Zoomalternativ för WooCommerce produktbilder , eller på fliken Woo Product Images Element Allmänt > Produktbilder Zooma om du använder WooCommerce-layouter.

WooCommerce Product Images Width – Din huvudsakliga bildbredd (se inställningen nedan) och den faktiska storleken på bilden som laddas upp måste båda vara större än inställningen Avada > Alternativ > WooCommerce > Allmänt WooCommerce > WooCommerce Product Images Width eller Produktbilder Max Width i Woo Product Images Element. Bredden på behållarkolumnen för ett enskilt produktgalleri bestäms av de inställningar du väljer. När du har gjort de nödvändiga justeringarna är du redo att ställa in bredden på din WooCommerce-huvudbild.

WordPress Main Image Width – WooCommerce Main Image Width-inställningen finns i Customizer på din WordPress-webbplats. Från WordPress-instrumentpanelen, navigera till Utseende > Anpassa > WooCommerce > Produktbilder , där du hittar inställningen Main Image Width; Detta kommer att avgöra den faktiska storleken på bilden som visas i galleriet.

Ju mer detaljerad din zoomeffekt blir, desto större bildstorlek har du angett för din bild. För att förtydliga, om bildstorleken i WooCommerce-inställningarna matchar bildbredden i Avadas globala alternativ, kommer ingen zoomning att vara synlig när musen svävar över bilden på sidan. Dessutom måste storleken på den faktiska bilden du laddar upp vara densamma som eller större än inställningen Main Image Width på din webbplats design.

Se till att du återskapar dina miniatyrer efter att ha ändrat WooCommerce-bildstorlekarna; Detta kommer att tillämpa dina nya bildstorlekar på alla bilder som redan har laddats upp till din webbplats. Du kan använda plugin Regenerate Thumbnails för att åstadkomma detta.

Justera inställningar för produktbildstorlek i WooCommerce.

WooCommerce inkluderar alternativ för att justera storleken på produktbilder i butikens katalog och enstaka produktbilder. Dessutom finns det specifika Avada-inställningar som fungerar tillsammans med bildstorlekarna som används av din WooCommerce-butik. När du konfigurerar dessa bildstorleksinställningar är det viktigt att komma ihåg att Avadas globala alternativinställningar också måste beaktas. Vi kommer att gå över vart och ett av dessa alternativ mer i detalj senare.

Anta att bilderna du laddar upp för dina produkter är mindre vid källan än de bildstorlekar som anges i dina WooCommerce-inställningar. I så fall kan du märka vissa visuella layoutavvikelser på fronten av dina butikssidor; Detta är inte en bugg på något sätt. Det beror helt enkelt på att dina bilder var för små för att WooCommerce-inställningarna skulle påverka dem. Du kan tänka på dessa inställningar som maximal bredd och höjd för dina bilder när det gäller bilddimensioner. Allt som faller under den angivna gränsen kommer inte att ändras i storlek.

När du konfigurerar din butik, se till att både WooCommerce-bildstorleksinställningarna och den faktiska storleken på dina bilder beaktas. Sammanfattningsvis bör dina bilder ha samma storlek som eller större än bildstorleksinställningarna i din WooCommerce-butik.

Alla ändringar av dina bildstorleksinställningar kräver att du återskapar dina miniatyrer för att de ska träda i kraft på bilder som redan har laddats upp till din webbplats. Därför rekommenderas det starkt att använda plugin Regenerate Thumbnails. Dessutom kan bildstorlekar justeras med hjälp av stegen nedan:

Steg 1 Utseende i sidofältet för administratörer och sedan på fliken " Anpassa " för att börja anpassa din webbplats.

Steg 2 – Navigera till fliken ' WooCommerce ' högst upp på sidan.

Steg 3 Produktbilder i konfigurationsfönstret .

Steg 4 – När du laddar upp bilder till dina enskilda produktsidor, välj alternativet för huvudbildens bredd. Thumbnail width är bredden på miniatyrerna för dina produkter i katalogen. Fyll i de tomma fälten med önskat breddvärde.

Steg 5 – För att återskapa miniatyrer efter att du har ändrat bildstorlekarna och sparat dem, måste du använda plugin , som finns i Plugin . Installera först plugin och navigera sedan till WP Admin > Tools , där du kan välja att återskapa dina bildminiatyrer och skapa de nya bildstorlekarna.

Hanson F.

Senaste inlägg

Hur man använder sidhuvud och sidfot med Elementor

En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...

6 januari 2022

WordPress-temajämförelse: Astra vs OceanWP

Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…

2 januari 2022

Jämförelse av WordPress-nyhetstema: Newspaper vs. Astra

Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…

25 oktober 2021

Skapa en nyhetsrelaterad webbplats med tidningstema

The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...

18 oktober 2021

Hur man använder sticky header och rullningseffekter med Elementor

En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...

21 september 2021

Hur man använder Avadas sidhuvud, sidfot och kolumnlayoutbyggare

Vår alldeles egna sidbyggare, Avada Builder, är nu tillgänglig i två gränssnitt: Avada...

16 september 2021