← Knowledge-Base · Code-Snippets

Hinweis je nach Zahlungsart im WooCommerce-Checkout anzeigen

Aktualisiert 20.08.2026 · 8 Min Lesezeit

Wer per Vorkasse bestellt, soll erfahren, dass die Ware erst nach Zahlungseingang rausgeht. Wer Nachnahme wählt, soll den Betrag passend bereithalten. Der Code dafür ist kurz — und in den meisten Snippet-Sammlungen so gebaut, dass der Hinweis beim Umschalten der Zahlungsart einfach stehenbleibt.

Dieser Artikel zeigt den Weg ohne Code, den Weg mit Code, den Grund für das eine JavaScript-Stück, das sich nicht vermeiden lässt — und die zwei Dinge, die im Shop nachziehen müssen, damit der Hinweis kein leeres Versprechen wird.

Wofür das gut ist

Zahlungsart-Hinweise sind kein Design-Detail. Sie beantworten eine Frage, die der Kunde sonst per E-Mail stellt — oder gar nicht stellt, sondern den Kauf abbricht:

  • Vorkasse: Wann geht die Ware raus? Wohin überweise ich?
  • Nachnahme: Fällt eine Gebühr an? Muss ich Bargeld bereithalten?
  • Rechnung: Innerhalb welcher Frist ist zu zahlen?
  • Ratenkauf: Was passiert nach dem Klick auf Bestellen?

Bei Vorkasse ist der Effekt am größten, weil dort die Ware nicht sofort rausgeht — und das ist genau die Erwartung, die ein Onlineshop sonst setzt.

Erste Frage: Brauchst du überhaupt Code?

Für den einfachen Fall nicht. Jede Zahlungsart in WooCommerce hat ein Feld Beschreibung, und WooCommerce zeigt sie unter der gewählten Zahlungsart an — inklusive Ein- und Ausblenden beim Wechsel. Zu finden unter WooCommerce → Einstellungen → Zahlungen, dann die Zahlungsart anklicken.

Eigener Code lohnt sich, wenn du:

  • mehrere Zahlungsarten zentral an einer Stelle pflegen willst,
  • den Hinweis prominenter platzieren willst, etwa direkt über dem Bestellbutton,
  • die Texte versioniert im Code haben willst statt verstreut in der Datenbank,
  • oder den Hinweis an Bedingungen knüpfen willst — Bestellwert, Land, Produktkategorie.

Schritt 1: Die Texte an einer Stelle

Alle Hinweise in einer Funktion, damit du sie später nicht in drei Dateien suchst:

function shop_zahlungshinweise() {
    return [
        'bacs' => 'Bitte überweisen Sie den Betrag vorab, damit die Bestellung '
                . 'versendet werden kann. Die Bankdaten dazu erhalten Sie in '
                . 'Ihrer Bestellbestätigung.',
        'cod'  => 'Bitte halten Sie den Betrag bei der Lieferung passend bereit.',
    ];
}

Der Schlüssel ist die ID der Zahlungsart. Die Standard-IDs von WooCommerce lauten bacs für Direktüberweisung, cod für Nachnahme und cheque für Scheckzahlung. Zahlungsarten aus Plugins bringen eigene IDs mit.

Rat nicht, sondern sieh nach: Öffne den Checkout, klick mit der rechten Maustaste auf einen Zahlungsart-Radiobutton, wähle „Untersuchen" und lies das value-Attribut ab. Eine falsch geratene ID führt zu keinem Fehler — der Hinweis erscheint einfach nie.

Schritt 2: Hinweis unter der Zahlungsart

Das ist der robuste Weg. WooCommerce hängt den Text an die Beschreibung der Zahlungsart und übernimmt das Ein- und Ausblenden selbst:

add_filter('woocommerce_gateway_description', function ($description, $gateway_id) {
    $hinweise = shop_zahlungshinweise();
    if (empty($hinweise[$gateway_id])) {
        return $description;
    }
    return $description . '<p class="shop-zahlhinweis-inline">'
        . esc_html($hinweise[$gateway_id]) . '</p>';
}, 10, 2);

Für die meisten Shops ist das der ganze Bedarf. Wenn dir das reicht, kannst du Schritt 3 überspringen.

Schritt 3: Hinweis über dem Bestellbutton

Soll der Hinweis prominenter stehen — dort, wo die Kaufentscheidung fällt —, wird es einen Schritt aufwendiger. Zuerst werden alle Texte versteckt ausgegeben:

