WooCommerce-knappen Lägg till i varukorgen fungerar inte: Hur åtgärdar jag det?

WooCommerce-knappen Lägg till i varukorgen är det viktigaste enskilda elementet på en produktsida. När den slutar fungera kan din butik inte behandla beställningar. Varje besökare som landar på en trasig produktsida är en förlorad försäljning.

En rapport från Baymard Institute fann att 17 % av alla online-shoppare avbryter sina köp på grund av fel på webbplatsen. En trasig eller saknad Lägg till i varukorg-knapp faller helt inom den kategorin och påverkar 100 % av besökarna på din produktsida, inte bara en bråkdel.

Åtgärden beror på den specifika typen av fel. En knapp som inte syns alls har andra orsaker än en som visas men inte gör någonting när man klickar på den, eller en som lägger till i varukorgen men sidan inte uppdateras. Att diagnostisera vilket fel du har avgör vilken åtgärd som ska tillämpas först.

Den här guiden täcker alla orsaker och lösningar, sorterade efter vilka problem som ska uteslutas först.

Diagnostisera din feltyp först

Alla problem med knappen Lägg till i varukorgen är inte likadana. Åtgärden beror på vilken typ av fel du upplever.

Feltyp	Vad du ser	Mest troliga orsaken
Knappen visas inte	Produktsidan laddas, men ingen knapp visas	Saknad produktdata, inställningar för slut i lager och temaproblem
Knappen är inte klickbar	Knappen visas, men ingenting händer när man klickar	JavaScript-fel, temakonflikt, skript som blockerar plugin
Knappen läggs till, men sidan uppdateras inte	Spinnern visas, stannar sedan, varukorgsantalet oförändrat	AJAX blockeras av cachning eller ett säkerhetsplugin
Knappen omdirigerar felaktigt	Klicket tar kunden till fel sida	Felaktig konfiguration av permalänk, varukorgssida inte tilldelad
Knappen fungerar på vissa produkter, inte andra	Problemet är produktspecifikt	Ofullständig produktdata, felkonfiguration av variabel produkt

Identifiera din feltyp med hjälp av den här tabellen och börja sedan med den åtgärd som troligtvis är tillämplig på din specifika situation.

Tre typer av WooCommerce-fel med knappen Lägg till i varukorgen

Att tillämpa fel åtgärd slösar bort tid och kan orsaka nya problem. Identifiera vilken feltyp som matchar det du ser innan du går vidare till åtgärderna nedan.

Knappen visas inte alls

När knappen Lägg till i varukorgen saknas helt på en produktsida, döljer WooCommerce den antingen av sig själv eller så renderar inte temat den.

WooCommerce döljer knappen Lägg till i varukorgen automatiskt i dessa scenarier:

• Produkten har inget pris satt

• Produkten är markerad som slut i lager och butiksinställningen för att dölja slutsålda produkter är aktiverad

• En variabel produkt har inga konfigurerade varianter, eller alla varianter är slut i lager

• En extern/ansluten produkt har ingen extern URL konfigurerad

Kontrollera dessa inställningar på produktnivå innan du antar att det finns ett tekniskt problem. Gå till din produkts redigeringssida i WooCommerce och verifiera att produktdatapanelen visar ett angivet pris, att lagerstatusen är I lager, eller att inställningen för slut i lager är konfigurerad som du avser, och att för variabla produkter, att minst en variant finns och finns i lager.

Knappen visas men är inte klickbar

När knappen visas men inte svarar på klick, hindrar ett JavaScript-fel klickhanteraren från att aktiveras. Knappen renderas i HTML, men dess funktionalitet är trasig på grund av en skriptkonflikt eller ett fel.

Öppna webbläsarens utvecklarkonsol (F12 i Chrome, sedan fliken Konsol) och ladda om produktsidan. Klicka på knappen Lägg till i varukorgen och leta efter röda felmeddelanden i konsolen. Vanliga JavaScript-fel som anger den specifika orsaken:

• jQuery är inte definierad: jQuery laddas inte eller laddas i fel ordning. Orsakas ofta av att optimerings-plugins skjuter upp jQuery.

• Kan inte läsa egenskapen för odefinierad: En WooCommerce JavaScript-funktion körs innan dess beroende är klart. Orsakas vanligtvis av en plugin-konflikt.

• AJAX URL inte definierad / wc_add_to_cart_params är inte definierad: WooCommerces varukorgsparametrar matas inte ut till sidan. Vanligtvis orsakat av ett cachningsprogram som levererar en cachad version av sidan utan WooCommerces JavaScript.

Notera det specifika felet innan du fortsätter. Det visar exakt vilken korrigering som ska tillämpas.

Knappklick, men varukorgen uppdateras inte

När knappen verkar fungera (klicket registreras och en snurrare kan visas) men varukorgsantalet inte uppdateras och produkten inte läggs till, misslyckas AJAX-begäran. WooCommerce använder AJAX för att lägga till produkter i varukorgen utan att sidan behöver laddas om. När AJAX är blockerat eller misslyckas verkar klicket inte ha någon effekt.

Detta orsakas oftast av cachning av plugins som levererar cachade svar på AJAX-förfrågningar, säkerhetsplugins som blockerar AJAX-anrop som de klassificerar som misstänkta, eller felaktig AJAX URL-konfiguration i WooCommerce-inställningarna.

 

Åtgärd 1: Uppdatera WooCommerce, WordPress och alla plugins

Föråldrad programvara är det enklaste problemet att utesluta och det som oftast förbises. Börja här innan du åtgärdar något annat, särskilt om knappen gick sönder efter en nyligen genomförd uppdatering.

Varför föråldrad programvara inte fungerar med knappen Lägg till i varukorgen

WooCommerce, WordPress, teman och plugins uppdateras ofta. När en komponent uppdateras och andra inte håller jämna steg uppstår kompatibilitetsbrister. Knappen Lägg till i varukorgen är beroende av en kedja av komponenter som arbetar tillsammans: WordPress-kärnan, WooCommerce, det aktiva temat och alla plugins som modifierar produktens eller varukorgens beteende. En versionsmatchning någon gång i kedjan bryter kedjan.

Detta är den vanligaste orsaken till att knappen Lägg till i varukorgen inte fungerar direkt efter en uppdatering. Om din knapp fungerade och sedan gick sönder efter en nyligen genomförd uppdatering är det nästan säkert ett kompatibilitetsproblem som är orsaken.

Hur man uppdaterar allt säkert

Innan du uppdaterar, gör en säkerhetskopia. Gå till Instrumentpanel > Uppdateringar i din WordPress-administratör. Uppdatera WordPress-kärnan först. Uppdatera sedan alla plugins. Uppdatera sedan ditt tema.

Specifikt för WooCommerce introducerar större versionsuppdateringar (4.x till 5.x, 5.x till 6.x) ibland ändringar som inte fungerar. Testa alltid större WooCommerce-uppdateringar i en produktionsmiljö innan du tillämpar dem i produktion.

Rensa webbplatsens cache om du har ett cache-plugin. Testa sedan knappen Lägg till i varukorgen på en produktsida innan du deklarerar att problemet är löst.

Vad man ska göra om knappen går sönder efter en uppdatering

Om knappen gick sönder direkt efter en specifik uppdatering är den uppdateringen den troligaste orsaken. Återställ till den föregående versionen med hjälp av WP Rollback-pluginet eller återställ din säkerhetskopia från före uppdateringen. Kontrollera sedan pluginets ändringslogg och supportforum för rapporter om samma problem innan du uppdaterar igen.

Åtgärd 2: Lös plugin- och temakonflikter

Konflikter mellan plugin och tema är den vanligaste orsaken till att knappen Lägg till i varukorgen inte fungerar. Gå igenom dessa steg i ordning och testa efter varje steg innan du går vidare till nästa lösning.

Hur man identifierar en plugin-konflikt

