DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Plugins / Campo de texto para escribir en productos WooCommerce

Campo de texto para escribir en productos WooCommerce

[ ] [ Autor: ][ Plugins - Intermedio] [ ]

Suscríbete a DecodeCMS:  

En este artículo veremos cómo agregar un atributo de campo de texto en los productos de WooCommerce, lo haremos directamente a través de código sin usar plugins adicionales.

 

Resultado Final

Al final lo que queremos obtener será algo similar a la siguiente imagen:

 

Código para mostrar el campo de texto

El siguiente código muestra un campo personalizado en todos los productos, puedes adaptarlo de acuerdo a tus necesidades, ya sea para mostrarlo sólo para productos de determinadas categorías o para hacer el campo de texto opcional.

Puedes colocar el código como parte de tu archivo functions.php de tu tema hijo

En el código anterior:

  • Utilizamos el hook woocommerce_before_add_to_cart_button para crear el HTML del nuevo campo y mostrarlo como parte del detalle de producto
  • Dentro de esta primera parte hay un código comentado que puedes usar para que el nuevo campo de texto sólo se muestre en un determinada categoría de producto
  • Utilizamos el hook woocommerce_add_to_cart_validation para validar el campo anterior ya que debería tener algún contenido si aparece como parte de los atributos de un producto.
  • Utilizamos el hook woocommerce_add_cart_item_data para agregar el nuevo campo a los datos del carrito a través del array $cart_item_data, el índice del elemento del array será: dcms-custom-field y a partir de aquí sólo trabajaremos con ese valor guardado en el carrito
  • Utilizamos el hook woocommerce_cart_item_name para mostrar el valor del nuevo campo, lo concatenamos en el parámetro $item_name
  • Finalmente a través del hook woocommerce_checkout_create_order_line_item, agregamos el valor del nuevo campo como parte de los metadatos de la orden con el método add_meta_data()

 

Conclusión

Como hemos visto, utilizando los hooks de WooCommerce hemos agregado un campo de texto en el que se puede escribir y dicho valor será parte de la orden final, hemos realizado esto directamente a través de código y sin usar plugins adicionales.

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Josias

    Buenas tardes, ante todo muchas gracias por ayudar a todos con tus enseñanzas. Quiero consultarte ya que tengo un problema en cómo aparece el campo de texto y no sé como corregirlo. Te adjunto una captura: https://drive.google.com/file/d/1KRJ-fk0L2E5nb0Qoty4fJSFJUlTJsIOy/view?usp=sharing

    El tema es que me aparece en el mismo renglón que el botón de cantidad y el de agregar al carrito y quisiera que aparezca arriba abarcando todo el ancho.

    Desde ya muchas gracias!

    • Jhon Marreros Guzmán

      Hola, podrías corregirlo con CSS, por ejemplo algo como:

      div.custom-field-wrapper{
width:100%;
float:none;
clear:both;
}

      Si aún tienes problemas deja el cambio activo en tu sitio para verificar.

      Saludos.

  2. kh05

    Buenas quiero poner el bloque tendro de unas pestañas y en el momento que lo pongo ya no me recoger los valores ni me hace naada mas

  3. Nagore

    Hola,
    Como no tengo descargado el function.php en mi escritorio, he probado copiando este código directamente en el WordPress de mi pantilla. Exactamente en Apariencia – Theme file editor – functions.php. Pero al guardar me da Error y no se me guarda, me dice esto:
    “Algo ha salido mal. Es posible que su cambio no se haya guardado. Por favor, inténtalo de nuevo. También existe la posibilidad de que tenga que arreglar y subir manualmente el archivo por FTP.”
    Podrías ayudarme?

    • Jhon Marreros Guzmán

      Hola, por seguridad WordPress restringe modificaciones en archivos .php, podrías probar usar FTP para descargar, modificar y subir tu archivo.
      Saludos.

      • Nagore

        Hola, milagrosamente no se cómo, WordPress lo a aceptado y me funciona. Muchísimas gracias por la ayuda!

  4. Miguel

    Buenos días,
    Magnífica lección. Muchas gracias
    ¿Podría añadir más de una categoría al código en la siguiente línea?

    if ( ! in_array(34, $categories )) return;

    Lo estoy probando y no doy con la sintaxis adecuada. De poder hacerlo, me ahorraría un plugin.
    Muchas gracias

    • Jhon Marreros Guzmán

      Hola, si claro, tendrías que descomentar estas líneas y además hacer varias comparaciones, por ejemplo si quieres que funciones para dos categorías con ids 34 y 35

      global $product;
