Hinweis – Zahlungsmöglichkeiten in WooCommerce

Um einen Hinweis auf der Seite mit den Zahlungsmöglichkeiten in WooCommerce hinzuzufügen, musst du eine kleine Codeänderung vornehmen. Hier sind die Schritte, die du befolgen kannst:

• Gehe zu deinem WordPress-Dashboard und klicke auf “Design” > “Theme-Editor”.
• Wähle dein aktives Theme aus der Liste der verfügbaren Themes aus.
• Klicke auf “functions.php” in der Seitenleiste.
• Scrolle bis zum Ende der Datei und füge den folgenden Code hinzu:

add_action( 'woocommerce_review_order_before_payment', 'add_payment_notice' );

function add_payment_notice() {
   echo '<div class="ccore-error-box"><p>Bitte beachten Sie, dass Zahlungen per Überweisung erst nach Eingang des Betrags auf unserem Konto bearbeitet werden.</p></div>';
}

• Speichere die Änderungen.

Dieser Code fügt einen Hinweis auf der Seite mit den Zahlungsmöglichkeiten hinzu, der besagt, dass Überweisungen erst nach Eingang des Betrags auf deinem Konto bearbeitet werden. Du kannst den Text an deine Bedürfnisse anpassen, indem du den Text zwischen den <p>-Tags änderst.

Bitte beachte, dass Änderungen am Code direkt am Theme vorgenommen werden. Bei Aktualisierungen des Themes können diese Änderungen verloren gehen. Es ist daher ratsam, eine Sicherungskopie des Codes zu erstellen oder ein Child-Theme zu verwenden, um Anpassungen an deiner Website vorzunehmen.

Style in DIVI

Hier ist der CSS-Code, der eine Fehlerbox mit rotem Hintergrund, weißer Schrift und einem Ausrufezeichen als Divi-Icon links davon erstellt:

.ccore-error-box {
  background-color: #ff5c5c;
  color: #fff;
  padding: 20px;
  position: relative;
  display: flex;
  align-items: center;
}

.ccore-error-box::before {
  content: '\e937';
  font-family: 'ETmodules';
  font-size: 24px;
  margin-right: 10px;
  color: #fff;
}

Hier verwende ich das Pseudo-Element ::before, um das Divi-Icon an der linken Seite der Fehlerbox zu platzieren. Der Unicode-Wert \e937 ist das Codepoint für das Divi-Icon ‘et-alert’, das als Ausrufezeichen dargestellt wird. Die Schriftart ‘ETmodules’ wird benötigt, um das Divi-Icon korrekt anzuzeigen.

Du kannst diese CSS-Regeln in die CSS-Datei deines Child-Themes oder in das benutzerdefinierte CSS-Feld in den Theme-Optionen einfügen, um den Stil für alle Elemente mit der Klasse .ccore-error-box anzuwenden.