Plugin-konflikter är den vanligaste orsaken till en trasig Lägg till i varukorg-knapp. Det snabbaste sättet att identifiera en plugin-konflikt är att inaktivera alla plugins utom WooCommerce och testa knappen.

Gå till Plugins > Installerade plugins. Markera alla plugins utom WooCommerce. Välj Inaktivera från rullgardinsmenyn för massåtgärder. Verkställ.

Testa knappen Lägg till i varukorgen. Om den nu fungerar var ett inaktiverat plugin orsaken. Återaktivera plugin ett i taget och testa knappen efter varje återaktivering. När knappen inte fungerar igen är det det senast återaktiverade pluginet som orsakar konflikten.

Om du inte kan inaktivera alla plugins i en livebutik, använd en staging-miljö för att replikera det här testet.

Vanliga plugins som står i konflikt med knappen Lägg till i varukorgen

Vissa plugin-kategorier är ansvariga för majoriteten av konflikter med knappen Lägg till i varukorgen:

Cachning av plugins: WP Rocket, W3 Total Cache, WP Super Cache. Dessa plugins kan cacha WooCommerce JavaScript på sätt som bryter mot AJAX-funktionalitet. Åtgärd: Exkludera WooCommerce-sidor från cachning. I WP Rocket exkluderas WooCommerce-sidor (varukorg, kassa, mitt konto) automatiskt, men verifiera detta i WP Rocket > Inställningar > Cache > Cachea aldrig dessa URL:er.

Optimerings-plugins: Autoptimize, Perfmatters, Asset CleanUp. Dessa plugins minimerar och kombinerar JavaScript-filer. Felaktig kombination av WooCommerce-skript med andra skript orsakar jQuery-beroendefel. Åtgärd: I Autoptimize, gå till Inställningar > JavaScript-alternativ och aktivera Tvinga JavaScript till Head? Markera Exclude Scripts from Autoptimize och lägg till woocommerce.js och add-tocart.js i undantagslistan.

Säkerhets-plugins: Wordfence, Sucuri, iThemes Security. Vissa säkerhetskonfigurationer blockerar WooCommerces AJAX-förfrågningar och klassificerar dem som skadliga. Åtgärd: I Wordfence, gå till Brandvägg > Brandväggsalternativ och vitlista WooCommerce AJAX-slutpunkten (wp-admin/admin-ajax.php).

Sidbyggare: Elementor, Divi, WPBakery. Vissa sidbyggare åsidosätter WooCommerce-mallar eller injicerar motstridiga skript på produktsidor. Åtgärd: Testa genom att tillfälligt byta till WooCommerce-produktmallen som standard.

Hur man identifierar en temakonflikt

Efter att ha uteslutit plugin-konflikter, byt till Storefront-temat (WooCommerces officiella standardtema) och testa knappen. Storefront är designat specifikt för WooCommerce och har inga kompatibilitetsproblem.

Gå till Utseende > Teman > Lägg till nytt och sök sedan efter Butik. Installera och aktivera det. Ändra inga andra inställningar. Testa knappen Lägg till i varukorgen.

Om knappen fungerar med Storefront är problemet ditt aktiva tema. Kontakta din temautvecklare med en rapport. Om det inte fungerar med Storefront är orsaken inte temarelaterad.

Åtgärd 3: Åtgärda JavaScript- och AJAX-fel

JavaScript- och AJAX-fel gör att knappen ser trasig ut även när allt annat är korrekt konfigurerat. Kontrollera webbläsarkonsolen först för att se vilket skript som felar innan du gör några ändringar.

Så här kontrollerar du JavaScript-fel i din webbläsare

Öppna din webbplats i Chrome eller Firefox. Tryck på F12 för att öppna Utvecklarverktyg. Klicka på fliken Konsol. Navigera till en produktsida där knappen Lägg till i varukorgen är trasig.

Leta efter röda felmeddelanden. Dessa är de specifika JavaScript-fel som orsakar knappens fel. Kopiera hela felmeddelandet. Sök efter det i WooCommerce-supportforumen och pluginets eget supportforum. De flesta vanliga felen har dokumenterade lösningar.

Medan konsolen är öppen, kontrollera även fliken Nätverk. Klicka på knappen Lägg till i varukorgen och håll utkik efter förfrågningar. En misslyckad AJAX-förfrågan visas i rött med en statuskod. Statusen 403 indikerar att ett säkerhetsplugin blockerar förfrågan. Statusen 500 indikerar ett serverfel i AJAX-hanteraren.

Åtgärda AJAX-inställningar för Lägg till i varukorgen i WooCommerce

Gå till WooCommerce > Inställningar > Produkter. Leta efter avsnittet "Lägg till i varukorgen". Kontrollera att "Aktivera AJAX-knappar för lägg till i varukorgen i arkiv" är markerat. Den här inställningen styr om AJAX-varukorgsfunktionen är aktiv på butiks- och kategorisidor.

Kontrollera också att dina varukorgs- och kassasidor är korrekt tilldelade. Gå till WooCommerce > Inställningar > Avancerat > Sidinställningar. Bekräfta att varukorgs- och kassasidorna är inställda på rätt sidor på din webbplats. Om någon av dem är tom eller inställd på fel sida kommer klick på varukorgsknapparna att misslyckas tyst.

Åtgärda optimerings-plugins som förstör WooCommerce-skript

Om ett optimerings-plugin minimerar eller kombinerar JavaScript och orsakar att WooCommerce inte fungerar, lägg till följande skript i pluginets undantagslista:

Skript att exkludera från minifiering:

• woocommerce/assets/js/frontend/woocommerce.min.js

• woocommerce/assets/js/frontend/add-to-cart.min.js

• woocommerce/assets/js/frontend/add-to-cart-variation.min.js

• jquery.js eller jquery.min.js

Exkludera även WooCommerce-sidor från JavaScript-optimering: cart (/cart/), checkout (/checkout/), my account (/my-account/) och all product pages (/product/).

I WP Rocket: Gå till Filoptimering > JavaScript-filer. Lägg till undantagen ovan i fältet Undantagna JavaScript-filer.

I Autoptimize: Gå till JavaScript-alternativ > Exkludera skript från Autoptimize och lägg till WooCommerce-skriptsökvägarna.

Åtgärd 4: Kontrollera och fyll i din produktinformation

WooCommerce inaktiverar tyst knappen Lägg till i varukorgen när nödvändig produktdata saknas. Om knappen saknas på specifika produkter men fungerar på andra, börja här.

Obligatoriska fält som utlöser den saknade knappen

WooCommerce kräver specifik produktdata för att visa knappen Lägg till i varukorgen. Om några obligatoriska fält saknas inaktiverar WooCommerce knappen tyst utan ett felmeddelande.

Kontrollera varje produkt där knappen saknas:

• Pris: Varje produkt måste ha ett ordinarie pris angivet. En produkt utan pris visar inte knappen Lägg till i varukorgen. Gå till Produkt > Produktdata > Allmänt och kontrollera att fältet Ordinarie pris innehåller ett värde.

• Produktnamn: Produkten måste ha en titel. Denna saknas sällan men är värd att bekräfta på nyskapade utkast.

• Synlighet: Se till att produktens katalogsynlighet är inställd på Butik och sökresultat, eller Butik. Produkter som är inställda på Dold visar inte knappen på arkivsidor.

• Produktstatus: Bekräfta att produkten är Publicerad, inte Utkast eller Väntar på granskning.

Variabel produktkonfiguration för Lägg till i varukorgen

Variabla produkter beter sig annorlunda än enkla produkter. På butiks-/arkivsidor visar variabla produkter en knapp för att välja alternativ istället för en knapp för att lägga till i varukorgen. På den enskilda produktsidan visas Lägg till i varukorgen först efter att en kund har valt alla obligatoriska attribut.

Om knappen Lägg till i varukorgen saknas helt på en variabel produktsida (inte bara visar Välj alternativ på butikssidan), kontrollera:

• Minst en produktvariant finns (Produktdata > Varianter > Lägg till variant)

• Minst en variant är markerad som I lager med tillgängligt lager

• Alla attribut som används i varianter definieras under Produktdata > Attribut innan varianter skapas

• Variationsfliken visar inga konfigurationsfel

En variabel produkt utan skapade varianter, eller med alla varianter slut i lager, kommer inte att visa knappen Lägg till i varukorgen.

Lagerstatus och inställningar för slut i lager

Gå till WooCommerce > Inställningar > Produkter > Lager. Kontrollera om Dölj slutsålda varor från katalogen är aktiverat. Om det är det kommer produkter som markerats som slutsålda inte att visas på butikssidorna och knappen Lägg till i varukorgen kommer inte att visas.

Kontrollera även den enskilda produktens lagerstatus: Produkt > Produktdata > Lager > Lagerstatus. Bekräfta att den är inställd på I lager. En produkt som manuellt är inställd på Slut i lager kommer inte att visa knappen Lägg till i varukorgen oavsett inställningen på katalognivå.

Åtgärd 5: Kontrollera WooCommerce-sidor och permalänkinställningar

En felkonfigurerad varukorgssida eller en inaktuell permalänkstruktur orsakar tysta fel som ingen mängd plugin-felsökning kommer att åtgärda. Dessa tre kontroller tar mindre än 5 minuter och löser fler problem än de flesta butiksägare förväntar sig.

Verifiera tilldelning av varukorg och kassasidan

WooCommerce kräver att specifika sidor finns och är korrekt tilldelade för att varukorgsfunktionen ska fungera. Om varukorgssidan eller kassasidan tas bort, avpubliceras eller tilldelas om till fel sida, misslyckas antingen klick på knappen Lägg till i varukorgen tyst eller omdirigeras till fel sida.

Gå till WooCommerce > Inställningar > Avancerat > Sidinställningar. Verifiera:

• Varukorg: tilldelad en publicerad sida som innehåller kortkoden [woocommerce_cart] eller WooCommerce Cart-blocket

• Kassa: tilldelad en publicerad sida som innehåller kortkoden [woocommerce_checkout] eller WooCommerce Checkout-blocket

• Mitt konto: tilldelad en publicerad sida som innehåller blocket eller kortkoden Mitt konto

Om några saknas eller är felaktigt tilldelade, tilldela dem på nytt. Om själva sidorna saknas, skapa nya sidor med korrekta kortkoder och tilldela dem här.

Rensa din permalänkstruktur

WordPress använder permalänkregler för att dirigera förfrågningar korrekt. Om dessa regler blir skadade kan WooCommerce AJAX-förfrågningar misslyckas även om alla andra inställningar är korrekta. Att tömma permalänkstrukturen återskapar dessa regler.

Gå till Inställningar > Permalänkar i din WordPress-instrumentpanel. Ändra inga inställningar. Klicka på Spara ändringar. Detta återskapar .htaccess-filen med nya permalänksregler och löser routingproblem som orsakar fel på tysta varukorgsknappar.

Detta tar under 10 sekunder och påverkar inte ditt innehåll. Det är värt att göra det tidigt i felsökningsprocessen eftersom det inte kostar något och åtgärdar ett betydande antal fel i varukorgen.

Kontrollera WooCommerce-statussidan för fel

Gå till WooCommerce > Status. Den här sidan visar en omfattande översikt över din WooCommerce-installation. Rödmarkerade rader indikerar konfigurationsfel.

Vanliga fel som visas på statussidan och som påverkar knappen Lägg till i varukorgen:

• Databasen är föråldrad: WooCommerce-databastabellerna behöver uppdateras. Klicka på knappen Uppdatera databas.

• WooCommerce.js: filen saknas eller är oåtkomlig. Detta förhindrar direkt att knappen Lägg till i varukorgen fungerar.

• Mallöverskrivningar: ditt tema har åsidosatta WooCommerce-mallfiler. Om överskrivningarna kommer från en gammal WooCommerce-version kan de sakna ny funktionalitet. Uppdatera ditt tema eller ta bort de föråldrade överskrivningarna.

