Enrique J. Ros

Ocultar los campos de cupones en WooCommerce

Los cupones son un arma de marketing muy poderosa en un ecommerce, creo que ya lo he dicho alguna vez: a todo el mundo le encanta comprar artículos por debajo de su precio. Los descuentos nos pierden.

Pero, y esto también lo he dicho otras veces, hay un aspecto negativo: si el cliente no tiene un cupón y al llegar al checkout ve la posibilidad de optar a un descuento, le parecerá casi insultante no poder aprovecharlo. Y el peligro es que se vaya a Google o (lo que es peor) a Facebook en busca de un cupón válido… y ya no vuelva.

Así que vamos a ver qué opciones tenemos para evitar esto y cómo podemos ocultar los campos de cupones en WooCommerce.

El peligro del campo para introducir un cupón

Seguro que has dibujado la escena en tu mente más de una vez: el cliente llega a tu web (puede que incluso a través de AdWords o de Facebook Ads, lo que supone una inversión por tu parte), recorre la tienda y, afortunadamente, encuentra algunos productos que le interesan.

Como has hecho los deberes y la web está bien optimizada para vender (ya sabes, llamadas a la acción, conversiones, generación de confianza… hemos hablado de todo ello muchas veces) el cliente echa algunas cosas al carrito y ¡tachán! se dirige al checkout.

Pero ahí está ese infame enlace: ¿Tienes un cupón? Haz clic aquí para introducir tu código. ¿Un cupón? Pues no, no tengo un cupón, piensa el cliente. Pero si lo tuviera podría ahorrarme unos eurillos, o quizá me saldrían gratis los gastos de envío.

¿Y qué hace entonces ese cliente? Pues se va a Google a poner nombre de tu ecommerce cupón descuento, a ver si encuentra uno. Y después, al no encontrar ninguno, se le ocurre que quizá hayas compartido alguno en tu página de Facebook.

Así que se va a Facebook y ve que tiene una notificación. Su prima le he etiquetado en las fotos de las vacaciones. Mírala, ahí, en la playa, cómo disfruta la condená. Y mira, tengo un mensaje, a ver quién es. Y a lo mejor ya se me han recargado las vidas del Candy Crash. Ah, pos sí, voy a echar una. Ya buscaré el cupón luego. Si eso.

Efectivamente, te has quedado sin venta.

Ocultar los campos de introducción de cupones en WooCommerce

WooCommerce muestra el campo para introducir un cupón en dos lugares distintos:

Y además muestra estos campos, quieras o no quieras, una vez que activas la características de cupones (WooCommerce > Ajustes > Finalizar compra > Activa el uso de cupones). En cierto modo tiene sentido: ¿cómo vamos a ofrecer cupones si el cliente no tiene un lugar para introducirlo?

Bueno, más adelante en el artículo veremos que la posibilidad existe: los cupones se pueden aplicar a través de un enlace, lo que además es de mucha utilidad para promocionarlos en redes sociales o por medio del email marketing.

Pero independientemente de cómo o para qué tengas pensado hacerlo, hay que decir que sí: se pueden ocultar esos campos. Vamos a ver cómo.

Cómo no ocultar los campos para aplicar cupones

En algunas webs verás instrucciones para ocultar los campos de aplicación de cupones usando el filtro de WooCommerce woocommerce_coupons_enabled, devolviendo un false si no quieres que se muestre dicho campo. Algo como esto:

add_filter ('woocommerce_coupons_enabled', function ($cupones) {
     if (is_cart() || is_checkout())
          return false;
});

Sólo que la mayoría de veces lo verás con un código menos eficiente, aunque es lo mismo. Si incluye la función add_filter y el filtro woocommerce_coupons_enabled, el resultado es exactamente el mismo.

Pues has de saber que lo que estás haciendo con ese filtro no es ocultar el campo en sí, sino deshabilitar el uso de cupones por código. Evidentemente el campo no se muestra, pero no porque esté oculto, sino porque a efectos prácticos es como si hubieras desmarcado la opción de uso de cupones: éstos no se aplicarán.

Y claro, para eso mejor dejar la opción desmarcada, ¿verdad? Lo que buscamos es un modo de ocultar los campos de aplicación de cupones, pero aún así seguir permitiendo el uso de cupones a los clientes que los tengan (a través de un enlace es el método más efectivo, como decía antes).

Ocultar el campo de Aplicar cupón en el carrito

En el carrito es muy sencillo hacerlo, basta con un poco de magia con CSS. Basta con ir a Apariencia > Personalizar > CSS Adicional y añadir esta directiva:

.coupon{display:none;}

Y voilà: el campo de Aplicar cupón ha desaparecido del carrito. Sin embargo la funcionalidad de cupones sigue activa, y si el usuario cuenta con otra forma de aplicar el cupón (por enlace o mediante un plugin que lo aplique en función de los productos comprados, del rol de usuario o de cualquier otra variable) éste seguirá funcionando.

Ocultar el campo ¿Tienes un cupón? Haz clic aquí para introducir tu código del checkout

Pero aquí la cosa está mucho más difícil. Resulta que esto es un mensaje de WooCommerce, es decir, se le aplica la clase woocommerce-info. Pero claro, si ocultamos esta clase no se mostrará ningún mensaje que WooCommerce genere en el checkout. Y eso no puede ser.

Para ser más exactos, el enlace Haz click aquí para introducir tu código sí tiene una clase propia (showcoupon), pero si la ocultamos el resultado será éste:

Lo cual, como puedes ver, dista mucho de lo ideal. Bien, en este caso la solución pasa por ocultar la clase woocommerce-info sólo si contiene la clase showcoupon. Como desgraciadamente aún no existe el CSS condicional (ojalá llegue el día) tendremos que echar mano de JavaScript.

Formas de hacer esto con JavaScript hay a puñados, porque métodos que se puedan aplicar aquí sobran. Pero con un ejemplo supongo que vale:

add_action ('wp_head', function () {
     if (is_checkout())
          echo '';
});

Ahí lo tienes. Con esa sencilla función insertas un javascript en la página de checkout que comprueba si el div woocommerce-info contiene otro div llamado showcoupon, y si es así le aplica un display:none en CSS. Si no sabes jQuery ni/o CSS, la explicación es aún más sencilla: magia. 🙂

Para que luego los puristas no vengan a decirme ojos negros tienes, advierto que la que muestro aquí es una función “rápida y sucia” (aunque funciona perfectamente) y que la forma correcta de hacerlo es metiendo el código javascript en un archio JS y encolándolo con la función wp_enqueue_script. Así es, por supuesto, como está hecho en el plugin del que hablo más abajo.

Ofrecer cupones sin necesidad de mostrar los campos de introducción de cupón

Ya he mencionado varias veces de pasada el tema a lo largo del artículo. Porque, si los campos para aplicar los cupones están ocultos, ¿cómo puede el cliente insertar el código del cupón?

Las opciones son varias, aunque normalmente son dos:

De esto último ya he hablado alguna vez: se trata de construir un enlace de tal forma que, cuando el usuario pincha en él, llega a la tienda con el cupón ya aplicado en su compra.

Esto no se puede hacer en la instalación por defecto de WooCommerce, sino que también es necesario utilizar un plugin que lo permita, como éste:

Este plugin no sólo permite aplicar cupones mediante un enlace, sino que además incluye un generador de enlaces y opciones para ocultar los campos de aplicación del cupón. De esta forma puedes ocultar estos campos para no perder a los usuarios que no tengan un cupón, pero a la vez seguir usando la funcionalidad de cupones de WooCommerce en tus campañas de email marketing o en redes sociales, compartiendo en ellas estos enlaces.

Sabiendo de dónde vienen tus clientes

Lo cual, por cierto, tiene otra ventaja adicional, y es que puedes compartir en redes sociales un enlace con un cupón específico (incluso con cupones diferentes para cada una de las redes) y otro enlace con un cupón diferente a tus suscriptores, incluso cambiándolo de campaña en campaña.

De esta forma te será muy fácil, de una sola ojeada, ver qué redes sociales o qué newsletters te funcionan mejor, con sólo ver cuántas conversiones has hecho con cada uno de los cupones.

Salir de la versión móvil