Standardsidan för WooCommerce butik visar en enda knapp under varje produkt: "Add to Cart". För de flesta butiker räcker detta. Men om du säljer produkter som kräver efterforskning före köp, räcker inte en ensam "Add to Cart"-knapp till. Kunderna vill öppna produktsidan först, läsa beskrivningen, kontrollera specifikationerna och sedan lägga till i varukorgen därifrån.

Problemet är att WooCommerce inte erbjuder någon inbyggd inställning för "lägg till en Read More-knapp bredvid Add to Cart". Tillägg för denna uppgift är antingen uppblåsta med onödiga funktioner eller i konflikt med ditt tema. Då återstår den beprövade vägen: egen kod i functions.php.

Nedan följer en steg-för-steg-guide. Du får två knappar på butikssidan: "Read More" (länkar till produktsidan) och "Add to Cart" (fungerar som vanligt). Vi tar även upp specialfallet för produkter som inte finns i lager.

💡 Snabb översikt:

• Ta bort standardknappen "Add to Cart" via remove_action
• Lägg till en egen "Read More"-knapp som länkar till produktsidan
• Återställ "Add to Cart"-knappen på en ny plats bredvid "Read More"
• Åtgärda dubblettknappar för produkter som inte finns i lager med jQuery
• Koden placeras i barntemats functions.php, säkert och tilläggsfritt

Hur WooCommerce renderar knappar på butikssidan

WooCommerce matar ut "Add to Cart"-knappen via hooken woocommerce_after_shop_loop_item. Denna hook körs i varje produktkort inom WP_Query-loopen på butikssidan. Funktionen som ansvarar för att lägga till knappen är woocommerce_template_loop_add_to_cart med prioritet 10.

Hooken är kopplad till en action. För att ändra knappuppsättningen arbetar vi direkt med den: ta bort standardhanteraren och lägg till vår egen. Inga ändringar i WooCommerce-mallar krävs, och temat förblir uppdateringsbart.

Steg 1: ta bort standardknappen "Add to Cart"

Första steget är att koppla bort funktionen woocommerce_template_loop_add_to_cart. Placera denna kod i ditt barntemas functions.php eller via tillägget Code Snippets:

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 slår in remove_action i en funktion och kopplar den till hooken init. Du kan inte anropa remove_action direkt i functions.php eftersom WooCommerce kanske inte har initierat sina hookar när temat laddas. Hooken init garanterar att alla actions redan är registrerade.

Efter att du infogat denna kod försvinner "Add to Cart"-knappen från butikssidan. Oroa dig inte: i nästa steg tar vi tillbaka den, nu tillsammans med "Read More".

Steg 2: lägg till en egen "Read More"-knapp

"Read More"-knappen är en länk till produktsidan, formgiven som en vanlig WooCommerce-knapp. Vi använder $product->get_permalink() för att hämta URL:en och do_shortcode för omslaget:

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
}

Funktionen hookar in i samma action woocommerce_after_shop_loop_item med standardprioriteten 10. Den hämtar $product-objektet via global, hämtar produktsidans URL och matar ut en länk med klassen button. WooCommerce plockar automatiskt upp knappstilar från det aktiva temat.

Notera anropet esc_url(): att escape:a URL:en är obligatoriskt av säkerhetsskäl. Du kan ersätta klassen addtocartbutton med din egen om du vill ha anpassade stilar.

Steg 3: återställ "Add to Cart"-knappen bredvid

"Add to Cart"-knappen behövs fortfarande på butikssidan; utan den kan kunderna inte lägga produkter direkt i varukorgen. Men nu måste den visas EFTER "Read More"-knappen. För att uppnå detta registrerar vi den ursprungliga hanteraren med prioritet 20 (efter 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 slår in add_action i hooken after_setup_theme av samma anledning som borttagningen: WooCommerce kanske inte är laddat när functions.php körs. Prioritet 20 placerar "Add to Cart" strikt efter "Read More" (prioritet 10).

Resultat: under varje produkt på butikssidan har du nu två knappar. Först "Read More", sedan "Add to Cart".

Videon demonstrerar ett alternativt tillvägagångssätt som lägger till anpassade knappar till enskilda produkter och till hela butikssidan. Principen för att arbeta med hookar är densamma som vi gått igenom ovan.

Vad som går fel med produkter som inte finns i lager

Koden ovan fungerar perfekt för produkter som finns i lager. Men för varor som inte finns i lager uppstår en konflikt: WooCommerce ersätter automatiskt "Add to Cart"-knappen med "Read More" för sådana produkter. Resultatet blir TVÅ "Read More"-knappar i rad: vår egen och WooCommerce-ersättningen.

Problemet ligger inte i vår kodlogik; det är så här WooCommerce-kärnan är utformad. Standardfunktionen woocommerce_template_loop_add_to_cart renderar en "Read More"-länk istället för "Add to Cart"-knappen för varor som inte finns i lager. Vår egen "Read More"-knapp finns kvar, så vi får en dubblett.

Steg 4: ta bort den extra knappen med jQuery

Det enklaste sättet att ta bort dubblettknappen är jQuery. Skriptet hittar länken som innehåller texten "Read More" och som ligger inuti den vanliga WooCommerce-span-behållaren och tar bort 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 gör två saker. Först, vid sidladdning, tar det bort alla länkar med klassen product_type_simple som innehåller texten "Read More". För det andra kopplar det en hanterare till WooCommerce filteråterställningsknapp (woof_reset_search_form) eftersom DOM:en uppdateras och dubbletter dyker upp igen efter AJAX-filtrering.

Placera jQuery-koden i en separat .js-fil och köa den via wp_enqueue_script i functions.php, eller klistra in den i fältet "Custom JavaScript" i ditt tema eller ett tillägg som Simple Custom CSS and JS.

Alternativ metod: ett filter istället för borttagning

Om du föredrar att undvika jQuery finns en mer elegant metod: filtret woocommerce_product_is_in_stock. Det kontrollerar produkttillgänglighet innan den egna knappen matas 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
}

