7

¿ Como editar el Checkout de WooCommerce para añadir un Tooltip en iconos en algunos de los input ?

¿Cómo editar los input del checkout con los hook en WooCommerce?

Quiero agregar un icono dentro de los detalles de facturación, junto a la Label en el input de campo de teléfono, a la derecha de "Teléfono" que es billing_phone, en el checkout de WooCommerce, para que cuando lo toquemos o pasemos el mouse sobre él, se Tooltip muestre un texto.

No encuentro la forma de modificar cada input, he visto que puedo añadir elementos delante del apartado de Facturacion con el Hook woocommerce_before_checkout_billing_form y despues del apartado de Facturación con el Hook siguiente woocommerce_after_checkout_billing_form

EDITO LA PREGUNTA

Aun no puedo añadir el icono junto a la etiqueta "Teléfono", pero gracias a la siguiente función, añadi el icono con html, el inconveniente es que se muestra debajo del título, "Detalles de facturación" , el woocommerce-billing-fields

¿ Como debo corregir el siguiente código para conseguir poner el icono a la derecha de "Teléfono? ¿ Seria mejor hacerlo personalizando la plantilla en cuestión de WooCommerce? ¿ Cual es la plantilla que se debe personalizar ?

Esto es lo que conseguí después de ver alguna idea:

add_filter( 'woocommerce_form_field', 'agregar_mi_icono', 10, 4 );

function agregar_mi_icono( $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">
           El número de teléfono es necesario por si acaso surgen problemas con el pedido
         </span>
          </div>
        </div>
    </strong>';
$field = preg_replace('/<\/p>/', $content . '</p>', $field);
    }

    return $field;
}

¿ Porque no funciona la función que yo he creado ? He buscado pero no encuentro el hook adecuado para añadir el icono junto a las etiqueta de "Telefono" Pueden ver que el icono no se añade en el lugar que debería en la imagen:

introducir la descripción de la imagen aquí

Esto es el html y css con el que he creado el icono:

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

/*FIN CODIGO PARA TOOLTIP 
 ========================*/
<div class="colocandolo"> 
    <div class="tooltip top">
     <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
      <span class="tiptext">
       El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido
        </span>
      </div>
</div>

FIN DE LA EDICION

Pueden ustedes ver lo que busco en cualquier página de administración de WooCommerce, por ejemplo en wp-admin => ajustes => General . Todos los campos tiene un icono que es una interrogación y muestra información en un Tooltip cuando tocamos el icono. Unicamente, yo quiero poner el icono a la derecha del Label "Teléfono" Tambien he añadido una captura de pantalla

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

8
  • 1
    Una preguntas: (1) El icono ? debe ir por dentro o por fuera del textbox?? (pusiste 2 imágenes que están distintas). (2) te sirve una solución usando javascript?? y (3) si en el código PHP donde pones los atributos, por ejemplo 'clear' => true, si agregas este 'is' => 'hola-mundo', luego ejecutas todo e inspeccionas el elemento en el navegador, este atributo lo ha agregado?
    – Yussef
    Commented el 4 mar. 2023 a las 6:16
  • Gracias por tu comentario @Yussef , 1-lo ideal es que estuviese a la derecha del Label "Teléfono". las imagenes son ejemplos que encontre. 2-Prefiero hacerlo con php, 3-No se muestra en el inspector. la verdad es que conseguido algún progreso. Me han dado ideas y añadi el html en un condicional y utilice la función pre_replace, pero el icono se añade debajo del titulo del checkout. Edite la pregunta para añadir esto. A ver si se te ocurre como corregir esto. Grcaias
    – gemita
    Commented el 4 mar. 2023 a las 9:32
  • 1
    Con tu avance creo que tu problema se traduce a ubicar el icono correctamente vía CSS. Favor coloca un ejemplo del HTML generado, supongo que debería verse como esto i.sstatic.net/imNdi.png
    – Yussef
    Commented el 4 mar. 2023 a las 9:55
  • Ya añado el código del icono, que lo había quitado en la ultima actualización @Yussef . Pero ya se muestran las clases en la funcion php
    – gemita
    Commented el 4 mar. 2023 a las 10:07
  • 1
    Pero que aparezca el input !!
    – Yussef
    Commented el 4 mar. 2023 a las 10:09

