Tavallinen WooCommerce-kauppasivu näyttää jokaisen tuotteen alla yhden painikkeen: "Lisää ostoskoriin". Useimmille kaupoille tämä riittää. Mutta jos myyt tuotteita, jotka vaativat tutkimusta ennen ostoa, pelkkä "Lisää ostoskoriin"-painike ei riitä. Ostajat haluavat avata tuotesivun ensin, lukea kuvauksen, tarkistaa tekniset tiedot ja lisätä sitten ostoskoriin sieltä.

Ongelmana on, että WooCommerce ei tarjoa sisäänrakennettua asetusta "lisää Lue lisää -painike Lisää ostoskoriin -painikkeen viereen". Tähän tehtävään tarkoitetut lisäosat ovat joko turhilla ominaisuuksilla paisutettuja tai ristiriidassa teemasi kanssa. Jäljelle jää todistetusti toimiva tapa: räätälöity koodi functions.php-tiedostossa.

Alla on vaiheittainen opas. Saat kauppasivulle kaksi painiketta: "Lue lisää" (linkki tuotesivulle) ja "Lisää ostoskoriin" (toimii normaalisti). Käsittelemme myös loppuunmyytyjen tuotteiden erikoistapauksen.

💡 Pikayhteenveto:

• Poista oletusarvoinen "Lisää ostoskoriin"-painike remove_action-funktiolla
• Lisää räätälöity "Lue lisää" -painike, joka linkittää tuotesivulle
• Palauta "Lisää ostoskoriin"-painike uuteen paikkaan "Lue lisää" -painikkeen viereen
• Korjaa tuplapainikkeet loppuunmyydyille tuotteille jQuerylla
• Koodi menee lapsiteeman functions.php-tiedostoon, turvallinen ja lisäosaton

Miten WooCommerce piirtää painikkeet kauppasivulla

WooCommerce tulostaa "Lisää ostoskoriin"-painikkeen woocommerce_after_shop_loop_item-koukun kautta. Tämä koukku laukeaa jokaisessa tuotekortissa WP_Query-silmukan sisällä kauppasivulla. Painikkeen lisäämisestä vastaava funktio on woocommerce_template_loop_add_to_cart prioriteetilla 10.

Koukku on kiinnitetty toimintoon. Muuttaaksemme painikejoukkoa työskentelemme sen kanssa suoraan: poistamme oletuskäsittelijän ja lisäämme omamme. WooCommerce-mallipohjiin ei tarvitse tehdä muutoksia, ja teema pysyy päivitettävänä.

Vaihe 1: poista oletusarvoinen "Lisää ostoskoriin"-painike

Ensimmäinen vaihe on irrottaa woocommerce_template_loop_add_to_cart-funktio koukusta. Sijoita tämä koodi lapsiteemasi functions.php-tiedostoon tai Code Snippets -lisäosan kautta:

1
/* Remove the standard Add to cart button */
2
function remove_loop_button() {
3
    remove_action(
4
        'woocommerce_after_shop_loop_item',
5
        'woocommerce_template_loop_add_to_cart',
6
        10
7
    );
8
}
9
add_action( 'init', 'remove_loop_button' );

Käärimme remove_action-kutsun funktioon ja kiinnitämme sen init-koukkuun. Et voi kutsua remove_action-funktiota suoraan functions.php-tiedostossa, koska WooCommerce ei välttämättä ole vielä alustanut koukkujaan siinä vaiheessa, kun teema latautuu. init-koukku takaa, että kaikki toiminnot on jo rekisteröity.

Tämän koodin lisäämisen jälkeen kauppasivulta katoaa "Lisää ostoskoriin"-painike. Älä huoli: seuraavassa vaiheessa tuomme sen takaisin, nyt "Lue lisää" -painikkeen parina.

Vaihe 2: lisää räätälöity "Lue lisää" -painike

"Lue lisää" -painike on linkki tuotesivulle, tyyliteltynä kuten tavallinen WooCommerce-painike. Käytämme $product->get_permalink()-funktiota URL-osoitteen hakemiseen ja do_shortcode-funktiota kääreeseen:

1
/* Add a More details button */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart'
5
);
6
function replace_add_to_cart() {
7
    global $product;
8
    $link = $product->get_permalink();
9
    echo do_shortcode(
10
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
11
    );
12
}

Funktio koukuttautuu samaan woocommerce_after_shop_loop_item-toimintoon oletusprioriteetilla 10. Se hakee $product-objektin global-avulla, saa tuotesivun URL-osoitteen ja tulostaa linkin, jolla on button-luokka. WooCommerce poimii painikkeen tyylit automaattisesti aktiivisesta teemasta.

Huomaa esc_url()-kutsu: URL-osoitteen escapettaminen on pakollista tietoturvan vuoksi. Voit korvata addtocartbutton-luokan omallasi, jos haluat räätälöityjä tyylejä.

