WooCommerce’i tavaline poeleht kuvab iga toote all ühe nupu: „Lisa ostukorvi". Enamiku poodide jaoks on see piisav. Kuid kui müüte tooteid, mis nõuavad enne ostmist uurimist, jääb ühest „Lisa ostukorvi" nupust väheks. Ostjad tahavad esmalt avada tootelehe, lugeda kirjeldust, kontrollida tehnilisi andmeid ja seejärel sealt ostukorvi lisada.

Probleem on selles, et WooCommerce ei paku sisseehitatud seadet „lisa Lisa ostukorvi kõrvale Loe edasi nupp". Selle ülesande jaoks mõeldud pluginad on kas üleliigsete funktsioonidega punnis või lähevad sinu teemaga vastuollu. Alles jääb tõestatud tee: kohandatud kood failis functions.php.

Allpool on samm-sammuline juhend. Poesaidile saad kaks nuppu: „Loe edasi" (viib tootelehele) ja „Lisa ostukorvi" (töötab nagu tavaliselt). Käsitleme ka erijuhtu laost otsas toodete puhul.

💡 Kiire ülevaade:

• Eemalda vaikimisi „Lisa ostukorvi" nupp remove_action abil
• Lisa kohandatud „Loe edasi" nupp, mis viib tootelehele
• Too „Lisa ostukorvi" nupp tagasi uude asukohta „Loe edasi" kõrvale
• Paranda topeltnupud laost otsas toodete puhul jQuery abil
• Kood läheb alamteema functions.php faili, turvaline ja pluginavaba

Kuidas WooCommerce poesaidil nuppe renderdab

WooCommerce väljastab „Lisa ostukorvi" nupu woocommerce_after_shop_loop_item konksu kaudu. See konks käivitub igas tootekaardis poesaidil oleva WP_Query tsükli sees. Nupu lisamise eest vastutav funktsioon on woocommerce_template_loop_add_to_cart prioriteediga 10.

Konks on kinnitatud tegevuse külge. Nuppude komplekti muutmiseks töötame sellega otse: eemaldame vaikimisi töötleja ja lisame omaenda. WooCommerce’i malle pole vaja muuta ja teema jääb uuendatavaks.

1. Samm: eemalda vaikimisi „Lisa ostukorvi" nupp

Esimene samm on woocommerce_template_loop_add_to_cart funktsiooni lahtihaakimine. Aseta see kood oma alamteema functions.php faili või Code Snippets plugina kaudu:

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' );

Me mähime remove_action funktsiooni sisse ja kinnitame selle init konksu külge. remove_action ei saa otse functions.php failis välja kutsuda, sest WooCommerce ei pruugi olla oma konkse teema laadimise ajaks initsialiseerinud. init konks tagab, et kõik tegevused on juba registreeritud.

Pärast selle koodi sisestamist kaotab poesait „Lisa ostukorvi" nupu. Ära muretse: järgmises sammus toome selle tagasi, nüüd paaris „Loe edasi" nupuga.

2. Samm: lisa kohandatud „Loe edasi" nupp

„Loe edasi" nupp on link tootelehele, kujundatud nagu tavaline WooCommerce’i nupp. Kasutame URL-i saamiseks $product->get_permalink() ja ümbrise jaoks do_shortcode:

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
}

Funktsioon haakub sama woocommerce_after_shop_loop_item tegevuse külge vaikeprioriteediga 10. See hangib $product objekti global kaudu, saab tootelehe URL-i ja väljastab lingi button klassiga. WooCommerce korjab aktiivselt teemalt nupustiilid automaatselt üles.

Pane tähele esc_url() väljakutset: URL-i escapimine on turvalisuse tagamiseks kohustuslik. Kui soovid kohandatud stiile, võid addtocartbutton klassi asendada enda omaga.

3. Samm: too „Lisa ostukorvi" nupp kõrvale tagasi

„Lisa ostukorvi" nupp on poesaidil endiselt vajalik; ilma selleta ei saa ostjad tooteid otse ostukorvi lisada. Kuid nüüd peab see ilmuma PÄRAST „Loe edasi" nuppu. Selle saavutamiseks registreerime natiivse töötleja prioriteediga 20 (pärast meie nuppu prioriteediga 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
}

Me mähime add_action after_setup_theme konksu sisse samal põhjusel nagu eemaldamise: WooCommerce ei pruugi olla functions.php käivitumise ajaks laaditud. Prioriteet 20 asetab „Lisa ostukorvi" rangelt pärast „Loe edasi" nuppu (prioriteet 10).

Tulemus: iga toote all poesaidil on nüüd kaks nuppu. Esmalt „Loe edasi", seejärel „Lisa ostukorvi".

Video demonstreerib alternatiivset lähenemist, mis lisab kohandatud nupud üksikutele toodetele ja tervele poesaidile. Konksudega töötamise põhimõte on sama, mida eespool käsitlesime.

Mis läheb valesti laost otsas toodetega

Ülaltoodud kood töötab suurepäraselt toodete puhul, mis on laos. Kuid laost otsas toodete puhul tekib konflikt: WooCommerce asendab selliste toodete puhul „Lisa ostukorvi" nupu automaatselt tekstiga „Loe edasi". Tulemuseks on KAKS „Loe edasi" nuppu reas: meie kohandatud ja WooCommerce’i asendus.

