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.