add_action('woocommerce_review_order_before_submit', function () {
    $hinweise = shop_zahlungshinweise();
    if (!$hinweise) {
        return;
    }
    echo '<div class="shop-zahlhinweise">';
    foreach ($hinweise as $gateway_id => $text) {
        printf(
            '<div class="shop-zahlhinweis" data-gateway="%s" style="display:none">%s</div>',
            esc_attr($gateway_id),
            esc_html($text)
        );
    }
    echo '</div>';
});

Und dann schaltet ein kurzes Skript den passenden frei:

add_action('wp_footer', function () {
    if (!function_exists('is_checkout') || !is_checkout() || is_order_received_page()) {
        return;
    }
    ?>
    <script>
    (function ($) {
        function zahlhinweisAktualisieren() {
            var gewaehlt = $('input[name="payment_method"]:checked').val();
            $('.shop-zahlhinweis').hide();
            if (gewaehlt) {
                $('.shop-zahlhinweis[data-gateway="' + gewaehlt + '"]').show();
            }
        }
        $(document.body).on('updated_checkout payment_method_selected', zahlhinweisAktualisieren);
        $(document).on('change', 'input[name="payment_method"]', zahlhinweisAktualisieren);
        $(zahlhinweisAktualisieren);
    })(jQuery);
    </script>
    <?php
});

Warum das JavaScript nicht wegzulassen ist

Hier scheitern die meisten Anleitungen. Der naheliegende Gedanke: Man liest serverseitig aus, welche Zahlungsart gewählt ist, und gibt nur den passenden Text aus.

// Sieht richtig aus, bleibt aber beim Umschalten stehen
add_action('woocommerce_review_order_before_submit', function () {
    $gewaehlt = WC()->session->get('chosen_payment_method');
    if ($gewaehlt === 'bacs') {
        echo '<div>Bitte vorab überweisen ...</div>';
    }
});

Das funktioniert beim ersten Laden der Seite und danach nicht mehr. Der Grund: Ein Wechsel der Zahlungsart lädt den Checkout-Bereich nicht zwingend neu. WooCommerce blendet die Zahlungsart-Box um, mehr passiert nicht — es sei denn, die Zahlungsart verändert Gebühren oder Steuern.

Der Kunde wählt also Vorkasse, sieht den Hinweis, wechselt auf Kreditkarte — und der Vorkasse-Hinweis steht weiter da. Schlimmer als kein Hinweis, weil er jetzt falsch ist.

Deshalb: alle Texte ausgeben, per JavaScript umschalten. Der Weg aus Schritt 2 hat dieses Problem nicht, weil WooCommerce die Beschreibungen selbst verwaltet.

Wohin der Code gehört

Nicht in die functions.php des Themes. Beim nächsten Theme-Wechsel ist er weg, ohne Child-Theme überschreibt ihn schon das nächste Theme-Update, und ein Tippfehler dort legt die ganze Seite lahm — inklusive Backend.

Leg stattdessen ein Mini-Plugin an: neue Datei zahlungshinweise.php im Ordner /wp-content/plugins/zahlungshinweise/, oben dieser Kopf, darunter der Code aus den Schritten 1 bis 3:

<?php
/**
 * Plugin Name: Zahlungshinweise im Checkout
 * Description: Zeigt je nach gewaehlter Zahlungsart einen Hinweistext an.
 * Version:     1.0.0
 */

if (!defined('ABSPATH')) {
    exit; // Direktaufruf verhindern
}

// ... hier der Code aus den Schritten 1 bis 3

Danach unter Plugins aktivieren. Vorteil: überlebt jeden Theme-Wechsel, lässt sich mit einem Klick abschalten, wenn etwas klemmt, und ist auffindbar — anders als zwanzig Zeilen am Ende einer functions.php.

Was der Hinweis allein nicht löst

Der wichtigste Abschnitt, gerade beim Vorkasse-Beispiel.

Die Bankdaten müssen wirklich in der Bestätigung stehen

Der Text verspricht: „Die Bankdaten dazu erhalten Sie in Ihrer Bestellbestätigung." WooCommerce gibt die Kontodaten bei Direktüberweisung automatisch aus — aber nur, wenn zwei Bedingungen erfüllt sind: Die Konten sind unter Zahlungen → Direktüberweisung → Bankkonten hinterlegt, und die Bestellung landet im Status In Wartestellung.

