Wie füge ich mit Hooks Symbole zu Checkout-Tags hinzu?
Lesezeit: 13 Minuten
gemita
Wie kann ich neben der Checkout-Seite von WooCommerce ein Symbol hinzufügen? Input -Tag, das beim Antippen ein anzeigt Tooltip mit Text?
So bearbeiten Sie die Kasse inputs mit hooks im WooCommerce?
Ich möchte ein Symbol in den Rechnungsdetails in der Telefonfeldeingabe hinzufügen, das ist billing_phonein der WooCommerce-Kasse, so dass, wenn wir es berühren oder darüber schweben, die Tooltip wird einen Text anzeigen.
Ich kann keine Möglichkeit finden, die einzelnen zu ändern inputhabe ich gesehen, dass ich mit dem Hook Elemente vor dem Abrechnungsbereich hinzufügen kann woocommerce_before_checkout_billing_form und nach dem Abrechnungsabschnitt mit dem folgenden Haken woocommerce_after_checkout_billing_form
ICH BEARBEITE DIE FRAGE
Mit Hilfe von @Mtxz gelang es mir, Tests durchzuführen und dank einer seiner Funktionen das Symbol an der Kasse hinzuzufügen.
Das Problem ist, dass das Symbol oben in der angezeigt wird "Billing Details" Formular unter dem Titel. Sie können es im folgenden Bild sehen:
Was muss ich in der @Mtxz-Funktion ändern, damit das Symbol neben dem “Telefon” angezeigt wird? label?
Ich habe versucht, mich an diesem Beispiel bei der Erstellung des zu orientieren function um das zu erreichen, wonach ich suche, aber es funktioniert nicht. Kann ich dem Checkout-Formular Symbole hinzufügen? labels von dem Hooks?
Warum funktioniert die von mir erstellte Funktion nicht? Ich habe gesucht, aber ich kann nicht den richtigen Haken finden, um das Symbol hinzuzufügen, das einen Tooltip neben den Eingabebeschriftungen anzeigt. Wenn dies nicht möglich ist, verwenden Sie Hooksund es gibt kein Plugin, das dies tut, vielleicht kann es durch Bearbeiten einer WooCommerce-Vorlage erfolgen, stelle ich mir so vor.
Welche Vorlage soll angepasst werden?
Du kannst auf jeder WooCommerce-Admin-Seite sehen, wonach ich suche, zum Beispiel in wp-admin => settings => General . Alle Felder haben ein Symbol, das ein Fragezeichen ist und Informationen in einem Tooltip anzeigt, wenn wir das Symbol berühren.
<div class="colocandolo">
<div class="tooltip top">
<img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
<span class="tiptext">
This is the text that we should display
</span>
</div>
</div>
“Ich möchte dies tun, ohne ein Plugin zu verwenden” – Sie müssen noch etwas Code schreiben. Sie müssen sich mit der Hook/Filter-Funktionalität von WP vertraut machen. woocommerce.com/document/…
– CBroe
28. Februar um 9:20 Uhr
Vielen Dank für Ihren Beitrag. Ich werde versuchen, etwas zu tun. Ich bin hierher gekommen, weil ich dachte, Sie hätten Ideen vorgeschlagen wegen der vielen Talente, die durch diesen Ort gehen.
– gemita
28. Februar um 10:08 Uhr
Wenn Sie keine Lösung mit gefunden haben php Funktionen, mit denen Sie es tun können cssnur anstelle eines Symbols fügen wir das Fragezeichen hinzu: "?"neben dem "Phone" Label.
Oder Sie können innerhalb hinzufügen input, mit Ihrem eigenen Beispiel und dem Symbol, wo es Ihnen am besten gefällt. Ich habe es in beide Richtungen gesehen.
Ich würde der gewünschten Eingabe eine benutzerdefinierte Klasse hinzufügen. JS würde verwendet, um den Tooltip auszulösen und Text aus einem benutzerdefinierten HTML-Attribut abzurufen. Diese Lösung ist möglicherweise nicht mit Ihrem Nur-CSS- und benutzerdefinierten HTML-Markup-Tooltip kompatibel.
Woocommerce-Abrechnungseingaben können nicht mit einer Vorlagendatei überschrieben werden. Sie werden aus der generiert woocommerce_form_field() Methode, die für jede Eingabe in aufgerufen wird $checkout->get_checkout_fields( 'billing' ) (form-billing.php).
Mit Blick auf die woocommerce_form_field() Code, ich kann a sehen woocommerce_form_field Hook, mit dem wir die endgültige Eingabe-HTML-Ausgabe bearbeiten können.
Dieser Code bearbeitet die billing_phone HTML-Ausgabe und Inhalt vor dem hinzufügen </p> (also am Ende, aber IN der Eingabe “Top-Level”-Container). Sie können hier Ihren Tooltip hinzufügen und die Positionierung mit etwas wie handhaben position: relative auf dem übergeordneten Container und absolute Positionierung auf dem Tooltip.
Sie können den Wert “$field” ausgeben, um Ihren Eingabe-HTML zu überprüfen, und den Regex-Teil anpassen.
Hinweis: Ich habe zuerst versucht, das Ganze zu wickeln $field HTML in einem benutzerdefinierten <div>. Aber es endete damit, dass mein Formularraster durchbrochen wurde (was möglicherweise spezifisch für meine Implementierung in meiner Testumgebung ist). Also habe ich eine Regex verwendet, um den benutzerdefinierten HTML-Code in den Eingabecontainer einzufügen.
Wie sollte ich die HTML-Struktur woocommerce_form_field ändern?
Fügen Sie den Checkout-Feldern von WooCommerce eine benutzerdefinierte CSS-Klasse hinzu
Die Sache ist die: Mit benutzerdefinierten Attributen können Sie der Eingabe nur HTML-Attribute hinzufügen. Ihr benutzerdefinierter Tooltip hat ein benutzerdefiniertes HTML-Markup: Sie müssen also den benutzerdefinierten Tooltip-HTML-Code zum Eingabecontainer hinzufügen, um ihn darüber anzuzeigen. Daraus würde ich Option 2 wählen. Fügen Sie den Code für Option 2 zu Ihrer Theme-Datei function.php hinzu. Prüfen Sie, ob der Text „Zusätzlicher Inhalt“ neben der Eingabe von billing_phone auf der Woo-Checkout-Seite angezeigt wird. Wenn ja: Hier können Sie Ihren Tooltip-HTML hinzufügen. Wenn nicht: Legen Sie die Variable „$content“ in der „if“-Anweisung ab, um zu prüfen, wie die Regex aktualisiert wird.
– Mtxz
3. März um 15:00 Uhr
Wie gesagt, sobald Sie den Tooltip-Inhalt im Eingabecontainer ausgegeben haben: Sie können CSS verwenden, um Ihren Tooltip zu positionieren. Satz position: relative zum Eingangscontainer. Dann einstellen position: absolute im Tooltip . Dann sollten Sie in der Lage sein, Ihren Tooltip an beliebiger Stelle im Eingabecontainer zu positionieren. Sie können auch den Z-Index verwenden, um den Tooltip “über” der Eingabe zu platzieren.
– Mtxz
5. März um 10:56
Ah sorry: der Tooltip wird nicht im Eingabecontainer ausgegeben? Haben Sie versucht, die $content-Variable zu sichern, um sicherzustellen, dass preg_replace mit Ihrem HTML-Inhalt übereinstimmt?
– Mtxz
5. März um 10:58
Erster Schritt: Können Sie die Variable “$content” innerhalb des “if ( $key === ‘billing_phone’ )” bitte var_dumpen
– Mtxz
6. März um 18:02 Uhr
ok, wir sehen also, dass Ihre Eingabe in ein -Tag eingeschlossen ist. Bearbeiten Sie also preg_replace wie folgt: “preg_replace(‘/<\/strong>/’, $content . ‘‘, $field);” und bitte testen
– Mtxz
7. März um 20:03 Uhr
Ich habe Ihre Funktion wie folgt geändert (indem ich eine CSS-Klasse an das Label angehängt und den Label-Inhalt durch ein HTML-Symbol und einen Tooltip ersetzt habe):
add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 10, 4 );
function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
if ( $key === 'billing_phone' ) {
$args['label_class'] .= ' checkout-tooltip'; // add CSS class to label
$content="<img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px" class="tooltip-icon"/>
<span class="tooltip-text">Esto es un texto</span>";
// add the icon and tooltip to the label
$field = str_replace( '<label', '<label data-tooltip="' . esc_attr__( 'Phone tooltip', 'your-text' ) . '"', $field );
$field = str_replace( '<label', '<label class="checkout-tooltip-label"', $field );
$field = str_replace( '</label>', $content . '</label>', $field );
$field = str_replace( '<input', '<input aria-describedby="billing_phone_tooltip"', $field );
}
return $field;
}
Ich habe das obige in einem Woocommerce-Shop getestet und es funktioniert wie erwartet.
Verwendet CSS, um es standardmäßig auszublenden und beim Hover anzuzeigen.
Danke für deine Unterstützung @AmanHirani . Ich habe Ihre Funktion zu meiner Website hinzugefügt, aber sie funktioniert nicht. Das Symbol wird nicht angezeigt und der Text wird direkt angezeigt. Sehen der Screenshot für sich selbst. Wie Sie sehen können, wird bei Ihrer Funktion im Inspektor nicht einmal das Symbol angezeigt. Ich verwende ein CSS, vielleicht verwenden Sie ein anderes und deshalb wird das Symbol nicht angezeigt und der Text wird direkt in der Eingabe angezeigt. Mein CSS ist anders als deins, vielleicht ist das das Problem. Wie kann ich es korrigieren? Sie können meine Stile im Beispiel sehen, die ich verwende und der Frage hinzugefügt habe. Danke
– gemita
7. März um 8:12
Idealerweise sollten sowohl das Symbol als auch der Text über dem Telefoneingabeblock angezeigt werden. Ich vermute, es könnte ein Problem mit dem HTML-Code sein, der zum Anzeigen des Symbols verwendet wird (da der Text angezeigt wird). Verwenden Sie stattdessen HTML-Unicode-Zeichen wie unten: $content = ‘❓Esto es un texto‘;
– Aman Hirani
8. März um 0:50
Hier ist der aktualisierte Screenshot (ibb.co/gwLkPK6) mit einfachem CSS, um Text beim Hover anzuzeigen.
– Aman Hirani
8. März um 0:57
Danke noch einmal. Ich habe alle von Ihnen vorgeschlagenen Änderungen vorgenommen, ich habe diesen Code auf einer sauberen Website getestet, ohne weitere Funktionen in der Datei function.php, ich habe das CSS hinzugefügt, das Sie im Screenshot zeigen, aber nur die Frage ” ?” und den Text “Dies ist ein Text” innerhalb der Eingabe, ohne dass die Frage eine Funktionalität hat. Ich denke, ich werde nach einer anderen Alternative suchen. Es tut mir leid für die Zeit, die Sie aufgewendet haben, um mir zu helfen, und ich bin Ihnen sehr dankbar.
– gemita
8. März um 8:35
Stefan
ok, Sie können dies tun, indem Sie den folgenden Code in Ihre functions.php einfügen
Dieser Code setzt voraus, dass Sie das FontAwesome-Icons-Paket haben und zeigt das Icon neben Ihrer Telefonnummer an. Wenn Sie den Mauszeiger darüber bewegen, wird ein benutzerdefinierter Text angezeigt wie hier.
Sie sollten ein Symbol oder ein “X” sehen. Wenn Sie eine tolle Schriftart haben, entfernen Sie das x und Sie haben nur das Symbol.
Genießen.
Silber
Dies erreichen Sie einfach mit reinem jQuery und CSS
Der standardmäßige SVG-Titel wird beim Hover angezeigt. Sie können ihn entfernen, wenn Sie möchten, und die Spanne verwenden .title stattdessen
Vielen Dank für Ihr Interesse, ich vermeide es lieber, Javascript zu verwenden. Danke
– gemita
9. März um 17:46 Uhr
Trotzdem zeigt Ihr Code nur das Symbol an, er führt den Tooltip nicht aus
– gemita
9. März um 17:51 Uhr
@gemita, woocommerce funktioniert ohne Javascript nicht richtig, es macht keinen Sinn, es zu vermeiden, wenn jQuery selbst in den WordPress-Kern eingebettet ist. Wie auch immer, Sie können sehen, dass ich das CSS des Hover-Ereignisses kommentiert habe, um die Spanne anzuzeigen .title zugunsten von SVG title beim Schweben angezeigt
– Silber
9. März um 23:58 Uhr
Versuchen Sie, diesen Code in Ihrem Thema zu verwenden functions.php die zu platzieren icon:
add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 99, 4 );
function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
if ( $key == 'billing_phone' ) {
$content="<span class="tooltip top" style="display:inline-block">
<img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
<span class="tiptext">
Esto es un texto
</span>
</span>";
$field = preg_replace('/<\/label>/ism', "$content</label>", $field);
}
return $field;
}
Ich habe Ihr CSS nicht korrigiert, wenn es hilfreich war, würde ich Ihnen auch gerne mit CSS helfen.
Vielen Dank für Ihr Interesse, ich vermeide es lieber, Javascript zu verwenden. Danke
– gemita
9. März um 17:46 Uhr
Trotzdem zeigt Ihr Code nur das Symbol an, er führt den Tooltip nicht aus
– gemita
9. März um 17:51 Uhr
@gemita, woocommerce funktioniert ohne Javascript nicht richtig, es macht keinen Sinn, es zu vermeiden, wenn jQuery selbst in den WordPress-Kern eingebettet ist. Wie auch immer, Sie können sehen, dass ich das CSS des Hover-Ereignisses kommentiert habe, um die Spanne anzuzeigen .title zugunsten von SVG title beim Schweben angezeigt
– Silber
9. März um 23:58 Uhr
14464600cookie-checkWie füge ich mit Hooks Symbole zu Checkout-Tags hinzu?yes
“Ich möchte dies tun, ohne ein Plugin zu verwenden” – Sie müssen noch etwas Code schreiben. Sie müssen sich mit der Hook/Filter-Funktionalität von WP vertraut machen. woocommerce.com/document/…
– CBroe
28. Februar um 9:20 Uhr
Vielen Dank für Ihren Beitrag. Ich werde versuchen, etwas zu tun. Ich bin hierher gekommen, weil ich dachte, Sie hätten Ideen vorgeschlagen wegen der vielen Talente, die durch diesen Ort gehen.
– gemita
28. Februar um 10:08 Uhr