Seguramente te habrás dado cuenta de que por defecto si tienes una tienda con Woocommerce y Divi, cuando accedes a una categoría de la tienda o a la página principal de tienda y estás visualizando la web en un móvil, la rejilla de productos aparece encima y la barra lateral o sidebar con los filtros aparece debajo.
En desktop (ordenador) no hay problema porque los el sidebar aparece en un lateral, haces clic en los filtros y listo.
El problema viene en los móviles. Si los filtros aparecen debajo de los productos, nadie se va a dar cuenta que hay filtros. En este caso lo suyo sería que los filtros aparecieran encima de los productos
Pues eso lo vamos a hacer con un código CSS muy sencillo. Haremos que el sidebar o barra lateral aparezca encima de los productos.
Dependiendo del tema que estés utilizando el código será diferente.
Yo te voy a mostrar un código que sirve para el tema Divi.
Por ejemplo, para el tema Flatsome, no es necesario ningún código, ya que por defecto en móviles aparece el sidebar encima de los productos.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE: PONER SIDEBAR ENCIMA DE PRODUCTOS EN MÓVILES
El código que debes introducir en tu web es un código tipo CSS, y es el siguiente
/* *** INICIO - Sidebar encima de productos móviles *** */
@media screen and (max-width: 980px) {
body.woocommerce.archive #content-area {
display: flex;
flex-flow: column;
}
body.woocommerce.archive #left-area {
order: 2;
}
body.woocommerce.archive #sidebar {
order: 1;
}
}
/* *** FIN - Sidebar encima de productos móviles *** */
Copia el código. Ahora solo queda saber ¿Dónde he de pegar este código?
Como estás utilizando la plantilla Divi, la forma más sencilla de introducir un código CSS es desde las opciones de Divi.
Nota: en este post te explico otras opciones con las que poder insertar un código CSS en WordPress
Para añadir el código con Divi, en el menú lateral ve a: “Divi > Opciones del tema”
Después, en la pestaña “General” baja hasta la parte final de la página donde verás un área de texto denominado: “CSS Personalizado”
Introduce ahí el código y haz clic en “Guardar cambios”
Para comprobar que todo es correcto, coge tu móvil y ve a una categoría de la tienda o a la página principal de “tienda”.
Observa como ahora los filtros y demás widgets de la barra lateral aparecen primero y después la rejilla de productos.
En el caso de que no se te muestre así, y tengas instalado algún plugin de caché, busca la opción para vaciar la caché y vuelve a mirar.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
