WooCommerce-knop Add to Cart ontbreekt op productpagina’s

Controleer wat er ontbreekt

Open de betreffende productpagina in een privévenster van je browser, zonder ingelogd te zijn bij WP Admin. Deze handleiding gaat over afzonderlijke productpagina’s; knoppen in winkel- en categorieoverzichten kunnen anders werken.

Wat je ziet	Controleer eerst
Geen aankoopknop	Producttype, prijs, voorraadstatus en paginasjabloon
Knop is uitgeschakeld	Voorraadstatus, vereiste variaties en of een koopbare optie is geselecteerd
Knop is zichtbaar maar reageert niet	JavaScript-fouten en conflicten tussen plugins

Forceer een uitgeschakelde knop niet met CSS of JavaScript om hem actief te laten lijken voordat je hebt gecontroleerd of WooCommerce het product als koopbaar beschouwt.

Prijs, voorraad en producttype controleren

1. Ga in WP Admin naar Products → All Products en bewerk het betreffende product.
2. Controleer of de status Published is en bekijk daarna het type bovenaan Product data.
3. Open bij een Simple product het tabblad General en controleer of de normale prijs is ingevuld. Voor een gratis product kun je 0 gebruiken; een leeg prijsveld is iets anders.
4. Open Inventory en controleer of het product op voorraad is of dat nabestellingen expliciet zijn toegestaan. Schakel nabestellingen niet alleen in om de knop te laten verschijnen.
5. Klik op Update en test de gepubliceerde productpagina opnieuw terwijl je bent uitgelogd.

External/Affiliate-producten kunnen naar een andere verkoper verwijzen in plaats van de gewone Add to Cart-knop te gebruiken. Grouped-producten hebben ook andere aankoopopties. Een extensie voor catalogusmodus of offerteaanvragen kan aankoopknoppen bewust verbergen. De instellingen van de producteditor van WooCommerce leggen de standaardproducttypen en aankoopvelden uit.

Opties van variabele producten controleren

Bij een Variable product moeten klanten alle vereiste kenmerken kiezen voordat ze een variatie aan de winkelwagen kunnen toevoegen. Als de knop uitgeschakeld blijft of er geen geldige optie beschikbaar is:

1. Bewerk het product en open Product data → Attributes. Controleer of de bedoelde opties zijn geselecteerd en of Used for variations is aangevinkt bij elk kenmerk dat nodig is om variaties te maken.
2. Open Variations en controleer of de benodigde combinaties bestaan, actief zijn, een prijs hebben en op voorraad zijn of nabestellingen toestaan.
3. Sla de wijzigingen op, selecteer een geldige combinatie op de productpagina en test de knop opnieuw.

Een uitgeschakelde knop voordat een geldige optie is gekozen, hoeft geen themafout te zijn. Blijft de knop uitgeschakeld nadat je een beschikbare variatie met prijs hebt gekozen, onderzoek dan de scripts en aanpassingen van het product. Zie de WooCommerce-documentatie over variabele producten.

Productsjablonen en themawijzigingen controleren

Als bij een koopbaar product de knop ontbreekt, onderzoek dan hoe het thema de productpagina weergeeft. Klassieke WooCommerce-indelingen gebruiken PHP-sjabloonbestanden en hooks: benoemde punten waar thema’s of plugins pagina-inhoud kunnen toevoegen of verwijderen. Een thema, pagebuilder of extensie kan het aankoopformulier verwijderen; aangepaste CSS kan het verbergen. Als WooCommerce → Status → System status → Templates verouderde overrides meldt, volg dan onze handleiding voor verouderde WooCommerce-sjablonen in plaats van zomaar bestanden te verwijderen.

Blokthema’s gebruiken een Single Product-sjabloon dat een Add to Cart + Options (Beta)-blok kan bevatten. Controleer in de Site Editor of het toegewezen productsjabloon de juiste aankoopbediening bevat. PHP-overrides bewerken is niet hetzelfde als een bloksjabloon bewerken.

HoverCraft gebruikt een klassieke WooCommerce-productindeling en geeft de bediening voor aantallen, variaties en Add to Cart vorm. De documentatie over WooCommerce-productpagina’s legt uit waarom de knop uitgeschakeld kan zijn als een selectie onvolledig of niet beschikbaar is. WooCommerce bepaalt nog steeds of het product gekocht kan worden.

Scripts testen en conflicten isoleren

Heb je onlangs iets gewijzigd aan het product of thema, wis dan de relevante browser-, pagina-, CDN- en CSS/JavaScript-optimalisatiecaches en laad opnieuw. Zijn de knoppen zichtbaar maar reageren ze niet, open dan de ontwikkelaarstools van je browser, kies Console en herhaal de mislukte actie. Let op fouten met variatiescripts, ontbrekende bestanden of plugins. De WooCommerce-handleiding voor JavaScript-problemen licht deze controles toe.

Maak bij een mogelijk thema- of pluginconflict eerst een back-up en test in een testomgeving. Wissel niet tijdens lopende verkopen op je livesite van thema en schakel geen extensies uit die voor het afrekenen nodig zijn. Volg de officiële procedure voor conflicttests van WooCommerce:

1. Test hetzelfde product met een standaard WordPress-thema of Storefront. Als de aankoopopties terugkomen, onderzoek dan het oorspronkelijke thema en de aanpassingen ervan.
2. Als het probleem blijft bestaan, deactiveer dan tijdelijk niet-gerelateerde plugins in de testomgeving. Laat WooCommerce en extensies die nodig zijn om het probleem te reproduceren actief. Zet plugins één voor één terug om het conflict te vinden.
3. Herhaal de test op desktop en mobiel in een privévenster. Controleer of het product daadwerkelijk in de winkelwagen komt en of het aantal klopt.