Miksi "Lisää ostoskoriin" -painike katoaa WooCommerce-tuotteista

Olit pystyttämässä kauppaasi, lisäsit tusinan tuotteita, mutta kun avaat sivun, siellä ei ole mitään siinä kohtaa, missä "Lisää ostoskoriin" -painikkeen pitäisi olla. Asiakkaat eivät voi ostaa. Paniikki. Mutta ongelma on helpompi ratkaista kuin miltä se ensi silmäyksellä näyttää.

Painikkeen katoamiselle on tasan viisi syytä: keskeneräisestä tuotekortista palvelinpuolen mod_securityyn. Kaksi niistä korjaantuu kahdella klikkauksella. Kaksi muuta parilla koodirivillä. Ja vain yksi vaatii yhteydenottoa hosting-palveluntarjoajaasi. Alla on vaiheittainen erittely koodeineen, kuvakaappauksineen ja konkreettisine toimenpiteineen.

💡 Nopea yleiskatsaus:

• Tarkista ensin tuotekortti: hinta ja varastotilanne ovat pakollisia
• Ota kaikki lisäosat pois käytöstä kerralla ja käytä vain WooCommercea: jos painike ilmestyy, syy on ristiriita
• Mene teeman mukauttimeen: painike voi olla yksinkertaisesti piilotettu valintakytkimellä
• Korjaa teemapohja koodieditorin kautta: vaihda kolme riviä tiedostossa single.php
• Avaa selaimen konsoli: JavaScript-virhe → soita palveluntarjoajallesi, ongelma on mod_security

1. Tarkista tuotekortti: hinta ja varastotilanne

WooCommerce näyttää "Lisää ostoskoriin" -painikkeen vain, kun tuote on ostettavissa. Jos ei ole ostettavissa, ei painiketta. Yksinkertaista logiikkaa.

Avaa Tuotteet → Kaikki tuotteet → valitse ongelmallinen → Muokkaa. Tarkista "Tuotetiedot"-lohkosta kolme kenttää:

• Hinta: normaalihinta on pakollinen, vaikka tuote olisi alennuksessa. "Hinta"-kenttä ei saa olla tyhjä.
• Varastotilanne: "Varastossa" tai "Sallittu jälkitoimitus". Arvo "Loppu varastosta" piilottaa painikkeen.
• Muuttuvat tuotteet: jokaisella variaatiolla on oltava oma hintansa ja varastotilanteensa.

Yleinen virhe: loit muuttuvan tuotteen, lisäsit attribuutit (väri, koko), mutta et syöttänyt hintoja yksittäisille variaatioille. Tällöin WooCommerce ei tiedä, millä hinnalla myydä, eikä yksinkertaisesti näytä painiketta.

Täytä tiedot → Päivitä → avaa tuotesivu sivustolla. Useimmissa yksinkertaisissa tapauksissa ongelma on jo ratkennut tässä vaiheessa.

2. Etsi lisäosaristiriita

WordPress kokoaa koodin aktiivisesta teemasta ja kaikista aktiivisista lisäosista. Jos kaksi lisäosaa käyttää samoja funktionimiä, koukuttautuu samoihin koukkuihin tai ovat yksinkertaisesti yhteensopimattomia, WooCommerce voi menettää painikkeen.

Diagnostiikkamenettely:

• Mene kohtaan Lisäosat → Asennetut. Valitse kaikki (valintaruutu ylhäällä), valitse "Massatoiminnot"-pudotusvalikosta "Poista käytöstä" → Suorita.
• Ota käyttöön vain WooCommerce. Avaa ongelmallinen tuotesivu.
• Painike ilmestyi: ristiriita vahvistettu. Ota lisäosat käyttöön yksi kerrallaan ja tarkista tuotesivu jokaisen jälkeen. Lisäosa, jonka käyttöönoton jälkeen painike katoaa uudelleen, on syyllinen.
• Korvaa ongelmallinen lisäosa vaihtoehdolla tai ota yhteyttä sen kehittäjään.

