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.
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.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
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!
Hola, podrías corregirlo con CSS, por ejemplo algo como:
Si aún tienes problemas deja el cambio activo en tu sitio para verificar.
Saludos.
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
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?
Hola, por seguridad WordPress restringe modificaciones en archivos .php, podrías probar usar FTP para descargar, modificar y subir tu archivo.
Saludos.
Hola, milagrosamente no se cómo, WordPress lo a aceptado y me funciona. Muchísimas gracias por la ayuda!
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
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
Saludos.
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.
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
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.