Wie füge ich mit Hooks Symbole zu Checkout-Tags hinzu?

Lesezeit: 13 Minuten

Benutzeravatar von gemita
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.

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' ) {
        $content="<strong>
        <div class="colocandolo">
        <div class="tooltip top">
         <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
          <span class="tiptext">
           Esto es un texto
            </span>
          </div>
        </div>
    </strong>";
$field = preg_replace('/<\/p>/', $content . '</p>', $field);
    }

    return $field;
}

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:

Geben Sie hier die Bildbeschreibung ein

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.

Ich habe auch einen Screenshot hinzugefügt
https://ibb.co/5Y2k2PL

Geben Sie hier die Bildbeschreibung ein

Ich habe eine kleine Demo mit HTML und CSS erstellt, aber ich weiß nicht, wie ich das in WooCommerce implementieren kann

.colocandolo{
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted rgb(175, 76, 6); */
}
.tooltip .tiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(93, 69, 4);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 6px 0;
  position: absolute;
  z-index: 1;
  box-shadow: 0 5px 10px rgb(93, 69, 4);
}
.tooltip .tiptext::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}
.tooltip:hover .tiptext {
  visibility: visible;
}

.tooltip.top .tiptext{
  margin-left: -60px;
  bottom: 150%;
  left: 50%;
}

.tooltip.top .tiptext::after{
  margin-left: -5px;
  top: 100%;
  left: 50%;
  border-color: rgb(93, 69, 4) transparent transparent transparent;
}
<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>

Geben Sie hier die Bildbeschreibung ein

  • “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.

p.form-row:has(>label[for="billing_phone"]) {
  position:relative;
 
 }
 
 p.form-row:has(>label[for="billing_phone"]):after{
  width: 22px;
  height: 22px;
  top: 1px;
  left: 79px;
  border-radius: 50%;
  background-color: #927124;
  content: "?";
  color: #F1EAD6;
  display: block;
  position: absolute;
  display: grid;
  justify-content: center;
  align-items: center;
  font-weight: 900;
 }
 
 
 p.form-row:has(>label[for="billing_phone"]):before{
   display: block;
   content: "This is the text that we should display";
   visibility: collapse;
   width: 120px;
   background-color: rgb(93, 69, 4);
   color: #fff;
   text-align: center;
   border-radius: 3px;
   padding: 10px;
   font-size:0.9em;
   position: absolute;
   z-index: 9990;
   left: 99px;
   top: -13px;
   box-shadow: 0 5px 10px rgb(93, 69, 4);
 }
 
 p.form-row:has(label[for="billing_phone"]):hover:before{
   visibility: visible;
 }
 p.form-row:has(label[for="billing_phone"]:hover, span:hover):before{
   visibility: collapse;
 }

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 hoffe, es ist nützlich

label[for="billing_phone"] + span {
  position:relative;
 }
 
 label[for="billing_phone"] + span > input.input-text {
  padding-right:34px;
 }
 
 label[for="billing_phone"] + span:before{
   width: 24px;
   height: 24px;
   top: -7px;
   right: 8px;
   
   content: "";
    display: block;
   background: url("ttps://i.postimg.cc/ryJxTmp6/marron-Interro.png") no-repeat 0 0;
   background-size: 100%;
   position:absolute;
 }
 
 
 label[for="billing_phone"] + span:after{
   display: block;
   content: " El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido";
   visibility: hidden;
   width: 120px;
   background-color: rgb(93, 69, 4);
   color: #fff;
   text-align: center;
   border-radius: 3px;
   padding: 10px;
   font-size:0.9em;
   position: absolute;
   z-index: 9990;
   right:2px;
   top:8px;
   box-shadow: 0 5px 10px rgb(93, 69, 4);
 }
 
 label[for="billing_phone"] + span:hover:has(>input:not(:hover)):after{
    visibility: visible;
 }

Benutzeravatar von Mtxz
Mtxz

Ich sehe zwei Möglichkeiten, damit umzugehen:

  1. Verwenden von CSS-Klassen und JS

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.

add_filter( 'woocommerce_checkout_fields', 'customize_checkout_fields' );

function customize_checkout_fields( $fields ) {
    $fields[ 'billing' ][ 'billing_phone' ][ 'class' ][]           = 'custom-class';
    $fields[ 'billing' ][ 'billing_phone' ][ 'custom_attributes' ] = [
        'data-text' => 'custom text'
    ];

    return $fields;
}
  1. Bearbeiten Sie die Woocommerce-HTML-Ausgabe

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.

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' ) {
        $content="<strong>Additional content</strong>";
        $field = preg_replace('/<\/p>/', $content . '</p>', $field);
    }

    return $field;
}

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.

Sehen:

  • 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.
Geben Sie hier die Bildbeschreibung ein

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

Benutzeravatar von Stefan
Stefan

ok, Sie können dies tun, indem Sie den folgenden Code in Ihre functions.php einfügen

function add_phone_icon_tooltip( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' && is_checkout() ) {
        $icon = '<i class="fas fa-info-circle" data-toggle="tooltip" title="'. esc_attr__( 'Custom tooltip text goes here', 'textdomain' ) . '">X</i>';
        $field = str_replace( '</label>', ' ' . $icon . '</label>', $field );
    }
    return $field;
}
add_filter( 'woocommerce_form_field', 'add_phone_icon_tooltip', 10, 4 );

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.

Benutzeravatar von Silver
Silber

Dies erreichen Sie einfach mit reinem jQuery und CSS

add_action('wp_footer', function() {
    if ( is_checkout() ) { ?>
<style>
    #billing_phone_field .woocommerce-input-wrapper {
        position: relative;
    }
    #billing_phone_field .woocommerce-input-wrapper .tooltip .icon, #billing_phone_field .woocommerce-input-wrapper .tooltip .title {
        position: absolute;
        right: 5px;
        top: 0;
    }
    #billing_phone_field .woocommerce-input-wrapper .tooltip .icon {
        width: 20px;
        height: 20px;
    }
    #billing_phone_field .woocommerce-input-wrapper .tooltip .title {
        top: 20px;
        background: #333;
        color: #fff;
        font-size: 12px;
        padding: 0 10px;
        border-radius: 5px;
        display: none;
    }
    /* #billing_phone_field .woocommerce-input-wrapper .tooltip .icon:hover + .title {
        display: block;
    } */
</style>
<script>
    (function($) {

        const title="This is the text that we should display"
        const toolTip = '<div class="tooltip"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>'+title+'</title><path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg><span class="title">'+title+'</span></div>'

        $('#billing_phone_field').find('.woocommerce-input-wrapper').append(toolTip) 

    })(jQuery)

</script>
<?php
    }
});

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


1446460cookie-checkWie füge ich mit Hooks Symbole zu Checkout-Tags hinzu?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy