Cómo agregar un mensaje en el checkout de WooCommerce
Como anular una plantilla de WooCommerce
Como anular una plantilla de WooCommerce
25 diciembre, 2014
Como anular una plantilla de WooCommerce
Como anular una plantilla de WooCommerce
25 diciembre, 2014

Cómo agregar un mensaje en el checkout de WooCommerce

Cómo agregar un mensaje en el checkout de WooCommerce

Tener una tienda en línea es algo que con unos conocimientos básicos, prácticamente cualquiera puede hacer. Lograr que esa tienda funcione y que genere ingresos interesantes es otra cosa y muchas veces un simple mensaje en el lugar correcto puede hacer la diferencia.

Un poco de historia

Antes de la versión 2.1, WooCommerce instalaba varias páginas en tu sitio, cada una de ellas con shortcodes para mostrar páginas como el carrito o el pago (Checkout). Esto te permitía usar el editor de WordPress para añadir contenido antes o después de la plantilla de la página. Pero, el problema era que al añadir tantas páginas estas podían ser eliminadas o movidas fácilmente, por ejemplo, algo tan sencillo como cambiar la página padre, podía hacer que más de una tienda perdiera por completo su funcionalidad.

En la versión 2.1 se redujeron estos errores convirtiendo algunas de las plantillas es endpoints. Es decir, la plantilla se carga siempre que se visite cierta URL, en vez de que se necesite una página de WordPress. Es por eso que ahora ves pocas páginas de WooCommerce y aun así puedes editar algunas de ellas. Claro que esto hizo un poco más difícil para los principiantes hacer modificaciones “grandes” a las plantillas de woocommerce.

Afortunadamente, como siempre en WooCommerce, hay miles de ganchos (hooks) en estas plantillas para que podamos cambiar o añadirles cosas y normalmente lo podemos hacer con muy poco código. Incluso puedes anular las plantillas de WooCommerce para hacerles cambios. Aquí hay una pequeña guía sobre como anular plantillas, pero esto es algo que sólo debes de hacer cómo último recurso. Siempre intenta usar acciones y filtros, ya que tendrás menos problemas al actualizar y es mucho menos probable que causes conflicto con el tema o sus plugins.

Cambiar la plantilla de pago de WooCommerce

Antes de continuar, te sugiero que mantengas la plantilla de pago lo más sencilla posible ya que es más probable que tus clientes la completen. Sin embargo, noticias, mensajes o sugerencias para completar el pago pueden ser muy útiles para que se genere una conversión.

Primero añadamos un bloque de texto a la página de pago (Checkout). Esto puede ser un mensaje personalizado, un “Gracias por tu compra”, o alguna ayuda para los métodos de envío. Para la gran mayoría de las páginas, querrás que este mensaje aparezca hasta arriba. Para hacerlo, necesitamos encontrar una acción que nos permita inyectar contenido en la plantilla. La plantilla de pago es el lugar para hacerlo. Usaremos la acción woocommerce_before_checkout_form para hacerlo.

Este es el código para añadir un bloque de contenido usando esa acción. Puedes incluso encerrarlo adentro de un <div> con una clase de CSS especial para estilizarlo.

add_action( 'woocommerce_before_checkout_form', 'mi_contenido_checkout', 12 );
function mi_contenido_checkout() {
 echo 'Este es el contenido que le dirá al cliente cosas. Puedes encerrarlo en div class="mensaje-checkout" y darle el estilo que necesites';
}

Y lograremos esto:

Cómo agregar un mensaje en el checkout de WooCommerce

Eso no es muy bonito ¿Verdad? Si quieres algo que llame un poco más la atención, podemos hacer varias cosas. Podemos usar noticia de WooCommerce y añadirle el contenido que necesitemos. Usaremos la misma acción, pero pasaremos la noticia con el contenido. Puedes reemplazar el mensaje con el tuyo:

add_action( 'woocommerce_before_checkout_form', 'mi_contenido_checkout', 11 );
function mi_contenido_checkout() {
    wc_print_notice( __( 'Una noticia importante.', 'woocommerce' ), 'notice' );
}

Y entonces tendremos algo así:

Cómo agregar un mensaje en el checkout de WooCommerce

Hagamos lo mismo, pero cambiemos el tipo de noticia y pongámosla hasta arriba de la página. Cambiaremos la última parte del código a “success” en vez de “notice” y también la prioridad. La prioridad por defecto de las funciones es de 10, así que si queremos que nuestra función vaya primero necesitamos establecer una prioridad de 9.

add_action( 'woocommerce_before_checkout_form', 'mi_contenido_checkout', 9 );
function mi_contenido_checkout() {
    wc_print_notice( __( 'Un mensaje importante.', 'woocommerce' ), 'success' );
}

Con los cambios que acabamos de hacer:

Cómo agregar un mensaje en el checkout de WooCommerce

También podríamos usar un mensaje de tipo “error” para atraer incluso más atención.

Si quieres editar un poco más la plantilla y, por ejemplo, quieres añadir estos mensajes más abajo en el formulario de pago deberás de ver el archivo de la plantilla y buscar la acción que logre lo que quieres (Esto a veces implica un poco de prueba y error). Si quieres agregar el mensaje justo antes del formulario de pago, hay una acción interesante en review order template que puedes usar: woocommerce_review_order_before_payment.

