Wie man den „Zum Warenkorb hinzufügen“ Button in WooCommerce zu „Produkt ansehen“ ändert

WooCommerce ist eines der beliebtesten E-Commerce-Plugins für WordPress und bietet eine Vielzahl von Funktionen. Manchmal möchtest du jedoch über die Standardoptionen hinausgehen und individuelle Anpassungen vornehmen, wie zum Beispiel den „Zum Warenkorb hinzufügen“-Button in deinem Shop-Archiv in „Produkt ansehen“ zu ändern. In diesem Blogbeitrag zeigen wir dir, wie du dies mithilfe von benutzerdefiniertem PHP-Code und dem Plugin WPCode Lite erreichst, ohne dein Theme oder ein Child Theme bearbeiten zu müssen.

Warum den Button ändern?

Standardmäßig zeigt WooCommerce im Shop-Archiv einen Button „Zum Warenkorb hinzufügen“. Das ist zwar praktisch, doch für viele Shops ist es besser, wenn Kunden zuerst die Produktseite besuchen und die Details ansehen, bevor sie einen Artikel in den Warenkorb legen. Indem du den Button-Text zu „Produkt ansehen“ änderst, kannst du die Benutzerführung verbessern und den Fokus auf die Produktinformationen legen.

Schritt 1: Das WPCode Lite Plugin installieren

Anstatt den Code direkt in die functions.php deines Themes einzufügen, verwenden wir das Plugin WPCode Lite (früher bekannt als Insert Headers and Footers). Es ermöglicht dir, benutzerdefinierten Code sicher und einfach in deine WordPress-Website einzufügen, ohne dein Theme zu bearbeiten.

So installierst du das Plugin:

1. Gehe in dein WordPress-Dashboard.
2. Navigiere zu Plugins > Installieren und suche nach „WPCode Lite“.
3. Installiere und aktiviere das Plugin.

Schritt 2: PHP Code hinzufügen, um den Button zu ändern

Sobald WPCode Lite installiert ist, kannst du den benutzerdefinierten PHP-Code hinzufügen, um den Button-Text im WooCommerce-Archiv zu ändern.

1. Gehe in deinem WordPress-Dashboard zu Code Snippets > Add Snippet.
2. Klicke auf Add Your Custom Code (PHP).
3. Gib dem Snippet einen Namen wie „Ändere WooCommerce Button zu Produkt ansehen“.
4. Füge den folgenden Code in das Code-Feld ein:

// Replace add to cart button by a linked button to the product in Shop and archives pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 10, 2 );
function replace_loop_add_to_cart_button( $button, $product  ) {
    // Not needed for variable products
    if( $product->is_type( 'variable' ) ) return $button;

    // Button text here
    $button_text = __( "Produkt ansehen", "woocommerce" );

    return '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}

5. Unterhalb des Code-Feldes findest du die Option „Run snippet everywhere“ (Code überall ausführen). Aktiviere diese Option.
6. Klicke auf Speichern und aktiviere das Snippet.

Erklärung des Codes:

• add_filter(‚woocommerce_loop_add_to_cart_link‘, ‚custom_change_add_to_cart_button‘, 10, 2): Diese Funktion erlaubt es uns, den WooCommerce-Button zu modifizieren. Wir verwenden den Hook woocommerce_loop_add_to_cart_link, um den Button auf der Shop-Seite zu überschreiben.
• $product->is_type(’simple‘): Der Code prüft, ob das Produkt ein einfaches Produkt ist, bevor der Button geändert wird. Du kannst dies anpassen, um auch variable oder andere Produkttypen zu berücksichtigen.
• get_permalink($product->get_id()): Diese Funktion holt sich die URL der Produktseite, sodass der Button darauf verlinkt wird.
• $button_text = __(‚Produkt ansehen‘, ‚woocommerce‘): Hier legen wir fest, dass der Button den Text „Produkt ansehen“ anzeigt.

Schritt 3: Änderungen überprüfen

Nachdem du den Code hinzugefügt und aktiviert hast, lade deine Shop-Seite neu. Anstelle des „Zum Warenkorb hinzufügen“-Buttons sollte nun der Button „Produkt ansehen“ erscheinen, der auf die Produktseite verlinkt.

Fazit

Mit dem WPCode Lite Plugin kannst du benutzerdefinierten PHP-Code einfach und sicher zu deiner WooCommerce-Seite hinzufügen, um den Button „Zum Warenkorb hinzufügen“ im Shop-Archiv in „Produkt ansehen“ zu ändern. Diese Anpassung sorgt dafür, dass deine Kunden zuerst die Produktseite besuchen, bevor sie ein Produkt in den Warenkorb legen. Dies kann zu besseren Kaufentscheidungen und einem besseren Nutzererlebnis führen.

Wenn du Fragen zu diesem Tutorial hast oder Unterstützung bei der Implementierung benötigst, hinterlasse uns gerne einen Kommentar oder kontaktiere uns direkt.