Att handla online innebär att kunderna inte kan röra, hålla eller undersöka dina produkter personligen.
Det är precis därför dina WooCommerce-produktbilder måste arbeta extra hårt för att berätta hela historien om vad du säljer.
Ett väldesignat produktbildgalleri gör mer än att visa upp dina varor – det besvarar frågor, bygger förtroende och hjälper kunder att visualisera att de äger dina produkter.
Genom vårt arbete med otaliga WooCommerce-butiker har vi sett hur rätt galleriinställning kan förvandla tillfälliga besökare till nöjda kunder.
Det bästa? Du behöver inga dyra verktyg eller teknisk expertis för att skapa gallerier.
Vi visar dig exakt hur du ställer in produktbildgallerier som får din WooCommerce-butik att se professionell ut och hjälper dina produkter att sälja sig själva.
Varför ska du skapa produktgallerier för WooCommerce?
WooCommerce är det mest populära e-handelspluginet för WordPress på marknaden. Det låter dig sälja produkter genom att skapa en onlinebutik.
De flesta WordPress-teman för WooCommerce kommer med standardmallar för butiks- och butikskategorisidor. Dessa sidor listar helt enkelt dina produkter med hjälp av temat stil.
Tänk om du ville skapa ett produktgalleri och visa det inuti ett blogginlägg eller en annan sida på din webbplats? Genom att visa dina produkter i dina populära blogginlägg och sidor kan du öka din försäljning och konverteringar.
Låt oss ta en titt på hur du enkelt skapar produktbildgallerier för WooCommerce. Vi kommer att dela två olika metoder, och du kan använda snabblänkarna nedan för att hoppa till det alternativ som passar dig:
- Metod 1: Skapa WooCommerce produktgallerier med SeedProd (Rekommenderas)
- Metod 2: Skapa WooCommerce-produktgallerier med Envira Gallery
- Vanliga frågor
Metod 1: Skapa WooCommerce produktgallerier med SeedProd (Rekommenderas)
Det bästa sättet att skapa ett produktbildgalleri för WooCommerce är att använda SeedProd. Det är den bästa dra och släpp WordPress sidbyggaren på marknaden.
Vi använde SeedProd för att skapa flera siddesigner på våra demosidor, och resultaten var imponerande – layouten såg professionell ut och laddades smidigt.
SeedProd låter dig enkelt skapa anpassade WordPress-teman och landningssidor, utan kodning. Dessutom kommer det med inbyggda WooCommerce-block och integration som gör det enkelt att lägga till produktbildgallerier till vilken sida eller inlägg som helst i WordPress.
Om du vill se mer information har vi en djupgående recension av SeedProd som täcker alla dess funktioner och fördelar.
För att komma igång måste du installera och aktivera SeedProd-pluginet. Om du behöver hjälp kan du följa den här guiden om hur man installerar ett WordPress-plugin.
Notera: Det finns en gratis version av SeedProd som du kan prova, men du behöver SeedProds Elite-plan för att komma åt WooCommerce-block.
När pluginet är aktiverat, gå till SeedProd » Inställningar från din WordPress-instrumentpanel och ange din licensnyckel.
Du hittar din licensnyckel på ditt konto på SeedProd-webbplatsen. Efter att ha angett din licensnyckel klickar du på knappen 'Verifiera nyckel' för att fortsätta.
Välja ett WooCommerce-mallkit
Välj sedan en WooCommerce malluppsättning att använda för din onlinebutik. Detta kommer att ersätta ditt befintliga WordPress-tema med en ny, anpassad design.
Gå helt enkelt till SeedProd » Temabyggare och klicka sedan på knappen 'Temamallar'.
Detta tar dig till SeedProds webbplatsmallbibliotek.
Härifrån kan du klicka på fliken 'WooCommerce' för att se alla mallpaket som skapats specifikt för onlinebutiker.
Du kan sväva över valfri malluppsättning och klicka på förstoringsglaset för att förhandsgranska designen. När du hittar en malluppsättning du gillar, klickar du helt enkelt på bockmarkeringen för att använda den.
För den här handledningen kommer vi att använda WooCommerce Starter Theme, men du kan använda vilken malluppsättning du vill.
När du har valt en mall, kommer SeedProd att importera den, och du kommer att kunna se en lista över alla mallkomponenter på temats instrumentpanel.
Du kan anpassa varje del av mallen, inklusive produktsidor, butikssida, kassasidan och mer, med SeedPods enkla dra-och-släpp-byggare. Så här lägger vi till ett WooCommerce-produktbildgalleri.
Hitta först mallkomponenten du vill anpassa. För den här handledningen väljer vi komponenten 'Enskilt inlägg'. Detta är mallen som bestämmer hur alla dina enskilda blogginlägg ser ut.
Håll bara muspekaren över den och klicka på länken 'Redigera design'.
Detta öppnar SeedProds visuella sidbyggare.
Härifrån kan du dra och släppa färdiga block på din sida, klicka på ett element för att anpassa det och se en förhandsgranskning av hur din design ser ut i realtid.
Fortsätt och gör de anpassningar du vill ha så lägger vi till produktbildgalleriet i nästa steg.
Lägga till WooCommerce produktbildgalleri-slider i WordPress
Nu när du har en anpassad WooCommerce-tema design, är du redo att lägga till ett vackert produktbildgalleri.
För att göra det, klicka på WooCommerce-malltaggen 'Produktgalleribilder' i den vänstra panelen och dra den var som helst till ditt sidförhandsgranskningsområde.
Detta kommer att hämta din produktinformation och bilder direkt från WooCommerce.
Därefter kan du klicka på blocket för att anpassa inställningarna för ditt produktbildgalleri.
Först ser du alternativet för bildzoomning. Detta gör att besökare kan föra muspekaren över en bild för att få en förstorad vy av en produkt.
Du kan dra de horisontella reglagen för att styra positionen för zoomknappen. Du kan också ändra teckenstorlek, ikonfärg, kantradie och bakgrundsfärg.
Om du skrollar ner kan du även anpassa bild- och miniatyrbildkanterna. Du kan ställa in kantradie, stil, färg och bredd.
Det finns också en flik 'Avancerat' som du kan klicka på för att se fler anpassningsalternativ.
Dessa inkluderar marginaler, CSS ID och klass, synlighet på enheter, animationseffekter och mer.
När du är klar med att anpassa ditt produktbildgalleri, glöm inte att klicka på 'Spara'-knappen.
Publicera ditt WooCommerce produktbildgalleri
Slutligen måste du göra ditt produktbildgalleri live på din webbplats. För att göra det, avsluta den visuella byggaren och gå tillbaka till instrumentpanelen 'Theme Builder'.
Växla sedan helt enkelt omkopplaren 'Enable SeedProd Theme' till läget 'Yes'.
Det var allt!
Du kan besöka din webbplats och se ditt WooCommerce-produktbildgalleri live i aktion.
Nu kan dina besökare klicka sig igenom produktbilderna i ditt galleri som ett bildspel och zooma in på produktdetaljer.
Metod 2: Skapa WooCommerce-produktgallerier med Envira Gallery
Envira Gallery är det bästa WordPress-fotogalleriprogrammet och gör det enkelt att visa produkter var som helst på din webbplats.
Vi har testat det omfattande på vår webbplats och sett imponerande resultat. Det är ett snabbt sätt att skapa ett WooCommerce produktgalleri i WordPress.
För mer information kan du läsa vår omfattande recension av Envira Gallery för att utforska alla dess funktioner och möjligheter.
Det första du behöver göra är att installera och aktivera Envira Gallery-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering måste du gå till sidan Envira Gallery » Inställningar för att ange din licensnyckel. Du hittar denna information under ditt konto på Envira Gallerys webbplats.
När licensnyckeln är verifierad kan du gå till Envira Gallery » Addons för att installera och aktivera 'Featured Content'-tillägget.
Detta tillägg låter dig visa dina WooCommerce-produkter i Envira-gallerierna. Klicka på knappen 'Installera' under tillägget Featured Content.
Gå sedan till sidan Envira Gallery » Lägg till ny för att skapa ditt nya produktgalleri.
Härifrån kan du börja med att lägga till en titel för det nya galleriet.
Efter titeln behöver du växla till fliken 'Externt galleri' och klicka på alternativet 'Utvald innehåll'.
Rulla sedan ner till fliken 'Bilder'. I fältet 'Välj din/dina inläggstyper' måste du välja alternativet 'Produkt', vilket är anpassad inläggstyp för WooCommerce-produkter.
Om du har hundratals produkter kanske du vill skapa flera gallerier.
Du kan begränsa gallerilistorna genom att välja taxonomi termer för specifika produkt taggar eller kategorier.
Upprepa helt enkelt denna process med olika produktetiketter och kategorier varje gång du skapar ett nytt produktgalleri. Posttypen kommer alltid att vara 'Produkt' i alla dina WooCommerce-produktgallerier.
Du kan också välja en taxonomitermrelation för att välja och visa specifika produkter i dina gallerier.
För mer information bör du ta en titt på vår guide om hur du skapar ett bildgalleri i WordPress.
När du är klar kan du publicera ditt produktgalleri, vilket gör det tillgängligt att läggas till var som helst på din WordPress-webbplats.
Lägga till WooCommerce produktgalleri i WordPress
Därefter kan du lägga till ett nytt inlägg eller en ny sida eller redigera ett befintligt för att visa ditt WooCommerce produktgalleri.
När du är i innehållsredigeraren klickar du helt enkelt på '+' -knappen och lägger till Envira Gallery-blocket.
Därefter kan du välja ditt produktbildgalleri i Envira Gallery-blocket.
Klicka helt enkelt på rullgardinsmenyn och välj det galleri du skapade tidigare.
Du kommer nu att se en förhandsgranskning av ditt galleri i blockredigeraren. Om det inte laddas, oroa dig inte. Du kan helt enkelt förhandsgranska ditt blogginlägg eller din sida för att se om det fungerar korrekt.
Spara och publicera sedan ditt inlägg. Besök därefter din webbplats för att se produktgalleriet i aktion.
Vanliga frågor
Här är några vanliga frågor om att skapa produktgallerier i WooCommerce.
Kan jag lägga till videor i mitt WooCommerce-produktbildgalleri?
Ja, du kan förbättra ditt WooCommerce-produktbildgalleri genom att inkludera videor. Videor ger ett dynamiskt sätt att visa upp dina produkter och erbjuder en detaljerad vy för potentiella kunder.
För att komma igång, se vår handledning om hur du lägger till produktvideor i dina WooCommerce-gallerier.
Hur kan jag optimera galleribilder för snabbare laddningstider?
Att optimera dina galleribilder är viktigt för att förbättra laddningstiderna och öka användarupplevelsen.
Vi rekommenderar att börja med att komprimera bilder med verktyg som EWWW Image Optimizer, vilket kan minska filstorleken avsevärt utan att offra kvalitet.
Dessutom, överväg att använda ett innehållsleveransnätverk (CDN) för att snabbt distribuera bilder till användare, oavsett var de befinner sig.
Använd slutligen lat laddning för att säkerställa att bilder bara laddas när användare scrollar ner på sidan.
För mer information kan du se vår nybörjarguide om optimering av bilder för webbprestanda utan kvalitetsförlust.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett produktbildgalleri för WooCommerce. Du kanske också vill se vår guide om hur du säljer mer produkter i WooCommerce och vårt expertval av bästa WooCommerce-plugins för din butik.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Jiří Vaněk
Jag är verkligen exalterad över den här artikeln! Du har beskrivit mycket bra hur man enkelt skapar bildgallerier i WooCommerce, vilket är perfekt för någon som jag som fortfarande lär mig att driva en onlinebutik. Lyckligtvis är jag inte ensam på den här resan :). Att använda Optin Monster för en CTA i slutet av artikeln är en lysande idé, särskilt eftersom vi använder Optin Monster (liksom Seed Prod för landningssidor) inte bara på WooCommerce utan även på vår blogg och företagswebbplats. Det har återigen utökat min kunskap om e-handel på Woo-plattformen.