Hoy vamos a ver una funcionalidad de WooCommerce a la que por lo general se le hace poco caso. Hablo de la opción para mostrar un aviso en toda la tienda.
Esta opción, que WooCommerce incluye en la instalación por defecto (no es necesario instalar ningún plugin) la puedes encontrar en WooCommerce > Ajustes > General > Aviso de texto para la tienda. Una vez activada la casilla aparece una caja de texto donde puedes escribir el aviso que quieres mostrar.
A partir de WooCommerce 3.3 esta opción ha cambiado de lugar, ahora está en las opciones de personalización. Puedes ver más detalles en la siguiente entrada:
Vamos a ver en este corto vídeo qué posibilidades nos ofrece esta opción para incrementar ventas y cómo podemos hacer algunas cosas con ella, como cambiar los colores o mostrarla sólo en las páginas de la tienda en lugar de en todo el sitio web.
Después del vídeo te dejo algunos comentarios sobre el tema y también podrás encontrar ahí los códigos y los recursos utilizados en el vídeo. ¡Hasta ahora!
Ya has visto qué fácil es y las posibilidades que ofrece. Te recuerdo algunas cosas que deberías tener en cuenta.
Tabla de contenidos
Aviso en toda la tienda WooCommerce
En realidad la opción es bastante sencilla, como has podido ver. Se trata de un aviso que se activa mediante una casilla de verificación (en WooCommerce > Ajustes > General > Aviso de texto para la tienda) y permite mostrar el aviso que quieras en todas las páginas del sitio web.
Está pensado en principio para mostrar avisos de servicio, como por ejemplo los días que no hay envío de pedidos, o cuando la tienda se encuentra en pruebas o en remodelación, pero también se puede usar (¿por qué no?) para marketing, con avisos como éste que hemos visto en el vídeo:
¡Sólo hoy! Si realizas un pedido mínimo de 20 euros antes de las 20:00 horas, te regalamos los gastos de envío. ¡Date prisa!
Cambio de estilos en el aviso de la tienda
No existen opciones para cambiar el color o el formato del texto del aviso, pero se puede hacer de forma muy sencilla mediante CSS.
Para eso puedes añadir tus propios estilos en el style.css de tu plantilla (en Apariencia > Editor), aunque lo más recomendable es utilizar un plugin para CSS personalizado, como Simple Custom CSS.
Este plugin te permitirá añadir tu propio código CSS directamente en Apariencia → Custom CSS de forma que seguirá disponible incluso si cambias de plantilla (si has escrito el CSS en el style.css de tu plantilla lo perderás cuando la cambies o cuando ésta se actualice).
Recuerda también que si ya tienes instalado el plugin Jetpack, ya incluye un módulo para CSS personalizado que puedes activar en Jetpack → Configuración → CSS personalizado, tras lo cual tendrás la opción disponible en Apariencia → Editar CSS, así no necesitas instalar otro plugin adicional.
Bien, una vez que ya tienes localizado dónde vas a añadir tu CSS, éste es el código que tienes que poner para cambiar los estilos del aviso de la tienda:
p.demo_store {
background:red;
color:white;
font-weight:bold;
}
Te explico cada línea para que lo puedas adaptar a tu propia necesidad:
- La línea 2 (background) hace referencia al color de fondo. Puedes ponerle el que quieras nombrándolo en inglés (red, blue, white, black, crimson, grey, yellow, green…)) o mediante su color hexadecimal (por ejemplo, background:#dc143c para el carmesí). Aquí tienes decenas de ellos.
- La línea 3 (color) es para el color del texto. También puedes aplicar aquí lo dicho en el punto anterior.
- La línea 4 (font-weight:bold; sólo tienes que incluirla si quieres que el texto del aviso aparezca en negrita.
Que el aviso sólo sea visible en las páginas de la tienda
Como te decía más arriba, cuando este aviso está activo se muestra en todas y cada una de las páginas de tu sitio web, no sólo en las de la tienda: en la página de contacto, las entradas del blog, las páginas con textos legales, el carrito, la página de pago…
Si lo que quieres es que sólo aparezca en las páginas de la tienda (tienda, categorías, fichas de productos, resultados de búsqueda, etcétera; no se verá en el carrito ni en el checkout) puedes utilizar el siguiente código:
if (!function_exists ('woocommerce_demo_store')) {
function woocommerce_demo_store () {
if (get_option ('woocommerce_demo_store') == 'no')
return;
$aviso = get_option ('woocommerce_demo_store_notice');
if (empty ($aviso))
$aviso= __( 'This is a demo store for testing purposes — no orders shall be fulfilled.', 'woocommerce');
if (!is_woocommerce ())
echo apply_filters ('woocommerce_demo_store', '');
else echo apply_filters ('woocommerce_demo_store', ''.$aviso.'
' );
}
}
¿Dónde ponerlo? Pues puedes incluirlo al final del archivo functions.php de tu plantilla o, mucho mejor, utilizar tu propio plugin de funciones personalizadas como explico aquí, que es muy fácil y a la larga muchísimo más recomendable.
El aviso en la tienda y los temas
Una última cosa a tener en cuenta. Como te muestro en el vídeo (si lo has visto) el aviso puede tapar el menú superior en algunas plantillas.
Para hacer el vídeo he utilizado dos distintas, ambas hechas por WooThemes (los autores de WooCommerce): la plantilla gratuita MyStyle y la plantilla premium Canvas.
Mientras que en la primera el menú superior (Mi cuenta, Mi lista de deseos, Carrito, Checkout, Buscar) quedaba oculto por el aviso en la segunda no ocurría eso. Como puedes imaginar, es muy poco recomendable utilizar el aviso con una plantilla si opciones tan importantes como esas quedan ocultas.
Y ya está. Parecía una opción muy sencillita, pero ya ves como ha dado bastante de sí. Como siempre, recordarte que cualquier duda o consulta que tengas sobre este asunto o sobre cualquier otro relacionado con WooCommerce o con WordPress me tienes a tu disposición.
Hola! En mi caso, me gustaría poner el aviso de solamente en portada. ¿Sería posible?
Aunque menos importante, sería estupendo también si desapareciese tras unos cuantos segundos, aunque supongo que esto ya lo complica un poco más…
Hola Diego. Sí, ponerlo sólo en la portada es posible mediante CSS. Para lo otro… bueno, esta opción no está pensada para eso, para ello seguro que podrás encontrar bastantes plugins.
Un saludo.
Quisiera mostrar un aviso tipo alerta o burbuja emergente tanto en la portada como en las demás paginas de la web, donde se plasme: «Si ya se llego al monto para envio gratis o no y de no ser asi cuanto falta», he buscado plugin y no encontré lo que buscaba, quizás tengas alguna idea o informacion de algún plugin que pueda utilizar.
Hola Jorge
Puedes usar este plugin o este otro.
Un saludo.
Buen dia Enrique,
Gracias por tus publicaciones, por favor yo necesito saber como mostrar el ícono del carrito con el número de pedidos solo cuando hay algún pedido, si el carrito esta vacío, no mostrar el ícono.
¿cómo hacerlo?
Gracias anticipadas
Hola Hugo
Eso depende del minicarrito que estés usando.
Un saludo,
Hola, Enrique!
Al igual que todos los que aquí te escriben, de antemano muchas gracias por todos tus aportes.
Tengo una duda sobre la forma de dejar un mensaje en particular a la hora de que alguien vaya a realizar una compra. A ver si me explico: mi novia elabora camisas por encargo y a la media, y yo quisiera montarle su tienda, pero como la elaboración de estas camisas se puede decir que es de manera artesanal, a ella le gustaría que en la página, una vez que el cliente haga su pedido según los atributos (color, talla, modelo, etc), antes del pago, el cliente pueda recibir una estimación del tiempo de inicio de su proyecto.
Ejemplo: Puedo comenzar a realizarla el 15 de marzo y tardo 3 días en elaborarla.
¿Me expliqué?
Nuevamente muchas gracias!!!!
Hola Manuel
Te puede servir YITH WooCommerce Cart Messages y mostrar estos mensajes en el carrito, pero los mensajes tendrás que establecerlos previamente, como es obvio.
Si requieres funcionalidades más avanzadas ya tendrías que recurrir a un plugin de contenido condicional.
Un saludo.
Hola, muchas gracia spor el articulo!
Se puede configurar para que el aviso salga rriba de la pagina? En mi plantilla wordpress sale por defecto abajo.
Gracias
!
Borja
Hola Borja
WooCommerce muestra el aviso en la parte de abajo y no hay opción para cambiarlo, aunque podría hacerse con CSS.
Un saludo.
Hola, ¿sabes dónde está en las nuevas versiones el aviso? Ya no lo veo en Ajustes generales.
Gracias
Hola Diego
Está indicado en el artículo
Un saludo
Hola Enrique,
solo me ocurre a mi o con el código se elimina también el enlace «descartar»?, el que oculta el aviso.
Un saludo!
Hola Tomás
El código que elimina el aviso lo elimina completo, incluyendo el enlace para descartarlo. Si te refieres al código para personalizar el estilo, quizá es que estés dejando el enlace del mismo color que el fondo.
Un saludo
Hola Enrique, tengo algún plugin tuyo y siempre te sigo. Me gustaría editar la palabra «descartar» y añadir en vez de esa palabra otra o una simple «X» que la gente está más acostumbrada. ¿Cómo podría editar esto? Muchas gracias y saludos. Diego.
Hola Diego
Echa un vistazo a esto, ahí explico cómo puedes hacer algo así.
Un saludo
Gracias por el artículo. Use tus instruciones pero creo que se ha actualizado la versión de woocommerce, a la 4.70, y no encuentro esa opción para desactivar el mensaje que puse. ¿Lo han movido a otro apartado de la configuración?
Hola Mikel
En efecto, tal como explico en la entrada la ubicación cambió a partir de WooCommerce 3.3
Un saludo
hola, tengo woocommerce y me gustaría que me ayudaras mas en concreto a poner una ALERTA cuando se termine la compra, que ahí mismo aparezca el cuadrito que diga GRACIAS POR SU COMPRA, he estado buscando pero no encuentro nada al respecto y lo único que tengo esto:
function alert(){
alert(«Gracias por su compra, lo esperamos pronto!!»);
}
function add_action( ‘woocommerce_after_checkout_form’, ‘add_checkout_top_text’, 11 );
function add_checkout_top_text() {
wc_print_notice( ‘Gracias por su compra, lo esperamos pronto!!’ );
}
Se que esta mal y me gustaría saber como queda listo pero no se como estructurar todo eso.
con que código puedo cambiar la posición del aviso, actualmente aparece en la parte inferior de la pantalla pero quiero que aparezca enla parte superior