WooCommerce Tilføj til kurv-knappen virker ikke: Hvordan fikser man det?

WooCommerce-knappen "Læg ​​i kurv" er det vigtigste element på enhver produktside. Når den holder op med at virke, kan din butik ikke behandle ordrer. Enhver besøgende, der lander på en defekt produktside, er et tabt salg.

En rapport fra Baymard Institute viste, at 17% af onlineshoppere afbryder deres køb på grund af fejl på hjemmesiden. En defekt eller manglende "Læg ​​i kurv"-knap falder helt ind under den kategori og påvirker 100% af de besøgende på din produktside, ikke kun en brøkdel.

Løsningen afhænger af den specifikke type fejl. En knap, der slet ikke er synlig, har andre årsager end en, der vises, men ikke gør noget, når man klikker på den, eller en, der tilføjer varer til indkøbskurven, men siden ikke opdateres. Diagnosticering af, hvilken fejl du har, afgør, hvilken løsning der skal anvendes først.

Denne vejledning dækker alle årsager og løsninger, sorteret efter hvilke problemer der skal udelukkes først.

Diagnosticér din fejltype først

Ikke alle problemer med knappen "Læg ​​i kurv" er ens. Løsningen afhænger af, hvilken type fejl du oplever.

Fejltype	Hvad du ser	Mest sandsynlige årsag
Knappen vises ikke	Produktsiden indlæses, men der vises ingen knap	Manglende produktdata, indstillinger for udsolgt og temaproblem
Knappen kan ikke klikkes på	Knappen vises, men der sker intet ved klik	JavaScript-fejl, temakonflikt, plugin-blokerende scripts
Knappen tilføjes, men siden opdateres ikke	Spinneren vises, stopper derefter, kurvantallet uændret	AJAX er blokeret af caching eller et sikkerhedsplugin
Knappen omdirigerer forkert	Klik fører kunden til den forkerte side	Fejlkonfiguration af permanent link, indkøbskurvsside ikke tildelt
Knappen virker på nogle produkter, ikke andre	Problemet er produktspecifikt	Ufuldstændige produktdata, variabel produktfejlkonfiguration

Identificér din fejltype ved hjælp af denne tabel, og start derefter med den løsning, der mest sandsynligt gælder for din specifikke situation.

Tre typer af WooCommerce Tilføj til kurv-knapfejl

At anvende den forkerte løsning spilder tid og kan medføre nye problemer. Identificér hvilken fejltype der matcher det, du ser, før du går videre til nedenstående løsninger.

Knappen vises slet ikke

Når knappen "Læg ​​i kurv" er helt fraværende på en produktside, skjuler WooCommerce den enten med sit design, eller også gengiver temaet den ikke.

WooCommerce skjuler automatisk knappen "Læg ​​i kurv" i disse scenarier:

• Produktet har ingen fastsat pris

• Produktet er markeret som udsolgt, og butiksindstillingen til at skjule udsolgte produkter er aktiveret

• Et variabelt produkt har ingen konfigurerede variationer, eller alle variationer er udsolgt

• Et eksternt/affilieret produkt har ingen konfigureret ekstern URL

Tjek disse indstillinger på produktniveau, før du antager, at der er et teknisk problem. Gå til dit produkts redigeringsside i WooCommerce, og bekræft, at produktdatapanelet viser en indtastet pris, at lagerstatus er På lager, eller at indstillingen "ikke på lager" er konfigureret som tiltænkt, og at der for variable produkter findes mindst én variant, som er på lager.

Knappen vises, men kan ikke klikkes på

Når knappen vises, men ikke reagerer på klik, forhindrer en JavaScript-fejl klikhåndteringen i at blive aktiveret. Knappen gengives i HTML, men dens funktionalitet er defekt på grund af en scriptkonflikt eller fejl.

Åbn din browsers udviklerkonsol (F12 i Chrome, derefter fanen Konsol) og genindlæs produktsiden. Klik på knappen Tilføj til kurv, og se efter røde fejlmeddelelser i konsollen. Almindelige JavaScript-fejl, der angiver den specifikke årsag:

• jQuery er ikke defineret: jQuery indlæses ikke eller indlæses i forkert rækkefølge. Dette skyldes ofte optimerings-plugins, der udsætter jQuery.

• Kan ikke læse egenskaben for udefineret: En WooCommerce JavaScript-funktion kører, før dens afhængighed er klar. Normalt forårsaget af en plugin-konflikt.

• AJAX URL ikke defineret / wc_add_to_cart_params er ikke defineret: WooCommerces indkøbskurvsparametre vises ikke på siden. Dette skyldes normalt et caching-plugin, der viser en cachelagret version af siden uden WooCommerces JavaScript.

Bemærk den specifikke fejl, før du fortsætter. Den fortæller dig præcis, hvilken rettelse du skal anvende.

Knappen klikker, men kurven opdateres ikke

Når knappen ser ud til at virke (klikket registreres, og der kan vises en spinner), men kurvtælleren ikke opdateres, og produktet ikke tilføjes, mislykkes AJAX-anmodningen. WooCommerce bruger AJAX til at tilføje produkter til kurven uden at genindlæse siden. Når AJAX er blokeret eller mislykkes, ser klikket ud til ikke at have nogen effekt.

Dette skyldes oftest cachelagring af plugins, der leverer cachelagrede svar på AJAX-anmodninger, sikkerhedsplugins, der blokerer AJAX-kald, som de klassificerer som mistænkelige, eller forkert AJAX URL-konfiguration i WooCommerce-indstillingerne.

 

Løsning 1: Opdater WooCommerce, WordPress og alle plugins

Forældet software er det nemmeste problem at udelukke og det, der oftest overses. Start her, før du foretager andre reparationer, især hvis knappen gik i stykker efter en nylig opdatering.

Hvorfor forældet software ikke fungerer med knappen "Læg ​​i kurv"

WooCommerce, WordPress, temaer og plugins opdateres ofte. Når én komponent opdateres, og andre ikke holder trit, opstår der kompatibilitetshuller. Knappen "Læg ​​i kurv" er afhængig af en kæde af komponenter, der arbejder sammen: WordPress-kernen, WooCommerce, det aktive tema og eventuelle plugins, der ændrer produktets eller kurvens adfærd. En versionsfejl på et hvilket som helst punkt i kæden bryder kæden.

Dette er den mest almindelige årsag til, at knappen "Læg ​​i kurv" ikke fungerer umiddelbart efter en opdatering. Hvis din knap virkede og derefter gik i stykker efter en nylig opdatering, er det næsten helt sikkert et kompatibilitetsproblem, der er årsagen.

Sådan opdaterer du alt sikkert

Før du opdaterer, skal du tage en sikkerhedskopi. Gå til Dashboard > Opdateringer i din WordPress-administrator. Opdater først WordPress-kernen. Opdater derefter alle plugins. Opdater derefter dit tema.

Specifikt for WooCommerce introducerer større versionsopdateringer (4.x til 5.x, 5.x til 6.x) nogle gange ændringer, der ikke fungerer korrekt. Test altid større WooCommerce-opdateringer i et testmiljø , før du anvender dem i produktion.

Efter opdateringen skal du rydde din hjemmesides cache, hvis du har et cache-plugin. Test derefter knappen "Læg ​​i kurv" på en produktside, før du erklærer problemet som løst.

Hvad skal man gøre, hvis knappen går i stykker efter en opdatering

Hvis knappen gik i stykker umiddelbart efter en specifik opdatering, er den opdatering den mest sandsynlige årsag. Rul tilbage til den forrige version ved hjælp af WP Rollback-pluginnet , eller gendan din backup fra før opdateringen. Tjek derefter pluginnets ændringslog og supportforum for rapporter om det samme problem, før du opdaterer igen.

Løsning 2: Løs plugin- og temakonflikter

Plugin- og temakonflikter er den mest almindelige årsag til en defekt "Læg ​​i kurv"-knap. Gennemgå disse trin i rækkefølge, og test efter hvert trin, før du går videre til den næste løsning.

Sådan identificerer du en plugin-konflikt

Plugin-konflikter er den mest almindelige årsag til en defekt Tilføj til kurv-knap. Den hurtigste måde at identificere en plugin-konflikt på er at deaktivere alle plugins undtagen WooCommerce og teste knappen.

Gå til Plugins > Installerede plugins. Vælg alle plugins undtagen WooCommerce. Vælg Deaktiver i rullemenuen med massehandlinger. Anvend.

Test knappen "Læg ​​i kurv". Hvis den nu virker, var det et deaktiveret plugin, der var årsagen. Genaktiver plugins et ad gangen, og test knappen efter hver genaktivering. Når knappen ikke virker igen, er det det senest genaktiverede plugin, der forårsager konflikten.

Hvis du ikke kan deaktivere alle plugins i en livebutik, skal du bruge et staging-miljø til at replikere denne test.

Almindelige plugins, der er i konflikt med knappen "Læg ​​i kurv"

Visse plugin-kategorier er ansvarlige for størstedelen af ​​konflikter med knappen "Læg ​​i kurv":

Cache-plugins: WP Rocket, W3 Total Cache, WP Super Cache. Disse plugins kan cache WooCommerce JavaScript på måder, der forstyrrer AJAX-funktionaliteten. Rettelse: Udeluk WooCommerce-sider fra cache. I WP Rocket udelukkes WooCommerce-sider (indkøbskurv, betaling, min konto) automatisk, men bekræft dette i WP Rocket > Indstillinger > Cache > Cache aldrig disse URL'er.

Optimeringsplugins: Autoptimize, Perfmatters, Asset CleanUp. Disse plugins minimerer og kombinerer JavaScript-filer. Forkert kombination af WooCommerce-scripts med andre scripts forårsager jQuery-afhængighedsfejl. Rettelse: I Autoptimize skal du gå til Indstillinger > JavaScript-indstillinger og aktivere "Tving JavaScript til at gå til hovedlinjen?". Marker "Udeluk scripts fra Autoptimize", og tilføj woocommerce.js og add-to-cart.js til udelukkelseslisten.

Sikkerheds-plugins: Wordfence, Sucuri, iThemes Security. Nogle sikkerhedskonfigurationer blokerer WooCommerces AJAX-anmodninger og klassificerer dem som ondsindede. Rettelse: I Wordfence skal du gå til Firewall > Firewall-indstillinger og hvidliste WooCommerce AJAX-slutpunktet (wp-admin/admin-ajax.php).

Sidebyggere: Elementor, Divi, WPBakery. Nogle sidebyggere tilsidesætter WooCommerce-skabeloner eller indsætter modstridende scripts på produktsider. Rettelse: Test ved midlertidigt at skifte til standard WooCommerce-produktskabelonen.

Sådan identificerer du en temakonflikt

Når du har udelukket plugin-konflikter, skal du skifte til Storefront-temaet (WooCommerces officielle standardtema) og teste knappen. Storefront er designet specifikt til WooCommerce og har ingen kompatibilitetsproblemer.

Gå til Udseende > Temaer > Tilføj ny, og søg derefter efter Storefront. Installer og aktiver det. Undlad at ændre andre indstillinger. Test knappen Tilføj til kurv.

Hvis knappen virker med Storefront, er problemet dit aktive tema. Kontakt din temaudvikler med en rapport. Hvis det ikke virker med Storefront, er årsagen ikke temarelateret.

Rettelse 3: Ret JavaScript- og AJAX-fejl

JavaScript- og AJAX-fejl får knappen til at se defekt ud, selvom alt andet er konfigureret korrekt. Tjek først browserkonsollen for at se, hvilket script der fejler, før du foretager ændringer.

Sådan tjekker du for JavaScript-fejl i din browser

Åbn dit websted i Chrome eller Firefox. Tryk på F12 for at åbne Udviklerværktøjer. Klik på fanen Konsol. Naviger til en produktside, hvor knappen Tilføj til kurv er defekt.

