Varför "Lägg i varukorg"-knappen försvinner från WooCommerce-produkter

Du höll på att sätta upp din butik, lade till ett dussin produkter, men när du öppnar sidan finns det ingenting där "Lägg i varukorg"-knappen borde vara. Kunderna kan inte handla. Panik. Men problemet är enklare att lösa än det kan verka vid första anblicken.

Det finns exakt fem orsaker till att knappen saknas: från ett ofullständigt produktkort till mod_security på serversidan. Två av dem kan åtgärdas med två klick. Två till med ett par rader kod. Och bara en kräver att du kontaktar din webbhotellsleverantör. Nedan följer en steg-för-steg-genomgång med kod, skärmdumpar och konkreta åtgärder.

💡 Snabb översikt:

• Kontrollera först produktkortet: pris och lagerstatus krävs
• Inaktivera alla tillägg på en gång och aktivera endast WooCommerce: om knappen dyker upp är det en konflikt som är boven
• Gå till temats anpassningsverktyg: knappen kan helt enkelt vara dold via en växlingsknapp
• Åtgärda temamallen via kodredigeraren: ersätt tre rader i single.php
• Öppna webbläsarens konsol: JavaScript-fel → kontakta ditt webbhotell, problemet är mod_security

1. Kontrollera produktkortet: pris och lagerstatus

WooCommerce visar "Lägg i varukorg"-knappen endast när produkten kan köpas. Kan den inte köpas, ingen knapp. Enkel logik.

Öppna Produkter → Alla produkter → välj den problematiska → Redigera. I blocket "Produktdata", kontrollera tre fält:

• Pris: ordinarie pris krävs, även om produkten är på rea. Fältet "Pris" får inte vara tomt.
• Lagerstatus: "I lager" eller "Tillgänglig för restorder". Värdet "Slut i lager" döljer knappen.
• Variabla produkter: varje variant måste ha sitt eget pris och lagerstatus.

Vanligt misstag: du skapade en variabel produkt, lade till attribut (färg, storlek), men angav inga priser för specifika varianter. I det här fallet vet WooCommerce inte vilket pris den ska sälja till och visar helt enkelt inte knappen.

Ifyllt → Uppdatera → öppna produktsidan på webbplatsen. I de flesta enkla fall är problemet redan löst i det här steget.

2. Hitta tilläggskonflikten

WordPress sätter ihop kod från det aktiva temat och alla aktiva tillägg. Om två tillägg använder identiska funktionsnamn, krokar i samma hooks eller helt enkelt är inkompatibla kan WooCommerce tappa bort knappen.

Diagnostisk procedur:

• Gå till Tillägg → Installerade. Markera alla (kryssrutan högst upp), i rullgardinsmenyn "Massåtgärder" välj "Inaktivera" → Verkställ.
• Aktivera endast WooCommerce. Öppna den problematiska produktsidan.
• Knappen dök upp: konflikt bekräftad. Aktivera tillägg ett och ett, kontrollera produktsidan efter varje. Tillägget efter vars aktivering knappen försvinner igen är boven.
• Ersätt det problematiska tillägget med ett alternativ eller kontakta dess utvecklare.

En särskild undertyp av detta problem är en konflikt med filtret woocommerce_show_variation_price. Vissa teman och tillägg returnerar false för denna hook, och WooCommerce döljer variantpriset och tappar bort knappen. Om knappen är på plats efter att alla tillägg inaktiverats men det inte finns någon synlig "bov", kontrollera det aktiva temats functions.php efter rader som innehåller woocommerce_show_variation_price.

Du kan tvinga fram visning med detta filter:

1
add_filter('woocommerce_show_variation_price', function() {
2
    return true;
3
});

Infoga denna kod i functions.php för ditt aktiva (barntema) eller via tillägget Code Snippets. Efter att du sparat, kontrollera produkten.

3. Temats anpassningsverktyg: den osynliga växlingsknappen

Vissa teman lägger till en egen växlingsknapp för knappens synlighet. Utvecklarnas logik: "låt oss ge användarna flexibilitet." I praktiken är växlingsknappen förinställd på "dölj", och butiksägaren känner inte till den.

Gå till Utseende → Anpassa. Leta efter en sektion:

• WooCommerce → Produktsida (eller Innehåll → WooCommerce, beroende på tema);
• Parameter "Lägg i varukorg-knapp" → Synlig (eller "Visa").

Spara inställningarna och kontrollera produkten. Detta fungerar för teman som använder anpassningssektioner för WooCommerce utöver standardmallen. Det är populärt bland ThemeForest-teman: Avada, Flatsome, WoodMart.

4. Åtgärda temamallen i redigeraren

Om de föregående stegen inte hjälpte sitter problemet djupare: temat använder en icke-standardiserad produktsidmall och anropar inte WooCommerce-funktionen som matar ut knappen.

Vad som händer. WordPress laddar produktsidan via temafilerna single.php (eller index.php som reserv). Inuti finns ett get_template_part()-anrop som inkluderar innehållsblocket. Temat borde överlämna kontrollen till WooCommerce genom att anropa wc_get_template_part('content', 'single-product'), men vissa teman gör inte detta. Resultat: temats layout finns där, men knappen gör det inte.

Så här åtgärdar du:

• Utseende → Temafilredigerare. Bekräfta WordPress-varningen.
• I den högra kolumnen hittar du filerna single.php och index.php:

• Öppna single.php (om den finns). Om inte, index.php.
• Hitta raden med get_template_part. Ersätt hela innehållsutmatningsblocket med:

1
if (is_singular('product')) {
2
    wc_get_template_part('content', 'single-product');
3
} else {
4
    wc_get_template_part('content', get_post_format());
5
}

• Spara filen.

Innan du redigerar, säkerhetskopiera temafilen. Kopiera innehållet till en textredigerare eller använd ett barntema: direkt redigering av föräldratemat kommer att återställas vid nästa uppdatering.

Efter att du sparat, öppna produktsidan. Knappen borde dyka upp.

5. Serverproblem: mod_security blockerar skript

Om du har kommit så här långt och knappen fortfarande inte är där, ligger orsaken troligen på serversidan. Modulen mod_security (Apache/LiteSpeed-brandvägg) blockerar laddning av WooCommerce JavaScript-filer. Utan JavaScript fungerar inte varukorgen.

Diagnos:

• Öppna den problematiska produktsidan.
• Tryck F12 → fliken Console (Konsol).
• Leta efter ett laddningsfel för WooCommerce-skript, vanligtvis cart.min.js, add-to-cart.min.js eller jquery.blockUI.min.js med koden 403 Forbidden.
• Om du ser det, är problemet mod_security.

Lösning: kontakta din webbhotellsleverantör och be dem lägga till ett undantag för URL-sökvägen /wp-content/plugins/woocommerce/ i mod_security-reglerna. Supporten hanterar detta på några minuter.

Alternativt kan du inaktivera mod_security för domänen via .htaccess (om ditt webbhotell tillåter):

1
<IfModule mod_security.c>
2
    SecFilterEngine Off
3
    SecFilterScanPOST Off
4
</IfModule>

Men det är bättre att samordna med ditt webbhotell: på delade webbhotell skyddar mod_security hela servern, och att inaktivera det skapar en säkerhetsrisk.

Sammanfattningstabell: vad du ska kontrollera

Detaljerad videoguide som täcker alla fem steg: från produktkortet till mallredigering och serverdiagnostik.

⁉️🤔 Vanliga frågor

Knappen försvann endast för variabla produkter. Vad är det som händer?

Nästan helt säkert är variantpriserna inte ifyllda. Öppna produkten, fliken "Varianter", expandera var och en: fältet "Pris" måste vara ifyllt. Ett tomt variantpris innebär att WooCommerce anser att produkten "inte är till salu" och tar bort knappen. För 50 eller fler varianter, använd CSV-import: Produkter → Importera.

Knappen försvann efter en temauppdatering. Vad ska jag göra?

Temauppdateringen skrev över single.php. Återställ redigeringen från steg 4. För att slippa upprepa detta vid varje uppdatering, flytta mallen till ett barntema: skapa en mapp /woocommerce/ i barntemat och kopiera den korrigerade single-product.php dit.

Kan jag återställa knappen utan att redigera kod?

Ja, i hälften av fallen: kontrollera produktkortet (steg 1) och temats anpassningsverktyg (steg 3). Kod behövs bara när temat matar ut produktmallen på ett icke-standardiserat sätt eller när ett tillägg eller tema undertrycker hooken woocommerce_show_variation_price.

Knappen finns där men fungerar inte. Du klickar och ingenting händer?

Detta är ett JavaScript-fel. Öppna webbläsarens konsol (F12) och se vilka skript som misslyckas. Oftast är det en jQuery-versionskonflikt (temat laddar en gammal jQuery över standard-WordPress-jQuery) eller cachad minifierad JS som inte uppdaterades. Rensa cacheminnet för ditt cache-tillägg och regenerera minifierade skript.

Behöver jag inaktivera AJAX add-to-cart?

Endast för diagnostik. Gå till WooCommerce → Inställningar → Produkter och avmarkera "Aktivera AJAX add-to-cart-knappar." Om knappen dyker upp efter detta, ligger problemet i ditt specifika temas AJAX-hanterare. Lämna AJAX inaktiverat eller byt tema.

Vad du ska göra om knappen fortfarande inte har dykt upp

De fem stegen ovan täcker den stora majoriteten av fall där "Lägg i varukorg"-knappen försvinner. Om inget av dem fungerade sitter problemet djupare och kräver manuell felsökning.

Snabb sista-utvägen-checklista:

• Byt tema till Storefront, det officiella WooCommerce-temat. Dök knappen upp? Problemet ligger i ditt tema.
• Kontrollera WooCommerce → Status → Schemalagda åtgärder efter eventuella fastnade cron-jobb.
• Gå till WooCommerce → Status → Loggar och leta efter fatal-errors från de senaste dagarna.

Fortfarande ingen framgång? Beskriv din situation i kommentarerna: WooCommerce-version, temanamn, lista över aktiva tillägg. Vi hittar orsaken.