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', ''.$aviso.'
');
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.