Standard WooCommerce-butikksiden viser én enkelt knapp under hvert produkt: «Add to Cart». For de fleste butikker er dette nok. Men hvis du selger produkter som krever research før kjøp, kommer en enkelt «Add to Cart»-knapp til kort. Kunder ønsker å åpne produktsiden først, lese beskrivelsen, sjekke spesifikasjonene og deretter legge i handlekurven derfra.

Problemet er at WooCommerce ikke tilbyr noen innebygd innstilling for «legg til en Read More-knapp ved siden av Add to Cart». Plugin-er for denne oppgaven er enten oppblåste med unødvendige funksjoner eller i konflikt med temaet ditt. Da gjenstår den utprøvde veien: tilpasset kode i functions.php.

Nedenfor finner du en trinnvis guide. Du får to knapper på butikksiden: «Read More» (lenker til produktsiden) og «Add to Cart» (fungerer som vanlig). Vi dekker også grensetilfellet for produkter som er utsolgt.

💡 Rask oversikt:

• Fjern standard «Add to Cart»-knappen via remove_action
• Legg til en tilpasset «Read More»-knapp som lenker til produktsiden
• Sett tilbake «Add to Cart»-knappen på en ny plassering ved siden av «Read More»
• Fiks dupliserte knapper for utsolgte produkter med jQuery
• Koden legges i barnetemaets functions.php, trygt og plugin-fritt

Hvordan WooCommerce rendrer knapper på butikksiden

WooCommerce sender ut «Add to Cart»-knappen via woocommerce_after_shop_loop_item-hooken. Denne hooken fyres av i hvert produktkort innenfor WP_Query-løkken på butikksiden. Funksjonen som er ansvarlig for å legge til knappen, er woocommerce_template_loop_add_to_cart med prioritet 10.

Hooken er festet til en action. For å endre knappesettet jobber vi direkte med den: fjern standardbehandleren og legg til vår egen. Ingen redigeringer av WooCommerce-maler er nødvendig, og temaet forblir oppdaterbart.

Trinn 1: fjern standard «Add to Cart»-knappen

Det første trinnet er å koble fra woocommerce_template_loop_add_to_cart-funksjonen. Plasser denne koden i barnetemaets functions.php eller via Code Snippets-pluginen:

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

Vi pakker remove_action inn i en funksjon og fester den til init-hooken. Du kan ikke kalle remove_action direkte i functions.php fordi WooCommerce kanskje ikke har initialisert sine hooker når temaet lastes. init-hooken garanterer at alle actions allerede er registrert.

Etter at du har satt inn denne koden, vil butikksiden miste «Add to Cart»-knappen. Ikke bekymre deg: i neste trinn henter vi den tilbake, nå sammen med «Read More».

Trinn 2: legg til en tilpasset «Read More»-knapp

«Read More»-knappen er en lenke til produktsiden, stylet som en standard WooCommerce-knapp. Vi bruker $product->get_permalink() for å hente URL-en og do_shortcode for wrapperen:

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
}

Funksjonen hooker seg inn i den samme woocommerce_after_shop_loop_item-actionen med standardprioriteten 10. Den henter $product-objektet via global, henter produktsidens URL og sender ut en lenke med button-klassen. WooCommerce plukker automatisk opp knappestiler fra det aktive temaet.

Legg merke til esc_url()-kallet: escaping av URL-en er obligatorisk av sikkerhetshensyn. Du kan erstatte addtocartbutton-klassen med din egen hvis du ønsker tilpassede stiler.

Trinn 3: sett tilbake «Add to Cart»-knappen ved siden av

«Add to Cart»-knappen er fortsatt nødvendig på butikksiden; uten den kan ikke kunder legge produkter direkte i handlekurven. Men nå må den vises ETTER «Read More»-knappen. For å oppnå dette registrerer vi den native behandleren med prioritet 20 (etter vår knapp med prioritet 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
}

Vi pakker add_action inn i after_setup_theme-hooken av samme grunn som fjerningen: WooCommerce er kanskje ikke lastet når functions.php kjøres. Prioritet 20 plasserer «Add to Cart» strengt etter «Read More» (prioritet 10).

Resultat: under hvert produkt på butikksiden har du nå to knapper. Først «Read More», deretter «Add to Cart».

Videoen demonstrerer en alternativ tilnærming som legger til tilpassede knapper på enkeltprodukter og på hele butikksiden. Prinsippet med å jobbe med hooker er det samme som vi dekket ovenfor.

Hva som går galt med utsolgte produkter

Koden ovenfor fungerer perfekt for produkter som er på lager. Men for utsolgte varer oppstår det en konflikt: WooCommerce erstatter automatisk «Add to Cart»-knappen med «Read More» for slike produkter. Resultatet er TO «Read More»-knapper på rad: vår tilpassede og WooCommerce-erstatningen.

Problemet ligger ikke i vår kodelogikk; dette er hvordan WooCommerce-kjernen er designet. Standardfunksjonen woocommerce_template_loop_add_to_cart rendrer en «Read More»-lenke i stedet for «Add to Cart»-knappen for utsolgte varer. Vår tilpassede «Read More»-knapp forblir, så vi får en duplikat.