Tämän ongelman erillinen alatyyppi on ristiriita woocommerce_show_variation_price -suodattimen kanssa. Jotkin teemat ja lisäosat palauttavat false tälle koukulle, jolloin WooCommerce piilottaa variaation hinnan ja menettää painikkeen. Jos painike on paikallaan kaikkien lisäosien poistamisen jälkeen, mutta näkyvää "syyllistä" ei ole, tarkista aktiivisen teeman functions.php-tiedostosta rivit, jotka sisältävät woocommerce_show_variation_price.

Voit pakottaa näytön tällä suodattimella:

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

Lisää tämä koodi aktiivisen (lapsi-)teemasi functions.php-tiedostoon tai Code Snippets -lisäosan kautta. Tarkista tuote tallennuksen jälkeen.

3. Teeman mukautin: näkymätön valintakytkin

Jotkin teemat lisäävät oman painikkeen näkyvyyden valintakytkimen. Kehittäjien logiikka: "annetaan käyttäjille joustavuutta." Käytännössä valintakytkimen oletus on "piilota", eikä kaupan omistaja tiedä siitä.

Mene kohtaan Ulkoasu → Mukauta. Etsi osio:

• WooCommerce → Tuotesivu (tai Sisältö → WooCommerce, teemasta riippuen);
• Parametri "Lisää ostoskoriin -painike" → Näkyvä (tai "Näytä").

Tallenna asetukset ja tarkista tuote. Tämä toimii teemoille, jotka käyttävät mukautinosioita WooCommercelle vakio-pohjan päällä. Se on suosittua ThemeForest-teemoissa: Avada, Flatsome, WoodMart.

4. Korjaa teemapohja editorissa

Jos edelliset vaiheet eivät auttaneet, ongelma on syvemmällä: teema käyttää epästandardia tuotesivupohjaa eikä kutsu WooCommerce-funktiota, joka tulostaa painikkeen.

Mitä tapahtuu. WordPress lataa tuotesivun teematiedoston single.php (tai index.php varavaihtoehtona) kautta. Sen sisällä on get_template_part()-kutsu, joka sisällyttää sisältölohkon. Teeman pitäisi luovuttaa ohjaus WooCommercelle kutsumalla wc_get_template_part('content', 'single-product'), mutta jotkin teemat eivät tee näin. Lopputulos: teeman asettelu on paikallaan, mutta painike ei.

Kuinka korjata:

• Ulkoasu → Teematiedostoeditori. Vahvista WordPressin varoitus.
• Etsi oikeasta sarakkeesta tiedostot single.php ja index.php:

• Avaa single.php (jos sellainen on). Jos ei, niin index.php.
• Etsi rivi, jossa on get_template_part. Korvaa koko sisällön tulostuslohko tällä:

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
}

• Tallenna tiedosto.

Ennen muokkaamista varmuuskopioi teematiedosto. Kopioi sisältö tekstieditoriin tai käytä lapsiteemaa: pääteeman suora muokkaaminen nollautuu seuraavassa päivityksessä.

Avaa tuotesivu tallennuksen jälkeen. Painikkeen pitäisi ilmestyä.

5. Palvelinongelma: mod_security estää skriptit

Jos olet päässyt tänne asti ja painiketta ei vieläkään ole, syy on todennäköisimmin palvelinpuolella. mod_security-moduuli (Apache/LiteSpeed-palomuuri) estää WooCommercen JavaScript-tiedostojen lataamisen. Ilman JavaScriptiä ostoskori ei toimi.

Diagnoosi:

• Avaa ongelmallinen tuotesivu.
• Paina F12 → Console-välilehti.
• Etsi WooCommerce-skriptin latausvirhe, yleensä cart.min.js, add-to-cart.min.js tai jquery.blockUI.min.js virhekoodilla 403 Forbidden.
• Jos näet sen, ongelma on mod_security.

Ratkaisu: ota yhteyttä hosting-palveluntarjoajaasi ja pyydä heitä lisäämään poikkeus URL-polulle /wp-content/plugins/woocommerce/ mod_security-sääntöihin. Tuki hoitaa tämän muutamassa minuutissa.

