Die Standard-WooCommerce-Shopseite zeigt unter jedem Produkt eine einzige Schaltfläche: „In den Warenkorb". Für die meisten Shops ist das ausreichend. Wenn Sie jedoch Produkte verkaufen, die vor dem Kauf recherchiert werden müssen, greift eine einzelne „In den Warenkorb"-Schaltfläche zu kurz. Käufer möchten zuerst die Produktseite öffnen, die Beschreibung lesen, die Spezifikationen prüfen und erst von dort aus in den Warenkorb legen.

Das Problem: WooCommerce bietet keine eingebaute Einstellung für „eine ‚Weiterlesen'-Schaltfläche neben ‚In den Warenkorb' hinzufügen". Plugins für diese Aufgabe sind entweder mit unnötigen Funktionen überladen oder verursachen Konflikte mit Ihrem Theme. Damit bleibt der bewährte Weg: eigener Code in functions.php.

Nachfolgend eine Schritt-für-Schritt-Anleitung. Sie erhalten zwei Schaltflächen auf der Shopseite: „Weiterlesen" (verlinkt zur Produktseite) und „In den Warenkorb" (funktioniert wie gewohnt). Wir behandeln auch den Sonderfall für nicht lieferbare Produkte.

💡 Kurzüberblick:

• Entfernen der standardmäßigen „In den Warenkorb"-Schaltfläche via remove_action
• Hinzufügen einer eigenen „Weiterlesen"-Schaltfläche mit Link zur Produktseite
• Zurückholen der „In den Warenkorb"-Schaltfläche an eine neue Position neben „Weiterlesen"
• Beheben doppelter Schaltflächen bei nicht lieferbaren Produkten mit jQuery
• Der Code kommt in die functions.php des Child-Themes, sicher und plugin-frei

Wie WooCommerce Schaltflächen auf der Shopseite ausgibt

WooCommerce gibt die „In den Warenkorb"-Schaltfläche über den Hook woocommerce_after_shop_loop_item aus. Dieser Hook wird in jeder Produktkarte innerhalb der WP_Query-Schleife auf der Shopseite ausgelöst. Die Funktion, die für das Hinzufügen der Schaltfläche zuständig ist, ist woocommerce_template_loop_add_to_cart mit der Priorität 10.

Der Hook ist an eine Action gebunden. Um das Schaltflächen-Set zu ändern, arbeiten wir direkt damit: Wir entfernen den Standard-Handler und fügen unseren eigenen hinzu. Es sind keine Änderungen an WooCommerce-Templates erforderlich, und das Theme bleibt update-fähig.

Schritt 1: Entfernen der standardmäßigen „In den Warenkorb"-Schaltfläche

Der erste Schritt besteht darin, die Funktion woocommerce_template_loop_add_to_cart auszuhaken. Platzieren Sie diesen Code in der functions.php Ihres Child-Themes oder über das Plugin 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' );

Wir verpacken remove_action in eine Funktion und hängen diese an den init-Hook. Sie können remove_action nicht direkt in der functions.php aufrufen, da WooCommerce seine Hooks möglicherweise noch nicht initialisiert hat, wenn das Theme geladen wird. Der init-Hook garantiert, dass alle Actions bereits registriert sind.

Nach dem Einfügen dieses Codes verliert die Shopseite die „In den Warenkorb"-Schaltfläche. Keine Sorge: Im nächsten Schritt holen wir sie zurück, nun gepaart mit „Weiterlesen".

Schritt 2: Hinzufügen einer eigenen „Weiterlesen"-Schaltfläche

Die „Weiterlesen"-Schaltfläche ist ein Link zur Produktseite, gestaltet wie eine standardmäßige WooCommerce-Schaltfläche. Wir verwenden $product->get_permalink(), um die URL zu erhalten, und do_shortcode für den Wrapper:

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
}

Die Funktion hängt sich in dieselbe Action woocommerce_after_shop_loop_item mit der Standard-Priorität 10 ein. Sie holt das $product-Objekt via global, ermittelt die URL der Produktseite und gibt einen Link mit der Klasse button aus. WooCommerce übernimmt automatisch die Schaltflächenstile des aktiven Themes.

