Plugins y algunos trucos para WP

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.


4 Respuestas to “Cambiar el número de columnas en productos de Woocommerce”

  1. Christian dice:

    ¿Donde tengo que poner el código css?

    • admin dice:

      Hola! normalmente en tu plantilla de WordPress tienes un lugar llamado CUSTOM CSS donde puedes añadir este código. Si no lo ves, es a APARIENCIA – EDITOR, y allí busca el archivo style.css y lo añades al final.
      Como siempre haz copia de seguridad antes de hacer este tipo de modificaciones!

  2. Manu dice:

    Hola, pues a mí no me funciona, pongo el código para establecer 5 columnas y de una fila de 5 productos, 3 se quedan arriba y 2 se colocan abajo ¿qué puede estar ocurriendo? Gracias y saludos.

  3. mil gracias hermano Dios te bendiga

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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