• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Campo de texto para escribir en productos WooCommerce

Campo de texto para escribir en productos WooCommerce

Campo de texto para escribir en productos WooCommerce

[ 3 noviembre 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

funcionalidad woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cambiar el rango de precios de productos variables en WooCommerceCambiar el rango de precios de productos variables en WooCommerce
  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
  • Modificar el precio de un producto por código en WooCommerceModificar el precio de un producto por código en WooCommerce
  • Campos personalizados en productos de WooCommerceCampos personalizados en productos de WooCommerce
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

    21 marzo, 2022

    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

      22 marzo, 2022

      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

    28 julio, 2022

    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

    6 octubre, 2022

    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

      6 octubre, 2022

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

      • Nagore

        13 octubre, 2022

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

  4. Miguel

    17 enero, 2023

    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

      17 enero, 2023

      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

        17 enero, 2023

        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

    26 enero, 2023

    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

      29 enero, 2023

      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

    16 marzo, 2023

    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

      17 marzo, 2023

      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

    31 marzo, 2023

    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

      31 marzo, 2023

      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

    16 mayo, 2023

    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

      16 mayo, 2023

      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.

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cómo optimizar las revisiones en WordPress

Clases CSS basadas en el Rol de usuario en WordPress

Anterior y siguiente en la página de producto de WooCommerce

Agrega una única unidad por producto al carrito de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados