¿Cómo agregar íconos a las etiquetas de pago usando Hooks?

¿Cómo puedo agregar un ícono al lado de la página de pago de WooCommerce? Input etiqueta, que cuando se toca muestra un Tooltip con texto?

Cómo editar el pago inputs con hooks en WooCommerce?

Quiero agregar un ícono dentro de los detalles de facturación, en la entrada del campo de teléfono, que es billing_phoneen el pago de WooCommerce, de modo que cuando lo toquemos o pasemos el mouse sobre él, el Tooltip mostrará un texto.

no encuentro la forma de modificar cada uno inputhe visto que puedo añadir elementos antes del apartado Facturación con el Hook woocommerce_before_checkout_billing_form y después del apartado de Facturación con el siguiente Hook woocommerce_after_checkout_billing_form

EDITO LA PREGUNTA

Con la ayuda de @Mtxz logré hacer pruebas y gracias a una de sus funciones logré agregar el ícono al finalizar la compra.

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;
}

el problema es que el icono se muestra en la parte superior de la "Billing Details" formulario, debajo del título. Puedes verlo en la siguiente imagen:

Que necesito cambiar en la funcion @Mtxz para que se muestre el icono al lado del “Teléfono” label?

He probado este ejemplo para guiarme en la creación del function para lograr lo que busco, pero no funciona ¿Puedo agregar íconos al formulario de Pago? labels desde el Hooks?

¿Por qué no funciona la función que creé? He buscado, pero no puedo encontrar el enlace correcto para agregar el icono que muestra una información sobre herramientas junto a las etiquetas de entrada. Si esto no se puede hacer usando Hooksy no hay un complemento que lo haga, tal vez se pueda hacer editando una plantilla de WooCommerce, me imagino que sí.

¿Cuál es la plantilla que se debe personalizar?

Puede ver lo que estoy buscando en cualquier página de administración de WooCommerce, por ejemplo, en wp-admin => settings => General. Todos los campos tienen un icono que es un signo de interrogación y muestra información en un Tooltip cuando tocamos el icono.

También he añadido una captura de pantalla.
https://ibb.co/5Y2k2PL

ingrese la descripción de la imagen aquí

Creé una pequeña demostración con html y css, pero no sé cómo puedo implementar esto en WooCommerce

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

intenta usar este código en tu tema functions.php para colocar el 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;
}

No arreglé tu CSS si fue útil. Estaría feliz de ayudarte con CSS también.

Veo dos formas de manejar esto:

1. Usando Clase CSS y JS

Agregaría una clase personalizada a la entrada deseada. JS se usaría para activar la información sobre herramientas y recuperar texto de un atributo HTML personalizado. Es posible que esta solución no sea compatible con su CSS solo + información sobre herramientas de marcado HTML personalizado.

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;
}

2. Editar salida HTML de Woocommerce

La entrada de facturación de Woocommerce no se puede anular usando un archivo de plantilla. Se generan a partir de la woocommerce_form_field() método, que se llama para cada entrada en $checkout->get_checkout_fields( 'billing' ) (form-billing.php).

Mirando a la woocommerce_form_field() código, puedo ver un woocommerce_form_field gancho que nos permite editar la salida HTML de entrada final.

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;
}

Este código editará el billing_phone Salida HTML y agregue contenido antes del </p> (así que al final, pero EN el contenedor de “nivel superior” de entrada). Puede agregar su información sobre herramientas aquí y manejar el posicionamiento con algo como position: relative en el contenedor principal y el posicionamiento absoluto en la información sobre herramientas.

Puede volcar el valor “$field” para verificar su HTML de entrada y adaptar la parte de expresiones regulares.

Nota: primero traté de envolver todo $field HTML en una costumbre <div>. Pero terminó rompiendo mi cuadrícula de formulario (que puede ser específica de mi implementación en mi entorno de prueba). Así que usé una expresión regular para inyectar el código HTML personalizado en el contenedor de entrada.

Ver:

• https://woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
• ¿Cómo debo cambiar la estructura HTML de woocommerce_form_field?
• Agregue una clase css personalizada a los campos de pago de WooCommerce

Modifiqué (agregando una clase CSS a la etiqueta y reemplazando el contenido de la etiqueta con un ícono HTML y una información sobre herramientas) su función de la siguiente manera:

 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;
}

He probado lo anterior en una tienda de woocommerce y funciona como se esperaba.

Usó CSS ​​para ocultarlo de forma predeterminada y mostrarlo al pasar el mouse.

ok, puede hacer esto agregando el siguiente código en su functions.php

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 );

Este código supone que tiene un paquete de iconos de FontAwesome y mostrará el icono junto a su número de teléfono. Si pasas el cursor sobre él, aparecerá un texto personalizado. como aquí.

Debería ver un icono o una “X”. Si tiene una fuente impresionante, elimine la x y solo tendrá el ícono.

Disfrutar.

Simplemente puede lograr esto con puro jQuery y 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
    }
});

el título SVG predeterminado se mostrará al pasar el mouse, puede eliminarlo si lo desea y usar el lapso .title en cambio

Si no encontró una solución con php funciones, puedes hacerlo con csssolo que en lugar de un ícono, agregamos el signo de interrogación: "?"al lado de "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;
 }

O puede agregar dentro del input, con tu propio ejemplo, y el icono, donde más te guste. Lo he visto de las dos formas.

Espero que sea útil

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;
 }