Hur man skapar ett WooCommerce-produktbildgalleri (steg för steg)

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 eCommerce-pluginet 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's 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)

Det bästa sättet att skapa ett bildgalleri för WooCommerce-produkter är att använda SeedProd. Det är den bästa dra-och-släpp-sidbyggaren för WordPress 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 att kräva kodning. Dessutom kommer det med inbyggda WooCommerce-block och integration som gör det enkelt att lägga till bildgallerier för produkter på vilken sida eller inlägg som helst i WordPress.

Om du vill se mer detaljer har vi en fördjupad 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.

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

Därefter måste du välja ett WooCommerce-mallkit 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 ett mallkit kommer SeedProd att importera det, och du kommer att kunna se en lista över alla mallkomponenter på temats instrumentpanel.

Du kan anpassa varje del av mallen, inklusive produktsidor, butikssida, kassasida och mer, med SeedProd's enkla dra-och-släpp-byggare. Det här är hur vi kommer att lägga till ett bildgalleri för WooCommerce-produkter.

Hitta först mall-delen du vill anpassa. För den här handledningen väljer vi delen 'Enskild produkt'.

Detta är mallen som bestämmer hur alla dina enskilda WooCommerce-produktsidor ser ut. Håll 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-temadesign är du redo att lägga till ett vackert bildgalleri för produkter.

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 mellanrum, 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 bildgalleri för produkter 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

Medan den första metoden hjälper dig att anpassa galleriet på din faktiska produktsida, är den här metoden för när du vill skapa ett galleri med flera produkter att visa i inlägg, sidor eller sidofält.

Envira Gallery är det bästa WordPress-pluginet för fotogallerier 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.

Ladda ner tillägget WooCommerce Products

När licensnyckeln är verifierad kan du gå till Envira Gallery » Addons för att installera och aktivera 'Featured Content'-tillägget.

Det här tillägget låter dig visa dina WooCommerce-produkter i Envira-gallerierna. Fortsätt och klicka på 'Installera'-knappen under Featured Content Addon.

Skapa ett nytt produktgalleri

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'.

Bläddra sedan ner till fliken 'Bilder'. I fältet 'Välj din/dina inläggstyp(er)' måste du välja alternativet 'Produkt'.

Detta talar om för Envira att automatiskt hämta den framhävda bilden från dina WooCommerce-produkter för att bygga galleriet.

Om du har hundratals produkter kanske du vill skapa flera gallerier.

Du kan begränsa gallerilistningarna genom att välja taxonomitermer 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 titta 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 om WooCommerce produktgallerier

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 du börjar 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 att optimera bilder för webbprestanda utan att förlora kvalitet.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett WooCommerce-produktbildgalleri. Du kanske också vill se vår guide om hur du säljer mer produkter i WooCommerce och vårt experttips om de bästa WooCommerce-pluginsen för din butik.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.