Campo de texto para escribir en productos WooCommerce

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:  

 

La entrada Campo de texto para escribir en productos WooCommerce es un artículo reciente del sitio DecodeCMS.