Kig efter røde fejlmeddelelser. Disse er de specifikke JavaScript-fejl, der forårsager knappens funktionsfejl. Kopiér den fulde fejlmeddelelse. Søg efter den i WooCommerce-supportforaene og pluginets eget supportforum. De fleste almindelige fejl har dokumenterede løsninger.

Mens konsollen er åben, skal du også tjekke fanen Netværk. Klik på knappen Tilføj til kurv, og hold øje med anmodninger. En mislykket AJAX-anmodning vises med rødt med en statuskode. En 403-status angiver, at et sikkerhedsplugin blokerer anmodningen. En 500-status angiver en serverfejl i AJAX-handleren.

Retter AJAX-indstillinger for Tilføj til kurv i WooCommerce

Gå til WooCommerce > Indstillinger > Produkter. Find sektionen "Læg ​​i kurv"-adfærd. Bekræft, at "Aktiver AJAX-knapper til læg i kurv" på arkiver er markeret. Denne indstilling styrer, om AJAX-indkøbskurvsfunktionen er aktiv på butiks- og kategorisider.

Kontroller også, at dine indkøbskurvs- og betalingssider er korrekt tildelt. Gå til WooCommerce > Indstillinger > Avanceret > Sideopsætning. Bekræft, at indkøbskurvs- og betalingssiderne er indstillet til de korrekte sider på dit websted. Hvis en af ​​dem er tom eller indstillet til den forkerte side, vil klik på indkøbskurvsknapper mislykkes lydløst.

Ret optimeringsplugins, der ødelægger WooCommerce-scripts

Hvis et optimeringsplugin minimerer eller kombinerer JavaScript og forårsager, at WooCommerce ikke fungerer korrekt, skal du tilføje følgende scripts til pluginets udelukkelsesliste:

Scripts, der skal udelukkes fra minificering:

• 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

Udeluk også WooCommerce-sider fra JavaScript-optimering: cart (/cart/), checkout (/checkout/), my account (/my-account/) og all product pages (/product/).

I WP Rocket: Gå til Filoptimering > JavaScript-filer. Tilføj ovenstående undtagelser til feltet Udelukkede JavaScript-filer.

I Autoptimize: Gå til JavaScript-indstillinger > Udeluk scripts fra Autoptimize, og tilføj WooCommerce-scriptstierne.

Løsning 4: Tjek og udfyld dine produktoplysninger

WooCommerce deaktiverer lydløst knappen "Læg ​​i kurv", når de nødvendige produktdata mangler. Hvis knappen mangler på specifikke produkter, men virker på andre, kan du starte her.

Obligatoriske felter, der udløser den manglende knap

WooCommerce kræver specifikke produktdata for at vise knappen "Læg ​​i kurv". Hvis der mangler obligatoriske felter, deaktiverer WooCommerce knappen lydløst uden en fejlmeddelelse.

Tjek alle produkter, hvor knappen mangler:

• Pris: Alle produkter skal have en fast pris. Et produkt uden pris viser ikke knappen "Læg ​​i kurv". Gå til Produkt > Produktdata > Generelt, og bekræft, at feltet "Normalpris" indeholder en værdi.

• Produktnavn: Produktet skal have en titel. Denne mangler sjældent, men det er værd at bekræfte på nyoprettede kladder.

• Synlighed: Sørg for, at produktets katalogsynlighed er indstillet til Butik og søgeresultater eller Butik. Produkter, der er indstillet til Skjult, viser ikke knappen på arkivsider.

• Produktstatus: Bekræft, at produktet er Udgivet, ikke Udkast eller Afventer gennemgang.

Variabel produktkonfiguration for Tilføj til kurv

Variable produkter opfører sig anderledes end simple produkter. På butiks-/arkivsider viser variable produkter en "Vælg muligheder"-knap i stedet for en "Tilføj til kurv"-knap. På den individuelle produktside vises "Tilføj til kurv" kun, når en kunde har valgt alle nødvendige attributter.

Hvis knappen "Læg ​​i kurv" mangler helt på en variabel produktside (ikke kun viser "Vælg muligheder" på butikssiden), skal du kontrollere:

• Der findes mindst én produktvariant (Produktdata > Variationer > Tilføj variant)