Beachten Sie den Aufruf von esc_url(): Das Escapen der URL ist aus Sicherheitsgründen zwingend erforderlich. Sie können die Klasse addtocartbutton durch Ihre eigene ersetzen, wenn Sie individuelle Stile wünschen.

Schritt 3: Die „In den Warenkorb"-Schaltfläche daneben zurückholen

Die „In den Warenkorb"-Schaltfläche wird auf der Shopseite weiterhin benötigt; ohne sie können Käufer Produkte nicht direkt in den Warenkorb legen. Sie muss nun aber NACH der „Weiterlesen"-Schaltfläche erscheinen. Um dies zu erreichen, registrieren wir den nativen Handler mit Priorität 20 (nach unserer Schaltfläche mit Priorität 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
}

Wir verpacken add_action aus demselben Grund in den after_setup_theme-Hook wie das Entfernen: WooCommerce ist möglicherweise noch nicht geladen, wenn functions.php ausgeführt wird. Priorität 20 platziert „In den Warenkorb" strikt nach „Weiterlesen" (Priorität 10).

Ergebnis: Unter jedem Produkt auf der Shopseite haben Sie nun zwei Schaltflächen. Zuerst „Weiterlesen", dann „In den Warenkorb".

Das Video demonstriert einen alternativen Ansatz, der einzelnen Produkten und der gesamten Shopseite eigene Schaltflächen hinzufügt. Das Prinzip der Arbeit mit Hooks ist dasselbe, das wir oben behandelt haben.

Was bei nicht lieferbaren Produkten schiefgeht

Der obige Code funktioniert einwandfrei für Produkte, die lieferbar sind. Bei nicht lieferbaren Artikeln entsteht jedoch ein Konflikt: WooCommerce ersetzt bei solchen Produkten automatisch die „In den Warenkorb"-Schaltfläche durch „Weiterlesen". Das Ergebnis sind ZWEI „Weiterlesen"-Schaltflächen hintereinander: unsere eigene und die WooCommerce-Ersetzung.

Das Problem liegt nicht in unserer Code-Logik; so ist der WooCommerce-Core konzipiert. Die Standardfunktion woocommerce_template_loop_add_to_cart gibt für nicht lieferbare Artikel einen „Weiterlesen"-Link anstelle der „In den Warenkorb"-Schaltfläche aus. Unsere eigene „Weiterlesen"-Schaltfläche bleibt bestehen, sodass wir ein Duplikat erhalten.

Schritt 4: Entfernen der überzähligen Schaltfläche mit jQuery

Der direkteste Weg, die doppelte Schaltfläche zu entfernen, ist jQuery. Das Skript findet den Link mit dem Text „Weiterlesen", der sich innerhalb des standardmäßigen WooCommerce-Span-Containers befindet, und entfernt ihn:

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

Das Skript erledigt zwei Dinge. Erstens entfernt es beim Laden der Seite alle Links mit der Klasse product_type_simple, die den Text „Weiterlesen" enthalten. Zweitens hängt es einen Handler an den WooCommerce-Filter-Reset-Button (woof_reset_search_form), da sich nach dem AJAX-Filtern das DOM aktualisiert und Duplikate erneut auftauchen.

Platzieren Sie den jQuery-Code in einer separaten .js-Datei und reihen Sie ihn via wp_enqueue_script in der functions.php ein, oder fügen Sie ihn in das Feld „Custom JavaScript" Ihres Themes oder eines Plugins wie Simple Custom CSS and JS ein.

Alternativer Ansatz: ein Filter statt Entfernung

Wenn Sie jQuery vermeiden möchten, gibt es eine elegantere Methode: den Filter woocommerce_product_is_in_stock. Er prüft die Produktverfügbarkeit, bevor die eigene Schaltfläche ausgegeben wird:

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
}

Die Methode $product->is_in_stock() gibt für nicht lieferbare Produkte false zurück, sodass unsere Schaltfläche schlicht nicht gerendert wird. WooCommerce zeigt für solche Produkte sein eigenes „Weiterlesen" an. Bei lieferbaren Artikeln funktionieren beide Schaltflächen wie vorgesehen. Dieser Ansatz ist sauberer: kein JS, weniger Filterkonflikte.

Welche Variante Sie wählen, hängt von Ihrem Shop ab. jQuery ist universeller (funktioniert mit allen Filter-Plugins), während der PHP-Filter leichter und schneller ist.