$categories = $product->get_category_ids();
if ( ! in_array(34, $categories ) 
     && ! in_array(35, $categories ) ) return;

      Saludos.

      • Miguel

        Muchísimas gracias,
        Llevaba una semana atascado con esta sintaxis y no era capaz de resolverlo (por supuesto, no soy programador). Además, me acabo de ahorrar un plugin!

        Ya tienes un suscriptor más!

        Saludos.

  5. Merce

    Buenas tardes.
    Muchas gracias por el código. Me funciona perfectamente, pero mi cliente quiere dicha casilla en dos categorías diferentes pero con texto diferente. Se podría hacer?

    Muchas gracias

    • Jhon Marreros Guzmán

      Hola, si claro, tendrías que construir y guardar el control condicionalmente de acuerdo a la categoría en la que estes, en la primera parte del código hay una aproximación mostrar/ocultar la caja de texto para determinadas
      categorías.

  6. Toni

    hola Jhon,
    no me lo acepta…alguna idea?
    -Los cambios en tu código PHP se han revertido debido a un error en la línea 3591 del archivo wp-content/themes/themeforest-Yqjr2eEd-bridge-creative-multipurpose-wordpress-theme-wordpress-theme/bridge/functions.php. Por favor, arréglalo y trata de guardar de nuevo.

    syntax error, unexpected ‘&&’ (T_BOOLEAN_AND)

    • Jhon Marreros Guzmán

      Hola, mejor edita tu archivo a través de FTP, ya que al parecer lo estas haciendo directamente desde el backend de WordPress. Si aún así te da errores, tendrás más detalle del error.
      Saludos.

  7. Agustín

    Muchísimas gracias!!
    Me ha funcionado a la primera. Solo me queda la duda de si el filtro de categoría podría ser también según algún atributo.
    Por ejemplo, si el producto tiene el atributo “Fabricante”, y solo quisiera que se active en caso de que tenga asignado el “Fabricante 3”

    • Jhon Marreros Guzmán

      Hola, en tu caso en lugar del código comentado prueba revisar que te devuelve el siguiente código:

      global $product;
$atributo = $product->get_attribute( 'pa_fabricante' );

      Puedes comprobarlo con var_dump($atributo), recuerda que los nombres de atributos en WooCommerce se les agregar ‘pa_’ como sufijo.
      Luego que veas que te devuelve, posiblemente un array, puedes hacer las comprobaciones con un if.

  8. gustavo

    Buenos dias,

    Hay posibilidad que sea compatible con Elementor y Crocoblock? Tengo la plantilla modificada y este codigo no se visualiza por esto. Hay alguna forma de llamar a ese campo y poder ponerlo en la plantilla? Muchas gracias

    • Jhon Marreros Guzmán

      Hola, estoy usando los Hooks de WooCommerce, teóricamente debería mostrarse, salvo esos constructores hagan algo diferente o usen algo que no es estándar de WooCommerce.

  9. Albert

    Hola Jhon! me funciona muy bien. Hace un tiempo @Merce te preguntaba por “mi cliente quiere dicha casilla en dos categorías diferentes pero con texto diferente”
    ¿podrías ayudarme con la estructura?
    He intentando algunas cosas pero no me funciona.
    Gracias.

    • Jhon Marreros Guzmán

      Hola, el código que esta comentando te da una idea de lo que podrías hacer, si solo quieres el label diferente simplemente crea una variable y úsalo como parte de la construcción HTML del texto del label. La variable cambiará de acuerdo a la categoría en la que te encuentres.

      • Albert

        Perdona, no entiendo ni se como hacerlo. ¿me podrías ayudar?

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*