WooCommerce hoofdafbeelding product en volgorde van de galerij: een korte handleiding
De WooCommerce-hoofdafbeelding van een product stel je in de producteditor in, in de rechterkolom, in het vak Productafbeelding. Het is de afbeelding die in de productlijst, in de winkelwagen en als eerste op de productpagina verschijnt. De andere afbeeldingen voeg je daaronder toe, in het vak Productgalerij, en hun volgorde wijzig je door de miniaturen met de muis te slepen.
Auteur: Het TellMyShop-team. Een gids voor eigenaren van WordPress-websites en WooCommerce-winkels: de oorzaak, de oplossing met de hand en hetzelfde werk in een gesprek met de chat.
Laatst bijgewerkt: · 6 min lezen
Waar verschijnt welke afbeelding?
De hoofdafbeelding werkt op meer plekken dan de galerij, dus kies hem bewust in plaats van de eerste foto uit de fotosessie te nemen.
| Plek | Welke afbeelding | Waar je op let |
|---|---|---|
| product- en categorielijsten | de hoofdafbeelding, bijgesneden tot miniatuur | standaard vierkant, dus hoge afbeeldingen verliezen boven- en onderkant |
| productpagina | de hoofdafbeelding, met de galerij eronder | de volgorde van de galerij stel je met de hand in |
| winkelwagen en bestelmails | de hoofdafbeelding, een kleine miniatuur | een close-up van een detail is in de winkelwagen onleesbaar |
| gekozen variatie | de afbeelding van de variatie in plaats van de hoofdafbeelding | zonder variatieafbeelding ziet de klant altijd de hoofdafbeelding |
| delen op sociale media | meestal de hoofdafbeelding, via de SEO-plugin | de SEO-plugin kan een apart veld voor een afbeelding hebben |
| Google en de productfeed | de hoofdafbeelding als productafbeelding | die moet het product zelf duidelijk laten zien |
WooCommerce beschrijft drie afbeeldingsformaten en de instellingen voor bijsnijden in de documentatie over productafbeeldingen en galerijen. Google vraagt in de specificatie voor de link naar de productafbeelding dat de hoofdafbeelding het verkochte product duidelijk laat zien, en dat andere opnamen bij de extra afbeeldingen komen.
Zo wijzig je de hoofdafbeelding en orden je de galerij
Eén product wijzig je in de backoffice in een paar minuten.
- Open Producten → Alle producten en bewerk het product.
- Zoek in de rechterkolom het vak Productafbeelding. Klik op de huidige afbeelding of op de link om er een in te stellen.
- Kies een afbeelding uit de mediabibliotheek of upload een nieuwe. Vul meteen de alt-tekst in, een korte beschrijving van wat erop staat.
- Voeg daaronder, in het vak Productgalerij, meer afbeeldingen toe. Je kunt er meerdere tegelijk selecteren door Ctrl of Cmd ingedrukt te houden.
- Sleep de miniaturen van de galerij in de volgorde waarin de klant ze moet zien.
- Klik op Bijwerken en open de productpagina in een privévenster om hem te zien zoals een klant.
Een volgorde van de galerij die meestal werkt: het product op een witte achtergrond, het product in gebruik, een detail (naad, structuur, sluiting), schaal of afmetingen, verpakking. De eerste afbeelding beantwoordt “wat is het”, de volgende de vragen die een klant in een fysieke winkel zou stellen.
Welke afbeelding wordt de hoofdafbeelding? Een die als kleine miniatuur in de lijst nog zegt wat het product is. Het product alleen, zonder verpakking, op een lichte, rustige achtergrond, helemaal in beeld en gecentreerd. Houd binnen een categorie één uitsnede en één beeldverhouding aan, want een lijst met een mix van staande, liggende en gestileerde opnamen ziet er rommelig uit. Bewaar foto’s met modellen, gestileerde scènes en details voor de galerij.
Geef in een variabel product elke variatie die er anders uitziet een afbeelding, meestal elke kleur. Open het tabblad Variaties, klap de variatie open en klik op het afbeeldingsicoon ernaast. Maten van dezelfde kleur kunnen één afbeelding delen.
Schrijf alt-teksten concreet: “zwarte hoodie met capuchon, zijaanzicht”, zonder zoekwoorden erin te proppen. Daarover vertellen we meer in het stuk over alt-teksten in WordPress, en Google behandelt het in zijn handleiding over SEO voor afbeeldingen.
Verkeerde afbeelding in de lijst, terwijl de productpagina klopt?
Meestal ligt het aan het bijsnijden, de cache of een variatie. Loop deze drie op volgorde door.
- Bijsnijden van miniaturen. In Weergave → Customizer → WooCommerce → Productafbeeldingen staat een instelling voor de beeldverhouding van miniaturen. Vierkant snijdt staande afbeeldingen bij. Na een wijziging genereert WooCommerce de miniaturen op de achtergrond opnieuw, wat bij een grote catalogus even duurt.
- Cache. Een cacheplugin of je hostingpartij toont misschien een oude lijst. Controleer in een privévenster en leeg zo nodig de cache. Meer in het stuk over waarom wijzigingen niet zichtbaar zijn in WordPress.
- Een variatie met een eigen afbeelding. In een variabel product vervangt de afbeelding van de gekozen variatie de hoofdafbeelding. Heeft de variatie een oude afbeelding, dan ziet de klant de oude afbeelding.
Verschijnt er geen afbeelding naast blogberichten, dan is dat een ander onderwerp. De uitgelichte afbeelding voor berichten behandelen we in een apart stuk over de uitgelichte afbeelding in WordPress.
Zo wijzig je afbeeldingen bij veel producten tegelijk
Voor één product is de backoffice genoeg. Stuurt een leverancier nieuwe packshots voor 80 producten, of heeft na een import de helft van de catalogus de verpakking als hoofdafbeelding, dan zijn dat vele avonden klikken.
De TellMyShop-plugin voor WordPress en WooCommerce verbindt je webshop met de chat. In TellMyShop Free vindt de chat producten zonder hoofdafbeelding en afbeeldingen zonder alt-tekst en toont hij je een lijst. Hij slaat niets op.
In TellMyShop Pro wijzigt de chat afbeeldingen in batches van maximaal 50 producten. Hij stelt de hoofdafbeelding in vanuit de mediabibliotheek of vanaf een openbaar adres, voegt galerijafbeeldingen toe en verwijdert ze, zet ze in volgorde en schrijft alt-teksten. Voor een variatie stelt hij één variatieafbeelding in. Dat werkt direct nadat je de licentie hebt geactiveerd, zonder schakelaars.
Jij: In de categorie Mokken is de hoofdafbeelding de doos. Zet de foto van de mok zelf als hoofdafbeelding en de doos achteraan in de galerij.
Je chat: De categorie Mokken heeft 24 producten. Bij 19 is de eerste afbeelding de doos en staat de mok als tweede in de galerij. Voorbeeld:
5 producten hebben geen foto van alleen de mok, die laat ik met rust.
Jij: Goed, doe die 19.
Je chat: Ik maak een voorbeeld van de hele batch klaar. Ik sla het op na jouw ‘ja’.
Status van de kaart: wacht op jouw “ja”Emaille mok 350 ml
oude versie: Hoofdafbeelding: emaille-mok-doos.jpg
nieuwe versie: Hoofdafbeelding: emaille-mok-zijkant.jpg
oude versie: Galerij: emaille-mok-zijkant.jpg, emaille-mok-detail.jpg
nieuwe versie: Galerij: emaille-mok-detail.jpg, emaille-mok-doos.jpg
De getallen en bestandsnamen in het gesprek zijn voorbeelden. Elke batch komt in de wijzigingsgeschiedenis. Ongedaan maken herstelt de toewijzing van afbeeldingen en de alt-teksten, en bestanden die vanaf adressen zijn gedownload, blijven in de mediabibliotheek. De meeste wijzigingen kun je met één opdracht ongedaan maken.
Wat TellMyShop niet doet: het maakt geen foto’s, bewerkt ze niet in een grafisch programma en wijzigt de beeldverhouding van miniaturen in de weergave-instellingen niet. Het bijsnijden stel je zelf in, met een paar klikken.
Begin met het gratis TellMyShop Free, dat producten zonder afbeeldingen vindt. Werkt met Claude of ChatGPT, ook met gratis accounts. Details staan op de pagina TellMyShop voor WordPress en WooCommerce, en de prijzen van Pro op de pagina prijzen. Ben je net begonnen met producten, lees dan eerst het stuk over een product toevoegen in WooCommerce.
Vragen en antwoorden
Waar wijzig ik de hoofdafbeelding van een product in WooCommerce?
In de producteditor, in de rechterkolom, in het vak Productafbeelding. Klik op de huidige afbeelding, kies een andere uit de mediabibliotheek of upload een nieuwe, en werk het product bij. De afbeelding uit dit vak verschijnt in de productlijst, in de winkelwagen en als eerste op de productpagina.
Hoe wijzig ik de volgorde van afbeeldingen in de productgalerij?
Sleep in het vak Productgalerij de miniaturen met de muis naar hun nieuwe plek en werk het product bij. De hoofdafbeelding komt altijd voor de galerij, dus wil je een andere afbeelding als eerste, stel die dan in als productafbeelding.
Waarom zijn de miniaturen in de productlijst bijgesneden?
WooCommerce snijdt afbeeldingen in lijsten bij tot één beeldverhouding, standaard vierkant. De verhouding wijzig je in Weergave → Customizer → WooCommerce → Productafbeeldingen. Hebben afbeeldingen verschillende verhoudingen, maak ze dan het liefst vanaf het begin in één formaat.
Kan een productvariatie een eigen afbeelding hebben?
Ja, één afbeelding per variatie. Die stel je in op het tabblad Variaties, in de instellingen van die variatie. Kiest een klant bijvoorbeeld rood, dan vervangt die afbeelding de hoofdafbeelding op de productpagina.
Wijzigt de chat afbeeldingen bij veel producten tegelijk?
Ja, in TellMyShop Pro, tot 50 producten in één batch en zonder schakelaars aan te zetten. Hij stelt de hoofdafbeelding in, voegt afbeeldingen aan de galerij toe, zet ze in volgorde en schrijft alt-teksten. Elke batch zie je in een voorbeeld voor het opslaan.
WordPress is een handelsmerk van de WordPress Foundation. WooCommerce is een handelsmerk van Automattic Inc. Claude is een handelsmerk van Anthropic PBC. ChatGPT en OpenAI zijn handelsmerken van OpenAI. TellMyShop is niet gelieerd aan deze bedrijven.