Åtgärd 6: Rensa din cache

Ett cache-plugin som visar en inaktuell version av din produktsida kan göra att knappen Lägg till i varukorgen inte svarar även efter att du har tillämpat alla andra korrigeringar. Rensa alltid cachen både som ett tidigt felsökningssteg och som ett sista steg efter att du har gjort ändringar.

Rensa cachen i WP Rocket: Klicka på WP Rocket-ikonen i administratörsfältet > Rensa cachen.

Rensa cachen i W3 Total Cache: Prestanda > Rensa alla cacher.

Rensa WP Super Cache-cachen: Inställningar > WP Super Cache > Ta bort cache.

Rensa cachen i LiteSpeed-cachen: LiteSpeed-cachen > Rensa alla.

Rensa Cloudflares cache: Cloudflare Dashboard > Cachning > Konfiguration > Rensa allt.

Rensa webbläsarens cache: Ctrl+Shift+Delete i Chrome eller Firefox. Rensa cachade bilder och filer. Ladda om produktsidan i ett privat/inkognitofönster för att verifiera åtgärden, vilket garanterar att ingen webbläsarcache är inblandad.

När du har rensat alla cacheminnor, testa knappen Lägg till i varukorgen på den berörda produktsidan. Testa i ett inkognitofönster för att utesluta webbläsarcachen.

Felsökningschecklista: Rätt ordning

Gå igenom dessa i ordning. Stanna när knappen fungerar.

• Ta en fullständig säkerhetskopia av webbplatsen och databasen

• Identifiera din feltyp (visas inte / inte klickbar / klickande men uppdateras inte)

• Kontrollera webbläsarkonsolen för JavaScript-fel och notera eventuella specifika fel

• Gå till Inställningar > Permalänkar och klicka på Spara ändringar (ingen ändring av inställningar behövs)

• Kontrollera WooCommerce > Status för röda fel och åtgärda dem

• Kontrollera produktdata: pris satt, lagerstatus I lager, konfigurerade varianter

• Uppdatera WordPress, WooCommerce, alla plugins och ditt tema

• Rensa alla cacher: cache-plugin + Cloudflare + webbläsare

• Inaktivera alla plugins utom WooCommerce och testa

• Om knappen fungerar med inaktiverade plugins, återaktivera dem en efter en för att identifiera konflikten

• Växla till Storefront-temat och testa

• Om knappen fungerar med Storefront är det det aktiva temat som är orsaken

• Kontrollera WooCommerce > Inställningar > Avancerat > Sidinställningar för tilldelning av varukorgs- och kassasidor

• Lägg till WooCommerce-skript i din optimeringsplugins undantagslista

Slutliga tankar om att fixa WooCommerce-knappen Lägg till i varukorgen

De flesta fel på WooCommerce-knappen Lägg till i varukorgen orsakas av plugin-konflikter, cachningsproblem eller ofullständig produktdata. Alla tre har tydliga diagnostiska sökvägar och specifika korrigeringar som inte kräver anpassad utveckling.

Börja med diagnostiktabellen för att identifiera din feltyp. Kontrollera statussidan och rensa permalänkar först – dessa kostar ingenting och åtgärdar ett betydande antal fall. Uppdatera allt innan du gör några andra ändringar. Arbeta sedan igenom plugin- och temakonfliktprocessen.

Om du har tillämpat alla lösningar på den här listan och knappen fortfarande inte fungerar, är problemet troligtvis en konflikt med anpassad kod eller ett konfigurationsproblem på servernivå. Vid den tidpunkten bör en WordPress-utvecklare med WooCommerce-erfarenhet granska webbläsarkonsolfelen, serverfelloggen och WooCommerce-felsökningsloggen tillsammans.

Seahawks WooCommerce-utvecklingsteam löser problem med knappen Lägg till i varukorgen som en del av sin akuta support och löpande underhållstjänst.

Vanliga frågor om WooCommerce Lägg till i varukorg-knappen fungerar inte