Metoden $product->is_in_stock() returnerar false för produkter som inte finns i lager, så vår knapp renderas helt enkelt inte. WooCommerce visar sin egen "Read More" för sådana produkter. För varor i lager fungerar båda knapparna som avsett. Denna metod är renare: ingen JS, färre filterkonflikter.

Vilken variant du väljer beror på din butik. jQuery är mer universellt (fungerar med alla filtreringstillägg), medan PHP-filtret är lättare och snabbare.

⁉️🤔 Vanliga frågor

Koden fungerar inte, och knapparna visas inte. Vad är fel?

Kontrollera först att koden finns i BARNTEMATS functions.php, inte i föräldratemat (föräldratemat skrivs över vid uppdateringar). För det andra, verifiera att WooCommerce är aktivt och uppdaterat till senaste versionen. För det tredje, kontrollera om ditt tema åsidosätter hooken woocommerce_after_shop_loop_item. Vissa teman ersätter produktkortsmallen helt, och WooCommerce-hookar körs inte i den.

Kan jag ändra texten på "Read More"-knappen till något annat?

Ja. I funktionen replace_add_to_cart(), ersätt strängen 'Read More' i <a>-taggens attribut med vilken text du behöver, till exempel "Visa", "Välj" eller "Beskrivning". Texten är statisk och påverkar inte funktionaliteten.

Varför använder jQuery-selektorn product_type_simple?

Eftersom WooCommerce tilldelar olika klasser till knappar beroende på produkttyp: product_type_simple för enkla produkter, product_type_variable för variabla. Om din butik har variabla produkter som inte finns i lager, lägg till en andra selektor för product_type_variable eller använd en mer generell a.button.ajax_add_to_cart.

Är det säkert att infoga PHP-kod i functions.php?

Det är säkert under två förutsättningar. För det första, säkerhetskopiera din functions.php innan du redigerar (eller använd ett barntema så att originalet förblir intakt). För det andra, infoga kod via FTP/SFTP eller adminens "Utseende → Temaredigerare" snarare än via snippet-tillägg med autoladdning. Om ett syntaxfel uppstår visar WordPress en vit skärm, och det är enklare att återställa filen via FTP.

Knapparna ser inte ut som mitt temas ursprungliga knappar. Hur formger jag dem?

Klassen button i <a>-taggen ger grundläggande WooCommerce-stilar. Om knappen fortfarande ser annorlunda ut åsidosätter ditt tema troligen knappselektorer mer specifikt (till exempel .products .button istället för bara .button). Kopiera CSS-klasserna från den ursprungliga "Add to Cart"-knappen med hjälp av din webbläsares inspector och lägg till dem i class-attributet på din egen länk.

Vad du bör använda 2026: kod eller ett tillägg?

Valet mellan egen kod och ett tillägg beror på tre faktorer. Om du justerar en enda knapp på butikssidan och vill undvika tilläggsbloat, räcker koden från denna artikel. Den tillför noll tyngd i admin, skapar inga extra databasfrågor och går inte sönder vid WooCommerce-uppdateringar (hookarna woocommerce_after_shop_loop_item och woocommerce_template_loop_add_to_cart har varit stabila sedan version 3.0).

Men om du behöver ändra knappbeteende på olika sidor eller för olika produktkategorier är tillägg värda att överväga: YITH WooCommerce Customize My Account Page erbjuder en visuell knappredigerare, och WooCommerce Product Add-Ons låter dig lägga till anpassade fält före köp.

Börja med kod. Det är gratis, transparent och helt under din kontroll. Om du behöver mer senare, gå över till tillägg, nu med en tydlig förståelse för exakt vilka funktioner du behöver.