De flesta incidenter med suddiga bilder orsakas av stilisering av temat, vilket innebär att temats design har bilddimensioner i pixlar som kanske inte passar ihop med WooCommerce.

Uppdatering från och med WooCommerce 3.3 Tillbaka till början

WooCommerce version 3.3 och högre har stöd för att göra teman kompatibla med WooCommerce och förbättringar av bildstorleksrendering och beskärning. Dessa nya funktioner innebär att:

• Blurry images caused by theme incompatibility or overriding code should no longer occur.
• Store owners can control width and height of their main images.
• Miniatyrbildens storlek kan ändras automatiskt eller manuellt.
• Bilder som visas för kunderna ser alltid bra ut som standard, så att dina produkter fortsätter att sälja sig själva!

För att lära dig hur du använder dessa nya funktioner, gå till:

Andra lösningar Tillbaka till början

Om du använder en version av WooCommerce före 3.3 rekommenderar vi att du uppdaterar till den senaste versionen för att dra nytta av de funktioner som beskrivs ovan.

Om du av någon anledning inte vill använda den senaste versionen eller om uppdatering till 3.3 inte löser det problem du upplever kan det vara:

• Dina inställningar för bildstorlek är för små.
• Originalbilderna måste ha en högre upplösning.

För att lösa detta:

• Dina bilddimensioner bör matcha eller vara högre än de för ditt tema.
• Originalbilder som du laddar upp bör vara minst 800 x 800 px eller högre för att fungera för de flesta teman.

Vi visar hur du hittar den maximala bildstorleken som ditt tema vill ha i videon och nedan.

Bildtyper Tillbaka till början

• Enkel produktbild: Största bilden på den enskilda produktinformationssidan och hänvisar till huvudbilden.
• Katalogbilder: Medelstor bild som används i produktslingor, t.ex. på Shop-sidan, produktkategorisidor, relaterade produkter, merförsäljning och korsförsäljning.
• Produktminiatyrbilder: Små bilder som vanligtvis används i varukorgen, widgets och (valfritt) galleribilder under den enskilda produktbilden.

Standardbilddimensioner Tillbaka till början

I WooCommerce version 3.2x och senare finns inställningarna för produktbilder på WooCommerce > Inställningar > Produkter > Visa > Produktbilder. Observera att den första siffran är bredden och den andra höjden.

De bilder som du laddar upp ändras i storlek för att matcha de värden du anger. Om dina inställningar till exempel är 100×100 och du laddar upp en 300×600-bild ändras storleken till 100×200. Du kan också välja att ”hårt beskära” dina bilder, vilket tvingar dem att vara i den storlek som anges i inställningarna, oavsett vilken råbild du laddar upp, så att de beskärs snarare än förvrängs i skala.

Om du ändrar inställningarna efter att ha laddat upp produktbilder måste du återskapa miniatyrbilderna i WordPress för att ändringarna ska gälla. För att göra detta rekommenderar vi att du använder insticksmodulen Regenerera miniatyrbilder.

Sedan WooCommerce version 3.3 finns inställningar för produktbilder under Anpassningsverktyg, i WooCommerce > Produktbilder:

Hitta temats produktbildsdimensioner Tillbaka till början

Temat du valde delegerar den maximala storleken på en bild, så du måste känna till dimensionerna i vilka det render dem för att kunna ställa in dem i WooCommerce.

Katalogbilder Tillbaka till början

Detektera var ditt tema gör katalogminiatyrbilderna störst. I vissa fall är detta sidan för butiken; i Twenty Eleven-temat är det i slingan för relaterade produkter.

Med utvecklarverktygen aktiverade i din valfria webbläsare kan du högerklicka på bilden och välja ”Inspektera” eller ”Inspektera element”. Då får du reda på bildens dimensioner. Notera detta eftersom vi behöver använda dem senare.

I Storefront (ovan) är de största katalogbilderna 213 x 213px.

Enstaka produktbild Tillbaka till början

Förfarande för den enskilda produktbilden – den största bilden på en produktsida.

I Storefront är den största enskilda produktbilden 298 x 298px.

Produktminiatyr Tillbaka till början

Den minsta är troligen miniatyrbilden i produktgalleriet. Upprepa inspektionsprocessen för att få fram dimensionerna.

I Storefront är den 43 x 43px.

Justera bilddimensionerna och återskapa miniatyrbilderna Tillbaka till början

Nu när alla storlekar på miniatyrbilder för vårt specifika tema är kända kan vi lägga till dessa nya dimensioner i WooCommerce för att säkerställa att framtida bildstorlekar kommer att vara denna storlek eller större.

I WooCommerce > Settings > Products > Display, se till att de maximala bildstorlekarna är minst lika stora som de dimensioner som ditt tema återger för dessa miniatyrbilder. Spara sedan ändringarna.

Alla nya produktbilder som laddas upp kommer nu att ha miniatyrbilder i dessa inställningar och bör visas utan förvrängning eller oskärpa.

Retina-stöd Tillbaka till början

HiDPI-skärmar, allmänt kända som retinaskärmar, innehåller dubbelt så många pixlar, eller mer, än äldre skärmar. För att få perfekta pixelbilder på retina-skärmar ska du ställa in dina miniatyrbilder så att de är dubbelt så stora som den storlek som temat ger. Om ett tema till exempel gör bilderna i storleken 80 x 80px vill du att de ska vara 160 x 160px.