Vaihtoehtoisesti voit poistaa mod_securityn käytöstä verkkotunnukselle .htaccess-tiedoston kautta (jos palveluntarjoajasi sallii):

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

Mutta on parempi sopia asiasta palveluntarjoajasi kanssa: jaetulla hostingilla mod_security suojaa koko palvelinta, ja sen poistaminen käytöstä aiheuttaa tietoturvariskin.

Yhteenvetotaulukko: mitä tarkistaa

Yksityiskohtainen video-opas, joka kattaa kaikki viisi vaihetta: tuotekortista pohjan muokkaukseen ja palvelindiagnostiikkaan.

⁉️🤔 Usein kysytyt kysymykset

Painike katosi vain muuttuvilta tuotteilta. Mistä on kyse?

Melkein varmasti variaatioiden hintoja ei ole täytetty. Avaa tuote, "Variaatiot"-välilehti, laajenna jokainen: "Hinta"-kentän on oltava täytetty. Tyhjä variaation hinta tarkoittaa, että WooCommerce pitää tuotetta "ei myytävänä" ja poistaa painikkeen. Jos variaatioita on 50 tai enemmän, käytä CSV-tuontia: Tuotteet → Tuo.

Painike katosi teemapäivityksen jälkeen. Mitä teen?

Teemapäivitys ylikirjoitti single.php-tiedoston. Palauta vaiheen 4 muokkaus. Välttääksesi tämän toistumisen jokaisen päivityksen yhteydessä, siirrä pohja lapsiteemaan: luo /woocommerce/-kansio lapsiteemaan ja kopioi korjattu single-product.php sinne.

Voinko palauttaa painikkeen muokkaamatta koodia?

Kyllä, puolessa tapauksista: tarkista tuotekortti (vaihe 1) ja teeman mukautin (vaihe 3). Koodia tarvitaan vain, kun teema tulostaa tuotepohjan epästandardisti tai kun lisäosa tai teema vaimentaa woocommerce_show_variation_price -koukun.

Painike on paikallaan, mutta ei toimi. Klikkaat, eikä mitään tapahdu?

Tämä on JavaScript-virhe. Avaa selaimen konsoli (F12) ja katso, mitkä skriptit kaatuvat. Useimmiten kyseessä on jQuery-versioristiriita (teema lataa vanhan jQueryn WordPressin vakio-jQueryn päälle) tai välimuistissa oleva minifioitu JS, joka ei päivittynyt. Tyhjennä välimuistilisäosan välimuisti ja luo minifioidut skriptit uudelleen.

Pitääkö minun poistaa AJAX-lisäys ostoskoriin käytöstä?

Vain diagnostiikkaa varten. Mene kohtaan WooCommerce → Asetukset → Tuotteet ja poista valinta "Ota käyttöön AJAX-lisäys ostoskoriin -painikkeet." Jos painike ilmestyy tämän jälkeen, ongelma on teemasi omassa AJAX-käsittelijässä. Jätä AJAX pois käytöstä tai vaihda teema.

Mitä tehdä, jos painike ei vieläkään ilmestynyt

Yllä olevat viisi vaihetta kattavat valtaosan tapauksista, joissa "Lisää ostoskoriin" -painike katoaa. Jos mikään niistä ei toiminut, ongelma on syvemmällä ja vaatii manuaalista debuggausta.

Nopea viimeisen keinon tarkistuslista:

• Vaihda teema Storefrontiin, viralliseen WooCommerce-teemaan. Ilmestyikö painike? Ongelma on teemassasi.
• Tarkista WooCommerce → Tila → Ajastetut toiminnot mahdollisten jumiutuneiden cron-tehtävien varalta.
• Mene kohtaan WooCommerce → Tila → Lokit ja etsi fatal-errors viime päiviltä.

Eikö vieläkään onnistu? Kuvaile tilanteesi kommenteissa: WooCommerce-versio, teeman nimi, lista aktiivisista lisäosista. Selvitämme syyn.