Fehlt eines davon, bekommt der Kunde einen Hinweis auf Daten, die nirgends stehen — und schreibt dir eine E-Mail. Einmal mit einer echten Testbestellung durchspielen, bevor der Hinweis live geht.

Die Lieferzeit stimmt nicht mehr

Bei Vorkasse beginnt die Lieferzeit mit dem Zahlungseingang, nicht mit der Bestellung. Steht im Shop „Lieferung in 2–3 Werktagen" und der Kunde überweist erst in drei Tagen, ist die Angabe falsch.

Lieferzeitangaben sind im DACH-Raum abmahnrelevant, deshalb ist das kein Schönheitsfehler. Üblich ist ein Zusatz wie „bei Vorkasse ab Zahlungseingang" — Germanized bringt für Lieferzeiten eigene Einstellungen mit.

Ein Hinweis im Checkout wird einmal gesehen

Für drei Sekunden, unter Zeitdruck, kurz vor dem Klick. Wer sich später fragt, wohin er überweisen soll, schaut nicht in den Checkout — er schaut in die E-Mail.

Der Checkout-Hinweis nimmt die Überraschung vorweg. Die eigentliche Information gehört in die Bestellbestätigung und auf die Danke-Seite. Wie diese Mail formuliert sein muss, damit sie nicht versehentlich zur Vertragsannahme wird, steht in unseren Vorlagen für Shop-E-Mails.

Häufige Fehler

  • Serverseitig ohne JavaScript. Der Hinweis bleibt beim Umschalten stehen und ist dann falsch. Siehe oben.
  • Zahlungsart-ID geraten. Kein Fehler, keine Meldung — der Hinweis erscheint nur nie. Im Quelltext nachsehen.
  • Zu viele Hinweise. Wenn unter jeder Zahlungsart ein Absatz steht, liest niemand mehr einen davon. Nimm die zwei, bei denen es wirklich etwas zu sagen gibt.
  • Der Hinweis verdrängt die Pflichtangaben. Direkt über dem Bestellbutton müssen Artikel, Gesamtpreis und Versandkosten stehen. Ein auffälliger Kasten darf sie nicht optisch überlagern — mehr dazu in Die Button-Lösung richtig umsetzen.
  • HTML in der Beschreibung, das vom Theme wegformatiert wird. Manche Themes stylen die Zahlungsart-Beschreibung stark ein. Prüf das Ergebnis im echten Checkout, nicht im Editor.
  • Text nur im Checkout. Ohne Entsprechung in E-Mail und auf der Danke-Seite verpufft die Information.

Block-Checkout

Schritt 3 gehört zum klassischen Checkout — woocommerce_review_order_before_submit existiert im block-basierten Checkout nicht, der Hinweis erscheint dort schlicht nicht.

Ob der Weg aus Schritt 2 im Block-Checkout mit HTML durchkommt, hängt von deiner WooCommerce-Version ab. Wenn du den Block-Checkout einsetzt, fang mit dem einfachen Weg über die Einstellungen an und prüf im echten Checkout, was ankommt.

Welchen du hast, siehst du im Editor der Checkout-Seite: ein einzelner Block „Checkout" ist der neue, [woocommerce_checkout] der klassische.

Testliste

  1. Zahlungsart wählen: Erscheint der richtige Hinweis?
  2. Auf eine andere Zahlungsart wechseln: Verschwindet der alte Hinweis?
  3. Hin- und herwechseln: Steht am Ende genau ein Hinweis da, nicht zwei?
  4. Testbestellung mit Vorkasse abschließen: Stehen die Bankdaten in der E-Mail?
  5. Danke-Seite ansehen: Stehen sie auch dort?
  6. Auf dem Handy prüfen — der Kasten über dem Button kostet dort mehr Platz als am Desktop.
  7. Passt die Lieferzeitangabe noch zur Vorkasse?

Weiterlesen

Der Code ist für den klassischen WooCommerce-Checkout geschrieben. Test ihn auf einer Staging-Umgebung, bevor er in den Live-Shop geht. Stand: August 2026.

Hat dir dieser Artikel weitergeholfen?

Dann weißt du jetzt, wie wir arbeiten: ehrlich, direkt und ohne Abkürzungen. Wenn dich das überzeugt, freuen wir uns riesig über eine kurze Google-Bewertung. Das dauert keine Minute und hilft uns enorm.

Jetzt auf Google bewerten

Ehrlich verdient statt manipuliert - so muss das.

War diese Anleitung hilfreich?

Fehlt dir etwas oder können wir den Artikel verbessern? Sag es uns.