Probleem ei ole meie koodi loogikas; nii on WooCommerce’i tuum kavandatud. Tavaline woocommerce_template_loop_add_to_cart funktsioon renderdab laost otsas toodete puhul „Lisa ostukorvi" nupu asemel lingi „Loe edasi". Meie kohandatud „Loe edasi" nupp jääb alles, seega saame duplikaadi.

4. Samm: eemalda üleliigne nupp jQuery abil

Kõige otsesem viis duplikaatnupu eemaldamiseks on jQuery. Skript leiab lingi, mis sisaldab teksti „Loe edasi" ja asub tavalises WooCommerce’i span-konteineris, ning eemaldab selle:

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
});

Skript teeb kahte asja. Esiteks, lehe laadimisel eemaldab see kõik product_type_simple klassiga lingid, mis sisaldavad teksti „Loe edasi". Teiseks, kinnitab see töötleja WooCommerce’i filtri lähtestamisnupu (woof_reset_search_form) külge, sest pärast AJAX filtreerimist DOM uueneb ja duplikaadid ilmuvad uuesti.

Aseta jQuery kood eraldi .js faili ja laadi see wp_enqueue_script abil functions.php failis või kleebi see oma teema või plugina (nt Simple Custom CSS and JS) „Custom JavaScript" väljale.

Alternatiivne lähenemine: filter eemaldamise asemel

Kui eelistad jQueryt vältida, on olemas elegantsem meetod: woocommerce_product_is_in_stock filter. See kontrollib toote saadavust enne kohandatud nupu väljastamist:

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() meetod tagastab laost otsas toodete puhul false, seega meie nuppu lihtsalt ei renderdata. WooCommerce kuvab selliste toodete puhul omaenda „Loe edasi". Laos olevate toodete puhul töötavad mõlemad nupud nagu ette nähtud. See lähenemine on puhtam: pole JS-i, vähem filtrite konflikte.

Milline variant valida, sõltub sinu poest. jQuery on universaalsem (töötab kõigi filtreerimispluginatega), samas kui PHP filter on kergem ja kiirem.

⁉️🤔 Korduma kippuvad küsimused

Kood ei tööta ja nupud ei ilmu. Milles on viga?

Esiteks veendu, et kood on ALAMteema functions.php failis, mitte ülemteemas (ülemteema kirjutatakse uuendustega üle). Teiseks kontrolli, et WooCommerce on aktiivne ja uuendatud viimasele versioonile. Kolmandaks kontrolli, kas sinu teema kirjutab üle woocommerce_after_shop_loop_item konksu. Mõned teemad asendavad tootekaardi malli täielikult ja WooCommerce’i konksud selles ei käivitu.

Kas ma saan „Loe edasi" nupu teksti millekski muuks muuta?

Jah. Funktsioonis replace_add_to_cart() asenda <a> sildi atribuutides string 'Read More' soovitud tekstiga, näiteks „Vaata", „Vali" või „Kirjeldus". Tekst on staatiline ega mõjuta funktsionaalsust.

Miks jQuery selektor kasutab product_type_simple?

Sest WooCommerce määrab nuppudele erinevad klassid sõltuvalt toote tüübist: product_type_simple lihttoodetele, product_type_variable muutuvatele toodetele. Kui sinu poes on laost otsas muutuvaid tooteid, lisa teine selektor product_type_variable jaoks või kasuta üldisemat a.button.ajax_add_to_cart.

Kas PHP koodi sisestamine functions.php faili on ohutu?

See on ohutu kahel tingimusel. Esiteks, varunda oma functions.php enne muutmist (või kasuta alamteemat, nii jääb originaal puutumata). Teiseks, sisesta kood FTP/SFTP või administraatori „Välimus → Teematoimetaja" kaudu, mitte automaatse laadimisega snippet-pluginatega. Süntaksivea korral näitab WordPress valget ekraani ja faili taastamine on FTP kaudu lihtsam.

Nupud ei näe välja nagu minu teema natiivsed nupud. Kuidas neid stiilida?

<a> sildis olev button klass pakub põhilisi WooCommerce’i stiile. Kui nupp näeb endiselt erinev välja, kirjutab sinu teema tõenäoliselt nupu selektorid spetsiifilisemalt üle (näiteks .products .button, mitte lihtsalt .button). Kopeeri brauseri inspektori abil natiivse „Lisa ostukorvi" nupu CSS klassid ja lisa need oma kohandatud lingi class atribuuti.

Mida kasutada aastal 2026: koodi või pluginat?

Valik kohandatud koodi ja plugina vahel sõltub kolmest tegurist. Kui muudad poesaidil ühte nuppu ja soovid vältida pluginate punnitust, on selle artikli kood piisav. See ei lisa administraatoris kaalu, ei tekita täiendavaid andmebaasipäringuid ega purune WooCommerce’i uuendustega (konksud woocommerce_after_shop_loop_item ja woocommerce_template_loop_add_to_cart on olnud stabiilsed alates versioonist 3.0).

Kui aga on vaja muuta nupu käitumist erinevatel lehtedel või erinevate tootekategooriate puhul, tasub pluginaid kaaluda: YITH WooCommerce Customize My Account Page pakub visuaalset nupuredaktorit ja WooCommerce Product Add-Ons võimaldab lisada kohandatud välju enne ostu.

Alusta koodist. See on tasuta, läbipaistev ja täielikult sinu kontrolli all. Kui hiljem on rohkem vaja, liigu edasi pluginate juurde, nüüd juba selge arusaamaga, milliseid funktsioone täpselt vajad.