⁉️🤔 Häufig gestellte Fragen

Der Code funktioniert nicht, und die Schaltflächen erscheinen nicht. Was ist falsch?

Stellen Sie zunächst sicher, dass der Code in der functions.php des CHILD-Themes steht, nicht im Parent-Theme (das Parent-Theme wird bei Updates überschrieben). Prüfen Sie zweitens, ob WooCommerce aktiv und auf die neueste Version aktualisiert ist. Prüfen Sie drittens, ob Ihr Theme den Hook woocommerce_after_shop_loop_item überschreibt. Manche Themes ersetzen das Produktkarten-Template vollständig, und WooCommerce-Hooks werden darin nicht ausgelöst.

Kann ich den Text der „Weiterlesen"-Schaltfläche in etwas anderes ändern?

Ja. Ersetzen Sie in der Funktion replace_add_to_cart() die Zeichenkette 'Read More' in den Attributen des <a>-Tags durch den von Ihnen gewünschten Text, zum Beispiel „Ansehen", „Auswählen" oder „Beschreibung". Der Text ist statisch und beeinträchtigt die Funktionalität nicht.

Warum verwendet der jQuery-Selektor product_type_simple?

Weil WooCommerce Schaltflächen je nach Produkttyp unterschiedliche Klassen zuweist: product_type_simple für einfache Produkte, product_type_variable für variable Produkte. Wenn Ihr Shop nicht lieferbare variable Produkte hat, fügen Sie einen zweiten Selektor für product_type_variable hinzu oder verwenden Sie einen allgemeineren Selektor wie a.button.ajax_add_to_cart.

Ist es sicher, PHP-Code in functions.php einzufügen?

Es ist unter zwei Bedingungen sicher. Erstens: Sichern Sie Ihre functions.php, bevor Sie sie bearbeiten (oder verwenden Sie ein Child-Theme, damit das Original unberührt bleibt). Zweitens: Fügen Sie Code via FTP/SFTP oder über den Admin-Bereich „Design → Theme-Editor" ein, nicht über Snippet-Plugins mit Autoloading. Sollte ein Syntaxfehler auftreten, zeigt WordPress einen weißen Bildschirm, und die Wiederherstellung der Datei ist via FTP einfacher.

Die Schaltflächen sehen nicht wie die nativen Schaltflächen meines Themes aus. Wie style ich sie?

Die Klasse button im <a>-Tag liefert die grundlegenden WooCommerce-Stile. Wenn die Schaltfläche dennoch anders aussieht, überschreibt Ihr Theme die Schaltflächen-Selektoren wahrscheinlich spezifischer (zum Beispiel .products .button statt nur .button). Kopieren Sie die CSS-Klassen der nativen „In den Warenkorb"-Schaltfläche mit Ihrem Browser-Inspektor und fügen Sie sie dem class-Attribut Ihres eigenen Links hinzu.

Was Sie 2026 verwenden sollten: Code oder ein Plugin?

Die Wahl zwischen eigenem Code und einem Plugin hängt von drei Faktoren ab. Wenn Sie eine einzelne Schaltfläche auf der Shopseite anpassen und Plugin-Ballast vermeiden möchten, ist der Code aus diesem Artikel ausreichend. Er verursacht kein zusätzliches Gewicht im Admin, erzeugt keine zusätzlichen Datenbankabfragen und bricht bei WooCommerce-Updates nicht (die Hooks woocommerce_after_shop_loop_item und woocommerce_template_loop_add_to_cart sind seit Version 3.0 stabil).

Wenn Sie jedoch das Schaltflächenverhalten auf verschiedenen Seiten oder für verschiedene Produktkategorien ändern müssen, sind Plugins eine Überlegung wert: YITH WooCommerce Customize My Account Page bietet einen visuellen Schaltflächen-Editor, und WooCommerce Product Add-Ons ermöglicht es Ihnen, benutzerdefinierte Felder vor dem Kauf hinzuzufügen.

Beginnen Sie mit Code. Es ist kostenlos, transparent und vollständig unter Ihrer Kontrolle. Wenn Sie später mehr benötigen, steigen Sie auf Plugins um, nun mit einem klaren Verständnis darüber, welche Funktionen Sie genau brauchen.