add_action( 'woocommerce_review_order_before_payment', 'mi_contenido_checkout' );
function mi_contenido_checkout() {
    wc_print_notice( __( 'Un mensaje de error.', 'woocommerce' ), 'error' );
}

Tendremos algo así:

Cómo agregar un mensaje en el checkout de WooCommerce

Puedes usar estos pequeños trucos para añadir mensajes en WooCommerce y no sólo en la plantilla de pago. Por ejemplo, puedes editar la página de Mi Cuenta, Carrito y demás áreas de tu tienda sin tener que añadir contenido a páginas de WordPress y sin tener que anular plantillas completas.

Recuerda que ayudar al usuario en su proceso de compra es muy importante para inducir la conversión.

¿Qué tipo de mensajes has tenido que dar en tu tienda?

Jorge Castro

Jorge Castro

Jorge Castro es cofundador de Octopus.mx, una de las agencias líderes de Marketing Digital en Cancún. Tiene experiencia en estrategias integrales de marketing digital. Siempre enfocado a objetivos empresariales, sabe como utilizar las nuevas tecnologías para mejorar y desarrollar los negocios en internet.

19 Comments

  1. Excelente!
    Muchas gracias, me sirvió de maravilla!

  2. CHRISTIAN dice:

    COMO PUEDO EDITARLO, ME ENTREGARON UN PROYECTO Y NO TENGO LA FORMA DE CAMBIAR ESE TEXTO. SOLO ENCUENTRO [woocommerce_checkout]

  3. Antonio dice:

    Hola David: ¿Estos códigos se inyectan en functions.php de mi tema child, no es así? Porque procedí así y resultó. Saludos desde Argentina.

  4. […] Éste código está basado en el artículo: https://jorgecastro.mx/como-agregar-un-mensaje-en-el-checkout-de-woocommerce/ […]

  5. ramiro dice:

    Hola Jorge,

    voy a usar la función que recomiendas, y funciona. ¡Gracias!

    Sin embargo necesito ayuda para saber cómo añadirle una clase y poder modificarla por css

    ¿Hay alguna forma de poner el texto hacia el final del checkout? Te puongo el link de la imagen

    https://rpa-project.com/wp-content/uploads/2020/09/Captura-de-pantalla-2020-09-17-a-las-18.58.28.png

    • Jorge Castro dice:

      Hola Ramiro,

      Según yo, no hay manera de ponerle una clase específica, sin embargo, si tiene una clase y puedes usar un selector para modificarla. Sobre el texto que me comentas, hay un hook que puedes usar: woocommerce_after_checkout_billing_form

      Saludos,

  6. David dice:

    No sé bien dónde debo añadirlo, ¿Cómo quedaría exactamente el código? Lo he sustituido por “wc_print_notice” pero no funcionó.
    ¿Podrías decirme cuál sería la Clase que debo usar para añadir el CSS? Tampoco entiendo la parte de código que dice “mi_contenido_checkout”
    Siento ser tan torpe, jias jias

  7. David dice:

    No lo entiendo me dice “Comentario Duplicado”

    Hola Jorge!

    Gracias por tu rápida respuesta, te comento;

    1) Ya usé ese código cuando lo vi ayer en tu página pero me gustaría que el mensaje apareciera en la página de antes. Ahora mismo aparece en la página de Checkout, donde está el formulario de pago pero yo tengo antes una página en la que aparece solo los detalle del carrito. No sé cómo puedo mandarte la captura de imagen.
    http://vegan-tattoo.com/cart/

    2) Te agradezco muchísimo la ayuda. Sería magnífico. Yo me defiendo algo en CSS pero el problema que tenía era que no sabía cuál era la Clase que debo usar. ¿Es “mi_contenido_checkout””?

  8. David dice:

    Hola Jorge;

    Muchas gracias por el artículo, me ha servido de gran ayuda. Quería preguntarte un par de cosas:

    1) ¿Cómo puedo añadir el mensaje en la página del carrito justo antes del Checkout?
    2) ¿Cómo quedaría el código con el div para darle estilo luego en CSS?

    Gracias de antemano!

    • Jorge Castro dice:

      Hola David, muchas gracias por tu mensaje.

      Te contesto tus dudas:

      1. El filtro que debes de utilizar es woocommerce_before_checkout_form
      2. El CSS dependerá mucho de tu sitio, una vez que este instalado, si me mandas un screenshot te podría ayudar.

      Saludos,

      • David dice:

        Hola Jorge!

        Gracias por tu rápida respuesta, te comento;

        1) Ya usé ese código cuando lo vi ayer en tu página pero me gustaría que el mensaje apareciera en la página de antes. Ahora mismo aparece en la página de Checkout, donde está el formulario de pago pero yo tengo antes una página en la que aparece solo los detalle del carrito. No sé cómo puedo mandarte la captura de imagen.
        http://vegan-tattoo.com/cart/

        2) Te agradezco muchísimo la ayuda. Sería magnífico. Yo me defiendo algo en CSS pero el problema que tenía era que no sabía cuál era la Clase que debo usar. ¿Es “mi_contenido_checkout””?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *