Ofrecer cupones a tus clientes es una excelente manera de incentivar las ventas y fomentar la interacción con tu tienda de WooCommerce. Ya sea un descuento, envío gratuito o un regalo, los cupones son una forma estupenda de animar a los clientes a realizar una compra. Sin embargo, el cuadro de entrada de cupones en la página del carrito de WooCommerce puede ser bastante pequeño y estrecho, lo que lleva a una experiencia de cliente menos que ideal.
Afortunadamente, existe una forma sencilla de ampliar el cuadro de entrada de cupones y mejorar la experiencia general de tus clientes. Con unos pocos pasos sencillos, puedes ampliar rápida y fácilmente el cuadro de entrada de cupones en tu página de carrito de WooCommerce, lo que permite una experiencia más amigable para tus clientes.
Introducción
Cuando instalas muchos temas de WordPress que afirman ser compatibles con WooCommerce, uno de los grandes problemas (y una de mis mayores quejas) es que nadie parece prestar atención al tamaño del cuadro de cupones en la página del carrito.
Si estás experimentando el problema de un cuadro de cupones corto e ilegible en tu página de carrito y quieres hacer algo al respecto para que la gente pueda, ya sabes, usarlo, ¡entonces has llegado al artículo correcto!
La solución es relativamente simple, solo se trata de CSS y te mostraré cómo implementarla de un par de maneras diferentes.
Cómo solucionar el cuadro de entrada de cupones corto en tu página de carrito
El primer paso es abrir Google Chrome, Safari o Firefox, cualquier navegador moderno realmente.
Haz clic derecho en ese cuadro de cupones y selecciona Inspeccionar.
Al hacer clic en Inspeccionar, se abrirán las Herramientas de desarrollador que te permitirán inspeccionar elementos de la página.
Si es la primera vez que haces esto, no te preocupes, te mostraré exactamente qué hacer a continuación.
Se abrirá un cuadro de entrada de cupones como este:
Los estilos son lo que queremos cambiar.
Vamos a experimentar un poco para asegurarnos de crear una nueva regla CSS con el ancho correcto a la primera. Lo bueno es que si haces cambios en este cuadro de Herramientas de desarrollador, se mostrarán en el sitio (temporalmente hasta que recargues) para que puedas probar qué funciona mejor en cuanto a ancho.
Haz clic en el botón Nueva regla de estilo:
Luego, renombra el texto resaltado a lo siguiente:
.woocommerce-cart table.cart td.actions input#coupon_code
Después de introducir este texto, pulsa la tecla TAB de tu teclado, no Enter. Si accidentalmente pulsas Enter, no pasa nada, solo haz clic entre las llaves { } y se añadirá una nueva línea entre las llaves.
Añade la regla de esta manera:
Juega con el valor del ancho (los 200px en la captura de pantalla) hasta que estés contento con el aspecto del cuadro de cupones en la pantalla. Verás cómo se actualiza la página web al cambiar el valor.
Una vez que estés satisfecho, copia el texto y guárdalo en un Bloc de notas (Windows) o TextEdit (Mac) para conservarlo.
.woocommerce-cart table.cart td.actions input#coupon_code {
width: 200px;
}
Este es el código CSS que generamos y ahora solo tenemos que instalarlo en el sitio de forma permanente.
Instalar la solución del cuadro de entrada de cupones de forma permanente
Si tienes algo de experiencia editando archivos CSS, probablemente sepas que hay un archivo style.css en el directorio de cualquier tema que instales.
Idealmente, deberías sobrescribir esto con un tema hijo e instalar tus cambios allí.
Pero si no tienes uno de esos, hay otra forma de hacerlo y no implica editar ningún archivo CSS que potencialmente podría ser sobrescrito cuando actualices el tema.
Hay un plugin llamado Simple Custom CSS and JS. Este plugin te permite hacer un seguimiento de todos los pequeños ajustes de CSS y javascript que necesitas hacer en tu tema, sin tener que editar el tema en sí. Es muy útil.
Instálalo yendo a Plugins->Añadir Nuevo y buscándolo. Instalar y activar.
Luego obtendrás un nuevo menú en el backend:
Haz clic en Añadir CSS Personalizado. Esto abrirá una nueva ventana para que introduzcas el código que generaste antes.
Dale un nombre como "Solución de ancho de la caja de cupones del carrito" para que puedas saber de un vistazo de qué se trataba más tarde y añade tu código en el cuadro proporcionado.
Debería verse así:
¡Y eso es todo!
¿Por qué era esto tan importante?
Bueno, los cupones son una de tus mejores armas de marketing y sin las señales visuales de cómo usar esos cupones, tus clientes se verán obligados a buscar dónde introducir el código.
He observado a lo largo de los años que los clientes pueden ser bastante perezosos cuando se trata de cosas como esta y se rinden fácilmente. Cuanto más obvio hagas algo, mejores serán tus resultados para esa acción.
Así que en este artículo, abordamos conceptos clave para ayudar a arreglar tu caja de entrada de cupones:
- Cómo solucionar el cuadro de entrada de cupones corto en tu página de carrito
- Instalar la solución del cuadro de entrada de cupones de forma permanente
¡Así que entra y prueba esta solución, puedes hacerlo!