2 respuestas 2

5

Creo que la forma más fácil de hacer esto es usando el filtro woocommerce_checkout_fields

Por ejemplo, detectar los campos billing, buscar el billing phone y cambiar el label por uno personalizado.

function custom_override_checkout_fields( $fields ) {
     $fields['billing']['billing_phone']['label'] = 'Teléfono <span data-tooltip="Tooltip Hover"><i class="dashicons dashicons-editor-help"></i></span>';
     return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'custom_override_checkout_fields', 999 );

Esto agregará un icono de pregunta a su label, ahora que ya tenemos ese icono de pregunta solo nos falta agregar los estilos.

function WC_custom_css(){ ?>
<style type="text/css">
/**
 * 
 * Icono
 * 
 * */
label[for="billing_phone"] span {
    display: inline-block;
    vertical-align: middle;
}
label[for="billing_phone"] i {
    display: block;
}
/**
 * 
 * Tooltip
 * 
 * */

[data-tooltip] {
    position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
    text-transform: none;
    font-size: .9em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}
[data-tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1001;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    font-family: Helvetica, sans-serif;
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    z-index: 1000;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    display: block;
}
[data-tooltip='']::before,
[data-tooltip='']::after {
    display: none !important;
}
[data-tooltip]:not([flow])::before,
[data-tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}
[data-tooltip]:not([flow])::after,
[data-tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}
[data-tooltip]:not([flow])::before,
[data-tooltip]:not([flow])::after,
[data-tooltip][flow^="up"]::before,
[data-tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}
@keyframes data-tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}
@keyframes data-tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}
[data-tooltip]:not([flow]):hover::before,
[data-tooltip]:not([flow]):hover::after,
[data-tooltip][flow^="up"]:hover::before,
[data-tooltip][flow^="up"]:hover::after {
    animation: data-tooltips-vert 300ms ease-out forwards;
}
</style>
<?php }
add_action( 'wp_head', 'WC_custom_css' );

En mi caso lo puse dentro de una función que los imprimirá en el head de su sitio, pero recomiendo poner los estilos dentro de una hoja de estilos.

Esto debería de funcionar bien, pero puede que el icono de pregunta aun no se vea cuando no hay una sesión activa o cuando el usuario no sea un administrador, para esos casos puede activar los dashicons para todos.

function wp_add_dashicons(){
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'wp_add_dashicons' );

Con estos pasos ya debería de poder ver tu tooltip, esto es código probado pero igual deje en los comentarios si encuentra algún inconveniente.

7
  • Gracias por mostrar interes @JefferzonBol. Debo decir, que he utilizado tu ejemplo pero no funciona en mi sitio web. Tu dices que es un ejemplo funcional, pero por alguna razón, a mi no me funciona. Ni siquiera se ven cambios en el inspector
    – gemita
    Commented el 5 mar. 2023 a las 19:28
  • 1
    Esto es extraño, he probado esto y funciona perfectamente, talvez su woocommerce no esta actualizado o esta utilizando un editor de fields personalizado que anula los campos de woocommerce, este ejemplo esta basado en woocommerce.com/document/… para verificar que no sea su instalación cree una instalación de prueba con un wordpress y tema limpio, si funciona es porque algun plugin o ajuste de su tema desactiva los filtros, en ese caso ya seria un problema de su instalacion especifica o intente jugar con las prioridades. Commented el 5 mar. 2023 a las 19:33
  • 1
    Por ejemplo, add_filter( 'woocommerce_checkout_fields', 'custom_override_checkout_fields', 999 ); esto hara que su filtro se active al final de todos los demás filtros o sobreescribir alguno ya existente, puede ir probando otras prioridades. Commented el 5 mar. 2023 a las 19:41
  • 1
    Desactiva tus filtros y verifica que funcione, si es asi he cumplico con lo que pides, luego ve activando los filtros de a uno y ve escogiendo que filtros son los que realmente necesitas y verifica cuales puedes unir, pero claro, sin el conocimiento suficiente puede que sea una tarea complicada. Commented el 5 mar. 2023 a las 20:16
  • 2
    gemita he probado la función de @JefferzonBol y funciona perfectamente, yo lo estaba intentando de otra manera pero Jefferzon ha hecho un magnifico trabajo acá. Prueba a borrar el cache del sitio, yo hago eso cada vez que agrego un Snnipet a alguna de mis webs. Link de mi resultado
    – OCHOA
    Commented el 6 mar. 2023 a las 15:26
