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:
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í:
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:
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í:
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?