Vaihe 3: palauta "Lisää ostoskoriin"-painike rinnalle

"Lisää ostoskoriin"-painiketta tarvitaan edelleen kauppasivulla; ilman sitä ostajat eivät voi lisätä tuotteita suoraan ostoskoriin. Mutta nyt sen on ilmestyttävä "Lue lisää" -painikkeen JÄLKEEN. Tämän saavuttamiseksi rekisteröimme natiivin käsittelijän prioriteetilla 20 (meidän painikkeemme jälkeen, jolla on prioriteetti 10):

1
/* Restore the Add to cart button */
2
add_action( 'after_setup_theme', 'lets_add_cart_button' );
3
function lets_add_cart_button() {
4
    add_action(
5
        'woocommerce_after_shop_loop_item',
6
        'woocommerce_template_loop_add_to_cart',
7
        20
8
    );
9
}

Käärimme add_action-kutsun after_setup_theme-koukkuun samasta syystä kuin poiston: WooCommerce ei välttämättä ole ladattu siinä vaiheessa, kun functions.php suoritetaan. Prioriteetti 20 sijoittaa "Lisää ostoskoriin"-painikkeen tiukasti "Lue lisää" -painikkeen (prioriteetti 10) jälkeen.

Tulos: jokaisen tuotteen alla kauppasivulla on nyt kaksi painiketta. Ensin "Lue lisää", sitten "Lisää ostoskoriin".

Video esittelee vaihtoehtoisen lähestymistavan, joka lisää räätälöityjä painikkeita yksittäisiin tuotteisiin ja koko kauppasivulle. Koukkujen kanssa työskentelyn periaate on sama kuin yllä käsittelimme.

Mikä menee pieleen loppuunmyytyjen tuotteiden kanssa

Yllä oleva koodi toimii täydellisesti tuotteille, joita on varastossa. Mutta loppuunmyytyjen tuotteiden kohdalla syntyy ristiriita: WooCommerce korvaa automaattisesti "Lisää ostoskoriin"-painikkeen "Lue lisää" -painikkeella tällaisille tuotteille. Tuloksena on KAKSI "Lue lisää" -painiketta peräkkäin: meidän räätälöity painikkeemme ja WooCommercen korvaava painike.

Ongelma ei ole koodimme logiikassa; tämä on WooCommercen ytimen suunnittelutapa. Tavallinen woocommerce_template_loop_add_to_cart-funktio piirtää "Lue lisää" -linkin "Lisää ostoskoriin"-painikkeen sijaan loppuunmyydyille tuotteille. Meidän räätälöity "Lue lisää" -painikkeemme jää, joten saamme tuplapainikkeen.

Vaihe 4: poista ylimääräinen painike jQuerylla

Suoraviivaisin tapa poistaa tuplapainike on jQuery. Skripti etsii linkin, joka sisältää tekstin "Lue lisää" ja joka sijaitsee tavallisen WooCommerce-span-säiliön sisällä, ja poistaa sen:

1
/* Remove the duplicate More details button for out-of-stock items */
2
jQuery( document ).ready( function( $ ) {
3
    $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
4
 
5
    $( 'button.button.woof_reset_search_form' ).on( 'click', function() {
6
        $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
7
    });
8
});

Skripti tekee kaksi asiaa. Ensinnäkin sivun latautuessa se poistaa kaikki linkit, joilla on product_type_simple-luokka ja jotka sisältävät tekstin "Lue lisää". Toiseksi se kiinnittää käsittelijän WooCommercen suodattimen nollauspainikkeeseen (woof_reset_search_form), koska AJAX-suodatuksen jälkeen DOM päivittyy ja tuplapainikkeet ilmestyvät uudelleen.

Sijoita jQuery-koodi erilliseen .js-tiedostoon ja lataa se wp_enqueue_script-funktiolla functions.php-tiedostossa, tai liitä se teemasi tai lisäosan, kuten Simple Custom CSS and JS, "Mukautettu JavaScript" -kenttään.

Vaihtoehtoinen lähestymistapa: suodatin poiston sijaan

Jos haluat välttää jQueryn, on olemassa elegantimpi menetelmä: woocommerce_product_is_in_stock-suodatin. Se tarkistaa tuotteen saatavuuden ennen räätälöidyn painikkeen tulostamista:

1
/* Do not show the More details button for unavailable items */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart_conditional',
5
    10
6
);
7
function replace_add_to_cart_conditional() {
8
    global $product;
9
 
10
    if ( ! $product->is_in_stock() ) {
11
        return;
12
    }
13
 
14
    $link = $product->get_permalink();
15
    echo do_shortcode(
16
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
17
    );
18
}