Trinn 4: fjern den ekstra knappen med jQuery

Den mest rett frem måten å fjerne duplikatknappen på er jQuery. Skriptet finner lenken som inneholder teksten «Read More» som ligger inne i standard WooCommerce span-container og fjerner den:

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

Skriptet gjør to ting. For det første, ved sidelasting, fjerner det alle lenker med product_type_simple-klassen som inneholder teksten «Read More». For det andre fester det en behandler til WooCommerce-filterets tilbakestillingsknapp (woof_reset_search_form) fordi etter AJAX-filtrering oppdateres DOM-en og duplikater dukker opp igjen.

Plasser jQuery-koden i en separat .js-fil og last den inn via wp_enqueue_script i functions.php, eller lim den inn i «Custom JavaScript»-feltet i temaet ditt eller en plugin som Simple Custom CSS and JS.

Alternativ tilnærming: et filter i stedet for fjerning

Hvis du foretrekker å unngå jQuery, finnes det en mer elegant metode: woocommerce_product_is_in_stock-filteret. Det sjekker produkttilgjengelighet før den tilpassede knappen sendes ut:

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()-metoden returnerer false for utsolgte produkter, så knappen vår rendres rett og slett ikke. WooCommerce viser sin egen «Read More» for slike produkter. For varer på lager fungerer begge knappene som tiltenkt. Denne tilnærmingen er renere: ingen JS, færre filterkonflikter.

Hvilken variant du velger, avhenger av butikken din. jQuery er mer universelt (fungerer med alle filtreringspluginer), mens PHP-filteret er lettere og raskere.

⁉️🤔 Ofte stilte spørsmål

Koden fungerer ikke, og knappene vises ikke. Hva er galt?

Først, sørg for at koden ligger i BARNEtemaets functions.php, ikke i hovedtemaet (hovedtemaet overskrives ved oppdateringer). For det andre, sjekk at WooCommerce er aktivt og oppdatert til siste versjon. For det tredje, sjekk om temaet ditt overstyrer woocommerce_after_shop_loop_item-hooken. Noen temaer erstatter produktkortmalen fullstendig, og WooCommerce-hooker fyres ikke av i den.

Kan jeg endre «Read More»-knappeteksten til noe annet?

Ja. I replace_add_to_cart()-funksjonen, erstatt strengen 'Read More' i <a>-taggens attributter med den teksten du trenger, for eksempel «Vis», «Velg» eller «Beskrivelse». Teksten er statisk og påvirker ikke funksjonaliteten.

Hvorfor bruker jQuery-selektoren product_type_simple?

Fordi WooCommerce tildeler forskjellige klasser til knapper avhengig av produkttype: product_type_simple for enkle produkter, product_type_variable for variable. Hvis butikken din har utsolgte variable produkter, legg til en ekstra selektor for product_type_variable eller bruk en mer generell a.button.ajax_add_to_cart.

Er det trygt å sette inn PHP-kode i functions.php?

Det er trygt under to forutsetninger. For det første, ta sikkerhetskopi av functions.php før redigering (eller bruk et barnetema slik at originalen forblir intakt). For det andre, sett inn kode via FTP/SFTP eller adminpanelets «Utseende → Temaredigering» i stedet for via snippet-pluginer med autoloading. Hvis en syntaksfeil oppstår, vil WordPress vise en hvit skjerm, og det er enklere å gjenopprette filen via FTP.

Knappene ser ikke ut som temaets native knapper. Hvordan styler jeg dem?

button-klassen i <a>-taggen gir grunnleggende WooCommerce-stiler. Hvis knappen fortsatt ser annerledes ut, overstyrer temaet ditt sannsynligvis knappeselektorer mer spesifikt (for eksempel .products .button i stedet for bare .button). Kopier CSS-klassene fra den native «Add to Cart»-knappen ved hjelp av nettleserens inspector og legg dem til i class-attributtet til din tilpassede lenke.

Hva du bør bruke i 2026: kode eller en plugin?

Valget mellom tilpasset kode og en plugin avhenger av tre faktorer. Hvis du justerer en enkelt knapp på butikksiden og ønsker å unngå plugin-oppblåsing, er koden fra denne artikkelen tilstrekkelig. Den tilfører null vekt i admin, skaper ingen ekstra databasespørringer og ødelegges ikke ved WooCommerce-oppdateringer (woocommerce_after_shop_loop_item- og woocommerce_template_loop_add_to_cart-hookene har vært stabile siden versjon 3.0).

Men hvis du trenger å endre knappeatferd på forskjellige sider eller for ulike produktkategorier, er pluginer verdt å vurdere: YITH WooCommerce Customize My Account Page tilbyr en visuell knapperedigerer, og WooCommerce Product Add-Ons lar deg legge til egendefinerte felt før kjøp.

Start med kode. Det er gratis, transparent og fullstendig under din kontroll. Hvis du trenger mer senere, gå over til pluginer, nå med en klar forståelse av nøyaktig hvilke funksjoner du trenger.