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
- Hur man tilldelar en butikssida till din webbplats
- Skapa dina produkter
- Skapar produkten Zoom Effect
- Justera inställningar för produktbildstorlek i WooCommerce.
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.
