Una de las consultas que más me llegan es acerca de la posibilidad de cambiar el texto del botón Realizar el pedido en el checkout de WooCommerce. Me lo preguntan mucho tanto seguidores del blog como, en especial, usuarios de mi plugin gratuito Add to Cart Button Custom Text.

Y es que claro, las cosas que deben servir para todo el mundo al final no sirven para casi nadie. Hay que comprender también que WooCommerce no puede tener una opción en los ajustes para cada mínimo detalle: si lo hiciera, además de lento, sería imposible de configurar, con miles de opciones. Afortunadamente hay otras formas de hacer estas cosas. Más de una en este caso.

Cambiar el texto Realizar el pedido

De hecho, así de pronto, me vienen a la cabeza al menos cuatro formas de cambiar el texto del botón Realizar el pedido de la página de finalizar compra (y es posible que hayan más):

• Por código, haciendo uso de un filtro que WooCommerce establece para ello
• Editando la traducción
• Una mezcla de las dos de arriba, filtrando las traducciones
• Usando nuestro propio template (totalmente desaconsejado)

Cada forma tiene sus ventajas y sus inconvenientes pero, en general, la opción de hacerlo por código es, como suele ocurrir, la más aconsejable. No sólo eso, sino que además es más flexible y potente, ya que nos va a permitir cosas que con las otras formas no podríamos, como establecer este texto de forma condicional (según los productos que haya en el carrito, el rol del usuario, etcétera).

Personalizar el texto del botón Realizar el pedido por código

Como decía más arriba, esta es la forma más aconsejable. Se trata de hacer uso del filtro (filter hook) que WooCommerce pone a nuestra disposición para cambiar este texto: woocommerce_order_button_text. Su uso básico es bastante sencillo:

add_filter ('woocommerce_order_button_text', function () {
     return 'Nuevo texto para el botón';
});

Sobre dónde añadir este texto ya he hablado varias veces aquí, puedes echar un vistazo a estas otras entradas:

No me funciona este código

Llegados aquí puede ocurrir que pruebes el código y no te funcione: ¿qué está pasando?

Pues pasa que muchas plantillas establecen estas cosas como les da la gana (básicamente como el desarrollador de la plantilla piensa que quedan mejor), y el filtro de la plantilla está “machacando” el tuyo y dejando, al final, su texto.

No te preocupes, vamos a sacar la artillería pesada: le diremos a WordPress que queremos que nuestro filtro se ejecute el último de todos los que estén establecidos para este mismo hook. Para ello basta una sencilla modificación:

add_filter ('woocommerce_order_button_text', function () {
     return 'Nuevo texto para el botón';
}, PHP_INT_MAX);

De esta forma nuestra función se situará tan atrás en la cola de ejecución como la configuración de PHP de tu servidor lo permita, asegurándonos que detrás no queda nadie y que, por lo tanto, lo que devolvamos no va a ser cambiado.

Bueno, en realidad no tanto. Porque puede que, saltándose todas las normas de educación y de bien hacer, el desarrollador de tu plantilla haya decidido que no quiere que nadie cambie ese texto y haya usado el mismo “truco”. Aunque desde luego no es lo habitual y, si es así, deberías contactar con él y explicarle el problema.

Cambiar el botón Realizar pedido de forma condicional

Como decía más arriba, el utilizar este filtro para cambiar el texto del botón Realizar pedido nos proporciona la ventaja de poder aprovechar las funciones de WordPress y/o de WooCommerce para devolver uno u otro valor (en definitiva, establecer un texto u otro) en función de casi cualquier cosa que se nos ocurra:

• Qué productos hay en el carrito
• El rol o la antigüedad del usuario
• Variables temporales, como la hora o el día
• Y un largo etcétera que incluye cualquier dato que esté a nuestra disposición

Un ejemplo rápido y sencillo: mostrar un texto diferente para el botón Realizar pedido en función de si el usuario tiene cuenta (y está identificado) o se trata de un invitado:

add_filter ('woocommerce_order_button_text', function () {
     return is_user_logged_in() ? 'Texto para clientes' : 'Texto para invitados';
});

Cambiar el texto del botón Realizar pedido editando la traducción

Otra forma de hacer es editar la traducción de ese texto. El texto que aparece en el código no es Realizar pedido sino Place order; es el sistema de traducción de WordPress el que, al detectar que el idioma del sitio está establecido como español, busca la traducción correspondiente de WooCommerce para ese texto y lo muestra en lugar del original. Pues bien, bastará decir que la traducción que queremos para Place order es el texto que quieres ponerle al botón.

