Seleccionar página

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.

 

 

Si quieres más sobre Woocommerce, Divi y tiendas online apúntate a mi academia online: -> cursotiendaonline.com
IR A MI ACADEMIA

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

Poner sidebar o barra lateral (filtros) encima de los productos en Woocommerce con Divi en dispositivos 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”

 

Mover sidebar filtros encima de productos con woocommerce y Divi para móviles

 

Introduce ahí el código y haz clic en “Guardar cambios”

 

Poner código css para mostrar sidebar barra lateral encima de productos en moviles con Woocommerce y Divi

 

Si quieres más sobre Woocommerce, Divi y tiendas online apúntate a mi academia online: -> cursotiendaonline.com
IR A MI ACADEMIA

 

 

2.- Revisar si aparecen los filtros (sidebar) encima de los productos con Woocommerce

 

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.

 

 

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)
2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)
 

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com