¿Cómo cambiar el texto del botón Añadir al carrito en función del stock disponible?

Antecedentes

Hace unas semanas un cliente nos presentó una necesidad muy concreta para su tienda online bajo WooCommerce. La necesidad que nos planteó consistía en personalizar el texto del botón Añadir al carrito en función del stock del producto de forma que cuando no hubiera stock o no existieran suficientes unidades, y siempre que se permitieran las reservas de producto, se cambiara el texto nativo de WooCommerce por el texto Reservar ahora o Sin existencias en caso de que no se permitieran las reservas de producto.

Nos pusimos a investigar un poco y dimos con un código muy interesante en Stack Overflow que cumplía en parte sus necesidades, pero dado que no hacía todo lo que se nos había planteado y que entendíamos que estaba bastante limitado, nos pusimos manos a la obra y lo personalizamos para que cumpliera al 100% todas las especificaciones planteadas por el cliente.

Manos a la obra

El código que hemos creado para realizar esta funcionalidad es una mezcla de PHP y de JavaScript. En este caso que nos ocupa el código JavaScript es el que se encarga de ejecutar la parte más importante del código  ya que es el que se encarga del cambio físico del texto del botón en tiempo real en función de las unidades indicadas en el campo de texto de cantidad de producto y del cambio de variación en los casos en los que el producto sea variable.

Para hacerlo funcional sólo hay que añadirlo al fichero functions.php de tu tema hijo o  al plugin personalizado que uses para inyectar este tipo de códigos personalizados.

El código PHP personalizadoque hoy os presentamos es este:

Básicamente lo que hace el código PHP es utilizar los filtros nativos de WooCommerce woocommerce_product_add_to_cart_text y woocommerce_product_single_add_to_cart_text para manipular el texto del botón.

Para ello lo primero que se hace es comprobar si el producto tiene stock o no, y si es reservable o no para devolver el texto nativo de WooCommerce o alguno de los nuevos textos personalizados que son totalmente traducibles con plugins como Loco Translate o WPML: Out of stock (Sin existencias) y Book now (Reservar ahora).

Después se comprueba si el producto es variable o no para personalizar el comportamiento del botón según sea el caso a través de JavaScript.

En el primer caso, productos variables, se obtiene el stock de todas y cada de las variaciones de producto desde PHP para poder personalizar el botón en función del stock de cada una de ellas, desde JavaScript no es posible obtener esta misma información ya que no son datos que se puedan obtener en el código HTML de la ficha de producto y es más sencillo pasar un array PHP a JavaScript que utilizar AJAX para obtener la misma información.

La comprobación del stock se hace al vuelo cada vez que se selecciona una variación o se modifican las unidades de las mismas, así nos aseguramos de mostrar el botón correcto en tiempo real según la selección del cliente. En el segundo caso la operativa es mucho más simple y sólo se modifica el texto del botón en función de las unidades del campo de cantidad de producto.

Gracias a este pequeño código podrás indicar claramente en tiempo real a tus clientes en qué estado se encuentra tu producto en función de la elección que esté realizando en cada momento.

Si te ha gustado o si te ha resultado útil este código háznoslo saber con tu comentario. Esperamos que os resulte útil este código en vuestros proyectos de WooCommerce.