3
+200

Aquí una solución basada solo en CSS

/* SOLO PARA LA DEMO NO COPIAR ESTO */
input{
  height:32px;
}
/* ====================================== */



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: -2px;
  right: 8px;
  
  content: "";
   display: block;
  background: url("https://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;
}
<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_phone" class>
   Teléfono
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>
 
 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>

Seguramente vas a tener que ajustar un poco los elementos, para que calecen en las dimensiones de tu template, esto son los elementos importantes

Dimensión y posición del icono:

label[for="billing_phone"] + span:before{
  width: 24px; /* Ancho */
  height: 24px;/* Alto*/
  top: -2px;   /* Posición */
  right: 8px;  /* Posición*/
//etc

Esto da un margen a la derecha del input. Es para que cuando escribas un texto dentro no se cruce con el icono que está dentro. Si cambias el tamaño del icono, posiblemente tengas que ajustar un poco este valor

label[for="billing_phone"] + span > input.input-text {
 padding-right:34px;
}

Update

Extrañamente colocar el icono al lado del label es más complicado, pero la lógica es casí la misma

/* SOLO PARA LA DEMO NO COPIAR ESTO */
input{
  height:32px;
  width:100%;
  display:block;
}
label {
  width:100%;
  padding:10px 0;
  display:block;
}

/* ====================================== */



p.form-row:has(>label[for="billing_phone"]) {
 position:relative;

}

p.form-row:has(>label[for="billing_phone"]):after{
width: 22px;
    height: 22px;
    top: 8px;
    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: " El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido";
  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;
}
<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_phone" class>
   Teléfono
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>

 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>


<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_otrocampo" class>
   Otro campo
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>

 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>

4
  • Por supuesto que esto es increíble, no cabe duda que te lo has trabajado. Ya mi función php no tiene sentido. Ahora, partiendo de esto, tratare de hacer pruebas para sacar el icono del input y colocarlo junto a la etiqueta de "teléfono" ¿eso es factible con el css ? Creo que estaria mejor fuera del input, junto a la etiqueta ¿ Que te parece ?
    – gemita
    Commented el 4 mar. 2023 a las 14:32
  • 1
    @gemita Agregué un ejemplo al final, para colocarlo junto al label.
    – Yussef
    Commented el 5 mar. 2023 a las 20:36
  • Gracias @Yussef eres increíble. Por supuesto vi el código esta mañana y Ya lo tengo funcionando en el sitio. Estoy luchando un poco con la "?" que esta un poco baja dentro del circulo. Esto no ocurre en el tu ejemplo que lo copie a un html y funciona correctamente. Estuve haciendo unas pruebas con el ejemplo que pusieron en otra respuesta. Mañana sigo
    – gemita
    Commented el 5 mar. 2023 a las 21:36
  • 1
    @gemita Recuerdo aceptar alguna respuesta si es que te ha sido de ayuda. Saludos
    – Yussef
    Commented el 10 mar. 2023 a las 5:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.