Plugins y algunos trucos para WP

Cómo forzar a DIVI a mantener 2 columnas en modo responsive

Ya estamos aquí de nuevo para solucionar una limitación de DIVI, que como ya sabemos todos, es una gran plantilla para wordpres, pero que tiene sus pequeños inconvenientes.

Cuando por ejemplo, tenemos una sección con 4 columnas, en versión responsive, una vez llegado a la resolución más pequeña, la de móvil, todo se transforma en una columna. Pero esto a veces no es práctico, por ejemplo cuando tenemos una sección con 4 columnas que son iconos. En móvil es muy incómodo tener los 4 iconos uno debajo de otros. ¿Cómo lo solucionamos? pues como casi siempre, con CSS.

Paso 1. Generamos el siguiente CSS en nuestra plantilla general:

@media only screen and (max-width: 479px) {
.dos-columnas .et_pb_column { width: 50%!important; }
}

Y luego aplicamos esta Clase CSS en nuestra FILA de esta manera:.


Como veis en este caso, las columnas quedan ajustadas de dos en dos, que es lo que queremos en este caso.

 

 


Cambiar el número de columnas en productos de Woocommerce

Por defecto Woocommerce sólo muestra 4 columnasde productos. ¿Como se pueden cambiar el número de columnas en woocommerce?

Lo haremos modificando el archivo theme-woocommerce.php  desde APARIENCIA-EDITOR (o bien por FTP en includes/theme-woocommerce.php)

/////////ACTUALIZACIÓN Marzo de 2016, añadiremos este código directamente al final de nuestro functions.php de nuestra plantilla. Funciona correctamente para una version de WordPress 4.4.2 y de Woocommerce 2.5.5////////////////

Si queremos 4 columnas,  en el código añadiremos  esto:

 // Change thumbs on the single page to 4 per column
add_filter( 'woocommerce_product_thumbnails_columns', 'woocommerce_custom_product_thumbnails_columns' );
if (!function_exists('woocommerce_custom_product_thumbnails_columns')) {
function woocommerce_custom_product_thumbnails_columns() {
return 4;
}
}

// Change number or products per row to 4
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 4;
}
}

Si cambiamos el 4 por un 5 saldrán 5 columnas en los productos.
Cuidado que al hacer esto, si no tenemos redimensionadas la imagenes, nos puede quedar muy feo, normalmente hay que modificar el CSS siguiente:

ul.products li.product {
position: relative;
width: 12.05%;
}

El ancho suele estar al 22.05%, cambiandolo por 12.05% es suficiente, podeís jugar a ver cómo queda mejor. Según que plantilla useis, en lugar de porcentaje podeis encontrar pixels a pelo, se tendrían que reducir. También iría bien cambiar el tamaño de letra de los productos.
Espero que esto os solucione este problema, que francamente, me ha dado muchos dolores de cabeza.


Powered by WordPress | Designed by Elegant ThemesPolítica de privacidad