Esto puedes hacerlo de varias formas, pero la más sencilla y rápida es usar el plugin Loco Translate para editar la traducción correspondiente:

Si no sabes cómo se hace puedes echar un vistazo a esta otra entrada donde lo explico paso a paso:

Las desventajas de este método respecto al anterior son claras: aquí el texto va “a piñón fijo”, siempre el mismo sin posibilidad de cambiarlo en función de condicionales.

La traducción se pierde cada vez que se actualiza WooCommerce

Y claro, como además esta traducción la modificas tú, pero la que incluye el plugin es diferente, cada vez que WooCommerce se actualiza, el archivo de traducción (en este caso woocommerce-es_ES.mo) se vuelve a sustituir por el incluido en la nueva versión, perdiendo los cambios que tú has hecho.

Afortunadamente WooCommerce incluye un mecanismo para que puedas evitar esto. Antes de ir a buscar la traducción donde el plugin la pone (en /wp-content/languages/plugins/) la buscará en /wp-content/languages/woocommerce/ de forma que, si la encuentra ahí, será ésa la que utilice y no buscará la establecida por defecto.

De esta forma puedes modificar la traducción, crear el directorio woocommerce dentro de languages, y copiar dentro de él tu traducción modificada. Así cuando WooCommerce se actualice no perderás estos cambios.

Claro que, con el cambio de versiones, puede que pierdas algunas traducciones (textos que cambian, nuevas opciones, etcétera), con lo que empezarás a ver cosas en inglés. Si sucede esto te tocará actualizar tu traducción personalizada cogiendo de nuevo la estándar y realizando de nuevo tus cambios.

Cambiar el texto Realizar pedido filtrando las traducciones

Este último inconveniente que teníamos al modificar la traducción (el de la sobreescritura de las traducciones) podemos evitarlo si lo que hacemos es modificar la traducción no en el propio archivo de idioma sino “al vuelo”, usando un fitro, de forma similar a cuando cambiábamos el texto por código.

En este caso podemos usar el filtro gettext de WordPress, que es el que nos permite hacer estas cosas:

add_filter ('gettext', function ( $texto_traducido, $texto, $dominio) {
      return ('Place order' === $texto) ? 'Nuevo texto' : $texto_traducido;
}, 10, 3);

Como te puedes imaginar, aquí volvemos a tener todas las ventajas que teníamos cuando usábamos el filtro woocommerce_order_button_text para modificar el texto del botón.

Cambiar el botón Realizar pedido modificando el template

Sin duda éste es el método más desaconsejado para hacer estas cosas, ya que requiere modificar directamente el código de WooCommerce, algo que siempre debemos evitar, máxime teniendo tantas alternativas como hemos visto. De hecho, para modificar el código, deberemos crear el template modificado en el árbol de directorios de nuestro tema para que cada actualización de WooCommerce no destruya las modificaciones. Eso significa que:

• El template quedará desactualizado, con código obsoleto y quizá conteniendo fallos o vulnerabilidades que han sido corregidas en versiones posteriores
• Si cambiamos la plantilla de la web perderemos estos cambios

Pero en fin, aquí lo dejo mencionado por ser exhaustivo y por si se da la circunstancia de que a alguien no le sirve ninguno de los tres métodos anteriores (cosa bastante difícil que suceda, por otro lado).

Lo que habría que hacer en este caso es copiar el archivo /wp-content/plugins/woocommerce/templates/checkout/payments.php y copiarlo a nuestra plantilla, en la ruta /wp-content/themes/tu-plantilla/woocommerce/checkout/, creando el directorio woocommerce (y también checkout) dentro de la carpeta del tema en caso de que no existiera.

Una vez ahí, tendrías que editar el archivo para hacer algún cambio. Como verás al editarlo, contiene funciones relativas al formulario de elección de métodos de pago, por eso es tan desaconsejable hacer esto: estarás impidiendo que este código se actualice en el futuro.

Pero en fin, hecha esta última advertencia (continúa bajo tu propio riesgo) habría que buscar el código:

' . esc_html( $order_button_text ) . '' );

y cambiarlo por un simple:

Nuevo texto';

Pero, por última vez: por favor, no lo hagas así.