$product->is_in_stock()-metodi palauttaa false loppuunmyydyille tuotteille, joten meidän painikettamme ei yksinkertaisesti piirretä. WooCommerce näyttää oman "Lue lisää" -painikkeensa tällaisille tuotteille. Varastossa oleville tuotteille molemmat painikkeet toimivat tarkoitetulla tavalla. Tämä lähestymistapa on siistimpi: ei JS:ää, vähemmän suodatinristiriitoja.

Kumpaa vaihtoehtoa käyttää, riippuu kaupastasi. jQuery on universaalimpi (toimii minkä tahansa suodatuslisäosan kanssa), kun taas PHP-suodatin on kevyempi ja nopeampi.

⁉️🤔 Usein kysytyt kysymykset

Koodi ei toimi, ja painikkeet eivät ilmesty. Mikä on vialla?

Varmista ensin, että koodi on LAPSITEEMAN functions.php-tiedostossa, ei pääteeman (pääteema ylikirjoitetaan päivityksissä). Toiseksi, tarkista, että WooCommerce on aktiivinen ja päivitetty uusimpaan versioon. Kolmanneksi, tarkista, korvaako teemasi woocommerce_after_shop_loop_item-koukun. Jotkin teemat korvaavat tuotekortin mallipohjan kokonaan, eivätkä WooCommerce-koukut laukea siinä.

Voinko vaihtaa "Lue lisää" -painikkeen tekstin joksikin muuksi?

Kyllä. replace_add_to_cart()-funktiossa korvaa merkkijono 'Lue lisää' <a>-tagin attribuuteissa haluamallasi tekstillä, esimerkiksi "Näytä", "Valitse" tai "Kuvaus". Teksti on staattinen eikä vaikuta toiminnallisuuteen.

*Miksi jQuery-valitsin käyttää product_type_simple-luokkaa?*

Koska WooCommerce antaa painikkeille eri luokkia tuotetyypin mukaan: product_type_simple yksinkertaisille tuotteille, product_type_variable muuttuville tuotteille. Jos kaupassasi on loppuunmyytyjä muuttuvia tuotteita, lisää toinen valitsin product_type_variable-luokalle tai käytä yleisempää a.button.ajax_add_to_cart-valitsinta.

*Onko turvallista lisätä PHP-koodia functions.php-tiedostoon?*

Se on turvallista kahdella ehdolla. Ensinnäkin, varmuuskopioi functions.php ennen muokkaamista (tai käytä lapsiteemaa, jotta alkuperäinen pysyy koskemattomana). Toiseksi, lisää koodi FTP/SFTP:n kautta tai hallintapaneelin "Ulkoasu → Teemaeditori" -kohdasta mieluummin kuin automaattisesti lataavien koodinpätkä-lisäosien kautta. Jos syntaksivirhe tapahtuu, WordPress näyttää valkoisen ruudun, ja tiedoston palauttaminen on helpompaa FTP:n kautta.

Painikkeet eivät näytä teemani natiiveilta painikkeilta. Miten tyylitän ne?

button-luokka <a>-tagissa tarjoaa perus-WooCommerce-tyylit. Jos painike näyttää silti erilaiselta, teemasi todennäköisesti ohittaa painikkeiden valitsimet tarkemmin (esimerkiksi .products .button pelkän .button-valitsimen sijaan). Kopioi CSS-luokat natiivista "Lisää ostoskoriin"-painikkeesta selaimen tarkastustyökalulla ja lisää ne räätälöidyn linkkisi class-attribuuttiin.

Mitä käyttää vuonna 2026: koodia vai lisäosaa?

Valinta räätälöidyn koodin ja lisäosan välillä riippuu kolmesta tekijästä. Jos säädät vain yhtä painiketta kauppasivulla ja haluat välttää lisäosien paisumisen, tämän artikkelin koodi on riittävä. Se ei lisää painoa hallintapaneelissa, ei luo ylimääräisiä tietokantakyselyitä eikä hajoa WooCommerce-päivityksissä (woocommerce_after_shop_loop_item- ja woocommerce_template_loop_add_to_cart-koukut ovat olleet vakaita versiosta 3.0 lähtien).

Jos kuitenkin tarvitset painikkeiden käyttäytymisen muuttamista eri sivuilla tai eri tuotekategorioille, lisäosat ovat harkitsemisen arvoisia: YITH WooCommerce Customize My Account Page tarjoaa visuaalisen painike-editorin, ja WooCommerce Product Add-Ons mahdollistaa räätälöityjen kenttien lisäämisen ennen ostoa.

Aloita koodilla. Se on ilmainen, läpinäkyvä ja täysin hallinnassasi. Jos tarvitset myöhemmin enemmän, siirry lisäosiin, nyt selkeällä ymmärryksellä siitä, mitä ominaisuuksia tarkalleen tarvitset.