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.
Tabla de contenidos
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:
- En el carrito (Aplicar cupón)
- En el checkout (¿Tienes un cupón? Haz clic aquí para introducir tu código)
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.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
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:
- A través de un plugin que aplica automáticamente un cupón cuando se cumplen ciertas condiciones, como contenido del carrito, total de la compra o rol del usuario
- A través de un enlace construido especialmente
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.
raul dice
Hola, gracias por tus explicaciones sobre los cupones
tengo una consulta, en mi sitio cuando elimino el producto y he aplicado un cupón y vuelvo a agregar un producto el cupón se aplica sin que yo lo ingrese esto pasa aunque borre la cache, espero se entienda, como puedo eliminar la instancia del cupón cuando elimino el producto?
Quizas algun plugin que funcione .
saludos y gracias
Enrique J. Ros dice
Hola Raul
Los cupones se aplican al usuario, así que si el usuario ha añadido un cupón correctamente lo tendrá disponible aunque vacíe el carrito, siempre y cuando se cumplan las condiciones para aplicarlo (pedido mínimo, limitaciones por producto o por número de instancias redimidas, por fecha, etc.)
Un saludo
Jose dice
Hola Enrique, gracias por los tips.
He probado el CSS .coupon{display:none;} y efetivamente me elimina el cupon, pero me sigue apareciendo el boton de actualizar el carrito. ¿Existe alguna forma de quitar ese botón y de que se actualice el carrito automaticamente si se modifican las cantidades? Muchas gracias!!
Enrique J. Ros dice
Hola Jose
Sí, puedes usar este plugin para eso.
Un saludo
Jose Luis dice
Estimado Muchisimas Gracias, pues Ud me ha ayudado super!!
Se lo agradezco Mucho
Nicolás dice
Hola Enrique,
Mucho gusto, necesito de tu ayuda ya que necesito quitar la casilla para aplicar cupones en la página de checkout. ¿De qué manera puedo hacerlo? que sea una forma fácil y simple de aplicar… Desde ya muchas gracias! Saludos!
Enrique J. Ros dice
Hola Nicolás
Puedes hacerlo tal y como explico en este mismo artículo.
Un saludo
Oscar dice
¿y como se hace si SOLO queremos ocultarlo en el carrito pero SI queremos que aparezca en el checkout?
Enrique J. Ros dice
Hola Oscar
Puedes hacerlo tal y como explico en esta misma entrada.
Un saludo
oscar de zona.digital dice
Por supuesto que está en el articulo, disculpa la idiotez de pregunta.
En el Cart no me funcionó porque me deshabilitaba los cupones tambien en el checkout. he utilizado
form.checkout_coupon.mb-0{display:none;}
en vez del .coupon que recomendabas
y me ha funcionado correctamente. (quiza sea por el template utilizado) Muchas gracias por la ayuda
Emilio dice
Hola, gracias por la info de gran ayuda.
Es posible con algún código como los anteriores poder modificar la posición de la notificación del cupo y pasarla para que salga debajo del boto finalizar compra en el checkuot?
Anna dice
Hola,
Muchas gracias por la información. Yo quiero justo hacer lo contrario, quiero activar el campo de ¨¿Tienes un cupón?¨
¿Cómo puedo hacerlo? Gracias!!
Enrique J. Ros dice
Hola Anna
Para eso tienes que activar la opción de «Activar cupones» en los ajustes generales de WooCommerce.
Un saludo
Nicolas dice
Hola Enrique muchas gracias por el articulo.
Mi duda es la siguiente, tengo el carrito en la misma página del Checkout para agilizar el funnel y pude ocultar la parte de si tienen un cupón pero al eliminar uno de los productos del carrito me vuelve a aparecer.
¿Sabes cómo solucionar eso? Utilicé la función que comentaste en este post al final de mi archivo functions.php de mi child theme.
Gracias!
Enrique J. Ros dice
Buenos días Nicolas
Eso es sin duda consecuencia del plugin que estás usando para mostrar carrito y checkout en la misma página. Consulta directamente con su soporte.
Un saludo,