Cómo hacer responsive los filtros de WooCommerce

Un aspecto importante de una tienda online es que se puedan ordenar los productos por ciertos parámetros como el nombre, popularidad de ventas, precio, etc.

En WooCommerce tenemos una barra de filtros de productos que nos permite realizar dicha funcionalidad.

Las opciones disponibles para ordenar productos, ascendente o descendentemente, son:

• Nombre
• Precio
• Fecha de creación del producto
• Ventas (popularidad)
• Valoraciónes de los productos

Pero suele suceder en las instalaciones en español que la traducción de los textos ocupan más que en ingles y dichos filtros no se muestran correctamente, como es el caso de la siguiente imagen.

Hacer que los filtros de WooCommerce se vean bien es algo muy fácil de hacer. Con un poco de css se pueden alargar las cajas para que todo el texto se presente de forma correcta y la maquetación de estos filtros sea adecuada.

CSS para hacer responsive los filtros de WooCommerce

Tan solo copia el siguiente código CSS y pégalo en el apartado correspondiente de código CSS personalizado, si usas Avada Theme, aquí se explica dónde añadir CSS personalizado.

/*********** INI: Adecuar filtros de WooCommerce, no entran los textos***********/
.catalog-ordering .order-dropdown {width:280px;}
.catalog-ordering .current-li-content {width:280px;}
.order-dropdown ul li a {width:280px;}

@media screen and (max-width:1023px){
    #wrapper .orderby-order-container {width:320px!important;}
    .catalog-ordering .order-dropdown {width:280px!important;}
    .catalog-ordering .current-li-content {width:280px!important;}
    #wrapper .order-dropdown.sort-count ul a {width: 280px;}
    #wrapper .order-dropdown.orderby li a {width: 280px;}
}

@media screen and (max-width:400px){
    #wrapper .orderby-order-container {width:270px!important;}
    .catalog-ordering .order-dropdown {width:230px!important;}
    .catalog-ordering .current-li-content {width:230px!important;}
    
    .order-dropdown .current-li{font-size:10px!important;}
    #wrapper .order-dropdown.sort-count ul a {width: 230px!important;font-size:10px!important;}
    #wrapper .order-dropdown.orderby li a {width: 230px!important;font-size:10px!important;}
    .order-dropdown .current-li {padding:0px 5px!important;}
}
/*********** FIN: Adecuar filtros de WooCommerce, no entran los textos***********/

Este código, además de «arreglar» visualmente los filtros, hacen que se presente de forma ordenada para cualquier resolución. En la siguiente imagen se observa cómo quedarían los filtros a una resolución mayor de 1200px de ancho.

Estos filtros en una resolución pequeña, en el caso de la imagen de 320px de ancho, se verán de forma adecuada, por lo que no se perderán dichas funcionalidades.