• Mindst én variant er markeret som På lager med lagerbeholdning tilgængelig

• Alle attributter, der bruges i variationer, defineres under Produktdata > Attributter, før variationer oprettes

• Fanen Variationer viser ingen konfigurationsfejl

Et variabelt produkt uden oprettede variationer, eller hvor alle variationer er udsolgt, viser ikke knappen "Læg ​​i kurv".

Lagerstatus og indstillinger for udsolgt

Gå til WooCommerce > Indstillinger > Produkter > Lager. Kontroller, om "Skjul udsolgte varer fra kataloget" er aktiveret. Hvis det er tilfældet, vil produkter, der er markeret som udsolgt, ikke blive vist på butikssiderne, og knappen "Læg ​​i kurv" vil ikke blive vist.

Tjek også lagerstatus for det enkelte produkt: Produkt > Produktdata > Lager > Lagerstatus. Bekræft, at den er indstillet til På lager. Et produkt, der manuelt er indstillet til Ikke på lager, viser ikke knappen Tilføj til kurv, uanset indstillingen på katalogniveau.

Rettelse 5: Tjek WooCommerce-sider og permalinkindstillinger

En forkert konfigureret indkøbskurvsside eller en forældet permalinkstruktur forårsager tavse fejl, som ingen mængde plugin-fejlfinding kan løse. Disse tre kontroller tager mindre end 5 minutter og løser flere problemer, end de fleste butiksejere forventer.

Bekræft tildeling af indkøbskurv og betalingsside

WooCommerce kræver, at specifikke sider eksisterer og er korrekt tildelt for at indkøbskurvsfunktionen kan fungere. Hvis indkøbskurvssiden eller betalingssiden slettes, afpubliceres eller tildeles den forkerte side, vil klik på knappen "Tilføj til kurv" enten mislykkes lydløst eller omdirigere til den forkerte side.

Gå til WooCommerce > Indstillinger > Avanceret > Sideopsætning. Bekræft:

• Kurv: tildelt en publiceret side, der indeholder shortcoden [woocommerce_cart] eller WooCommerce Cart-blokken

• Betaling: tildelt en publiceret side, der indeholder shortcoden [woocommerce_checkout] eller WooCommerce Checkout-blokken

• Min konto: tildelt en publiceret side, der indeholder blokken eller shortcoden Min konto

Hvis nogle mangler eller er forkert tildelt, skal du tildele dem igen. Hvis selve siderne mangler, skal du oprette nye sider med de korrekte shortcodes og tildele dem her.

Ryd din permalinkstruktur op

WordPress bruger permalink-regler til at dirigere anmodninger korrekt. Hvis disse regler bliver beskadiget, kan WooCommerce AJAX-anmodninger mislykkes, selvom alle andre indstillinger er korrekte. Hvis permalink-strukturen ryddes, regenereres disse regler.

Gå til Indstillinger > Permalinks i dit WordPress-dashboard. Undlad at ændre nogen indstillinger. Klik på Gem ændringer. Dette regenererer .htaccess-filen med nye permalink-regler og løser routing-problemer, der forårsager fejl på knappen til lydløse indkøbskurve.

Dette tager under 10 sekunder og har ingen effekt på dit indhold. Det er værd at gøre tidligt i enhver fejlfindingsproces, fordi det ikke koster noget og løser et betydeligt antal fejl i indkøbskurven.

Tjek WooCommerce-statussiden for fejl

Gå til WooCommerce > Status. Denne side viser en omfattende oversigt over din WooCommerce-installation. Rødt fremhævede rækker angiver konfigurationsfejl.

Almindelige fejl vist på statussiden, der påvirker knappen Tilføj til kurv:

• Databasen er forældet: WooCommerce-databasetabellerne skal opdateres. Klik på knappen Opdater database.

• WooCommerce.js: Filen mangler eller er utilgængelig. Dette forhindrer direkte knappen "Læg ​​i kurv" i at fungere.

• Skabelonoverstyringer: Dit tema har overskrevet WooCommerce-skabelonfiler. Hvis overstyringerne er fra en gammel WooCommerce-version, mangler de muligvis ny funktionalitet. Opdater dit tema, eller fjern de forældede overstyringer.

Rettelse 6: Ryd din cache

Et cache-plugin, der viser en forældet version af din produktside, kan forårsage, at knappen "Læg ​​i kurv" ikke reagerer, selv efter du har anvendt alle andre rettelser. Ryd altid din cache, både som et tidligt fejlfindingstrin og som et sidste trin efter ændringer.

Ryd cache i WP Rocket: Klik på WP Rocket-ikonet i din administrationslinje > Ryd cache.

Ryd cache i W3 Total Cache: Ydeevne > Ryd alle caches.

Ryd WP Super Cache-cachen: Indstillinger > WP Super Cache > Slet cache.

Ryd cachen i LiteSpeed ​​Cache: LiteSpeed ​​Cache > Ryd alt.

Ryd Cloudflare-cache: Cloudflare Dashboard > Caching > Konfiguration > Ryd alt.

Ryd din browsercache: Ctrl+Shift+Delete i Chrome eller Firefox. Ryd cachelagrede billeder og filer. Genindlæs produktsiden i et privat/inkognitovindue for at bekræfte rettelsen, hvilket garanterer, at der ikke er nogen browsercache involveret.

Når du har ryddet alle cacher, skal du teste knappen "Læg ​​i kurv" på den berørte produktside. Test i et inkognitovindue for at udelukke browsercachen.

Fejlfindingstjekliste: Den rigtige rækkefølge

Arbejd dig igennem disse i rækkefølge. Stop når knappen virker.

• Tag en fuld backup af webstedet og databasen

• Identificer din fejltype (vises ikke / kan ikke klikkes på / klikkes, men opdateres ikke)

• Tjek browserkonsollen for JavaScript-fejl, og noter eventuelle specifikke fejl

• Gå til Indstillinger > Permalinks og klik på Gem ændringer (ingen ændring af indstillinger nødvendig)

• Tjek WooCommerce > Status for røde fejl og ret dem

• Tjek produktdata: prisfastsættelse, lagerstatus På lager, konfigurerede variationer

• Opdater WordPress, WooCommerce, alle plugins og dit tema

• Ryd alle cacher: caching-plugin + Cloudflare + browser

• Deaktiver alle plugins undtagen WooCommerce og test

• Hvis knappen virker med deaktiverede plugins, skal du genaktivere dem én efter én for at identificere konflikten

• Skift til Storefront-temaet og test

• Hvis knappen fungerer med Storefront, er det det aktive tema årsagen

• Tjek WooCommerce > Indstillinger > Avanceret > Sideopsætning for tildeling af indkøbskurv og betalingsside

• Tilføj WooCommerce-scripts til ekskluderingslisten for dit optimeringsplugin

Afsluttende tanker om at rette WooCommerce-knappen "Læg ​​i kurv"

De fleste fejl i WooCommerce-knappen Tilføj til kurv skyldes plugin-konflikter, caching-problemer eller ufuldstændige produktdata. Alle tre har klare diagnosticeringsstier og specifikke rettelser, der ikke kræver brugerdefineret udvikling.

Start med diagnosticeringstabellen for at identificere din fejltype. Tjek statussiden og fjern permalinks først – disse koster ingenting og løser et betydeligt antal tilfælde. Opdater alt, før du foretager andre ændringer. Arbejd dig derefter igennem plugin- og temakonfliktprocessen.

Hvis du har anvendt alle rettelserne på denne liste, og knappen stadig ikke virker, er problemet sandsynligvis en konflikt med brugerdefineret kode eller et konfigurationsproblem på serverniveau. På det tidspunkt bør en WordPress-udvikler med WooCommerce-erfaring gennemgå browserkonsolfejlene, serverfejlloggen og WooCommerce-debugloggen sammen.

Seahawks WooCommerce-udviklingsteam løser problemer med knappen "Læg ​​i kurv" som en del af deres nødsupport og løbende vedligeholdelsesservice.

Ofte stillede spørgsmål om WooCommerce Tilføj til kurv-knappen virker ikke