Home › Kennisbank › WooCommerce
Hoe voeg ik een categorieafbeelding toe aan een WooCommerce-categorie?
Direct antwoord
Ga in het WordPress-dashboard naar Producten > Categorieën, klik bij de categorie op Bewerken en klik bij Thumbnail op Upload/toevoegen afbeelding. Kies een afbeelding uit de mediabibliotheek of upload een nieuwe en klik onderaan op Updaten. Gebruik voor alle categorieën dezelfde beeldverhouding en stijl.
Wat heb je nodig?
- Een inlog voor het WordPress-dashboard van je webshop, met de rol Beheerder of Winkelmanager
- Per categorie een afbeelding die de categorie direct duidelijk maakt, allemaal in dezelfde verhouding, bijvoorbeeld vierkant
- Afbeeldingen die zijn verkleind en gecomprimeerd, liefst als WebP of JPG
Stappenplan9 stappen
Waar verschijnt een categorieafbeelding?
WooCommerce bewaart de afbeelding bij de categorie. Of en waar bezoekers hem zien, hangt af van je thema. De meeste thema’s tonen categorieafbeeldingen op de winkelpagina als die categorieën toont, in de lijst met subcategorieën op een categoriepagina en in blokken met categorieën op de homepage.
Bij een klassiek thema kies je in Weergave > Customizer, onder WooCommerce en Productcatalogus, of de winkelpagina producten, categorieën of beide toont. Bij een blokthema zet je een blok met productcategorieën in de template. Bij een paginabouwer zoals Elementor bepaalt de template welke afbeeldingen zichtbaar zijn.
Stappenplan 9 stappen
Stap 1: Maak de afbeeldingen klaar
Snijd elke afbeelding bij in dezelfde verhouding en verklein hem tot ongeveer 800 pixels breed. Comprimeer het bestand en geef het een duidelijke naam, bijvoorbeeld dames-sneakers.webp. Doe dit voor alle categorieën tegelijk, zodat de stijl overal gelijk is.
Stap 2: Open het categoriebeheer
Ga naar jouwdomein.nl/wp-admin en log in. Vervang jouwdomein.nl door je eigen domeinnaam. Klik in het menu links op Producten > Categorieën.
Stap 3: Open de categorie
Beweeg je muis in de lijst rechts over de categorie en klik op Bewerken. Maak je een nieuwe categorie, dan staat hetzelfde veld voor de afbeelding in het formulier links. Lees hoe je productcategorieën en subcategorieën aanmaakt.
Stap 4: Klik bij Thumbnail op Upload/toevoegen afbeelding
Scrol naar het veld Thumbnail, onderaan het formulier. In oudere handleidingen heet dit veld Categorieafbeelding. Klik op Upload/toevoegen afbeelding. De mediabibliotheek opent in een venster.
Stap 5: Upload of kies de afbeelding
Klik op het tabblad Bestanden uploaden en daarna op Bestanden selecteren om een afbeelding van je computer te kiezen. Je kunt het bestand ook in het venster slepen. Staat de afbeelding al in je website, klik dan op het tabblad Mediabibliotheek en klik op de afbeelding.
Stap 6: Vul de alternatieve tekst in
Vul rechts in het venster bij Alternatieve tekst in wat er op de afbeelding staat. Klik daarna rechtsonder op de knop om de afbeelding te gebruiken. De afbeelding staat nu klein bij het veld Thumbnail, met een knop om hem weer te verwijderen.
Stap 7: Sla de categorie op
Klik onderaan de pagina op Updaten. Bij een nieuwe categorie klik je op Nieuwe categorie toevoegen.
Stap 8: Herhaal dit voor de andere categorieën
Geef elke categorie die zichtbaar is in je webshop een afbeelding in dezelfde stijl. Een rij categorieën waarvan er één geen afbeelding heeft, ziet er onverzorgd uit.
Stap 9: Controleer de weergave in je webshop
Open de winkelpagina of een categoriepagina met subcategorieën in je webshop. Bekijk de afbeeldingen op een computer en op je telefoon. Zie je geen afbeelding, lees dan hieronder bij Werkt het niet? wat je kunt doen.
Controleer of het gelukt is
In de lijst op Producten > Categorieën staat links van de naam een kleine versie van de afbeelding. Open de winkelpagina of een pagina met categorieblokken in je webshop. De categorie toont de afbeelding, scherp en zonder dat de pagina verspringt tijdens het laden. Bekijk het ook op je telefoon.
Welke afbeelding kies ik?
Kies herkenbare, rustige beelden die de categorie in één blik duidelijk maken. Vermijd drukke of onduidelijke afbeeldingen. Een goede categorieafbeelding helpt klanten sneller de juiste categorie kiezen, vermindert keuzestress en verhoogt het aantal klikken op categoriepagina’s.
- Gebruik voor alle categorieën dezelfde beeldverhouding, bijvoorbeeld vierkant.
- Houd één vaste stijl aan: dezelfde achtergrond, belichting en compositie. Dat geeft een professionele, uniforme uitstraling en versterkt je merk.
- Controleer of de afbeelding ook klein nog duidelijk is. Op een telefoon staan categorieafbeeldingen vaak in twee kolommen.
Hoe houd ik de afbeeldingen snel en vindbaar?
- Vul bij elke afbeelding een Alternatieve tekst in die beschrijft wat erop staat, bijvoorbeeld
Witte leren damessneakers. Zoekmachines lezen die tekst en mensen met een schermlezer horen hem. - Verklein de afbeelding voordat je hem uploadt. Rond 800 pixels breed is voor een categorieafbeelding meestal genoeg.
- Comprimeer de afbeelding en gebruik WebP of JPG. Kleinere bestanden laden sneller.
- Gebruik overal dezelfde verhouding. Dan verspringt de pagina niet terwijl de afbeeldingen laden.
Lees hoe je afbeeldingen optimaliseert voor zoekmachines.
Werkt het niet?
De afbeelding verschijnt niet in de webshop
Je thema of template toont op die plek geen categorieafbeeldingen. Controleer bij een klassiek thema in Weergave > Customizer, onder WooCommerce en Productcatalogus, of de winkelpagina categorieën toont. Bij een paginabouwer moet de template een onderdeel met categorieën bevatten. Leeg daarna de cache van je website.
De afbeelding is wazig of afgesneden
De geüploade afbeelding is te klein, of WooCommerce snijdt hem bij in een andere verhouding. Upload een grotere afbeelding in dezelfde verhouding als de andere categorieën. Bij een klassiek thema stel je de breedte en het bijsnijden van thumbnails in via Weergave > Customizer, onder WooCommerce, bij de instellingen voor productafbeeldingen.
Je kunt de afbeelding niet uploaden
Controleer of het bestand een JPG, PNG of WebP is. Een HEIC-foto van een iPhone wordt niet door elke server geaccepteerd; zet hem dan eerst om naar JPG. Is het bestand groter dan de maximale uploadgrootte van je website, verklein het dan eerst. Lukt het uploaden ook met een klein bestand niet, dien dan een ticket in via de helpdesk van ViVortis.
De afbeelding verdwijnt na het opslaan
Controleer of je op Updaten hebt geklikt nadat de afbeelding bij Thumbnail stond. Via Snel bewerken in de lijst kun je geen afbeelding instellen; gebruik altijd Bewerken.
De pagina verspringt terwijl de afbeeldingen laden
Gebruik voor alle categorieafbeeldingen dezelfde verhouding en zorg dat ze in de thumbnail-instellingen op één vaste maat worden bijgesneden. Dan weet de browser vooraf hoeveel ruimte elke afbeelding inneemt.
Veelgestelde vragen
Welk formaat moet een categorieafbeelding hebben?
Er is geen vast formaat. Gebruik voor alle categorieën dezelfde verhouding en minstens 600 tot 800 pixels breed. Vierkant werkt in de meeste thema’s goed.
Kan ik dezelfde afbeelding voor meerdere categorieën gebruiken?
Technisch wel, maar klanten zien dan geen verschil tussen de categorieën. Geef elke categorie een eigen, herkenbare afbeelding.
Hoe vervang of verwijder ik een categorieafbeelding?
Klik bij de categorie op Bewerken. Klik bij Thumbnail op de knop om de afbeelding te verwijderen, kies zo nodig een nieuwe afbeelding en klik op Updaten.
Kan ik een brede bannerafbeelding bovenaan de categoriepagina zetten?
WooCommerce heeft per categorie één afbeelding, de thumbnail. Een aparte banner bovenaan de categoriepagina vraagt een thema dat dat ondersteunt, een paginabouwer of een extra plugin.
Telt de alternatieve tekst mee voor mijn vindbaarheid?
Ja. Zoekmachines gebruiken de alternatieve tekst om te begrijpen wat er op de afbeelding staat. De tekst is ook nodig voor bezoekers die een schermlezer gebruiken.
Hulp nodig?
Schakel de helpdesk van ViVortis in als:
- de afbeelding nergens in je webshop verschijnt terwijl je hem bij de categorie ziet staan
- je paginabouwer of thema de categorieafbeeldingen niet toont of verkeerd bijsnijdt
- het uploaden van afbeeldingen een foutmelding geeft
- je wilt dat ViVortis een vaste stijl voor alle categorieafbeeldingen maakt
Dien een ticket in via de helpdesk van ViVortis en voeg waar mogelijk een screenshot toe.
Lukt het niet?
Dien een ticket in met een screenshot van wat je ziet. De helpdesk reageert meestal binnen één werkdag.