Cambiar el número de productos por fila en WooCommerce

número de productos por fila en WooCommerce

En este mini tutorial voy a explicar como cambiar el número de columnas en las páginas de productos en WooCommerce. En realidad lo que voy enseñar es a asignar la clase CSS “first” al que queremos que sea el primer elemento de la fila y la clase “last” al último. De este modo y aplicando estilos CSS podemos conseguir que nuestra tienda se muestre tal y como queremos.

Primero os muestro con un ejemplo real lo que ocurre cuando esas dos etiquetas no están correctamente asignadas. Echad un vistazo a la imagen de abajo:

márgenes entre productos incorrectos en WooCommerce
Márgenes entre productos incorrectos por culpa de las etiquetas “first” y “last” en WooCommerce

Como podéis ver los márgenes no son correctos en la tercer y cuarto producto. Eso se debe a que la clase CSS “first” la tienen el primer elemento y el último de la fila, mientras que la clase “last” la tiene el tercero. Lo correcto sería que la etiqueta “first” la tuviera el primer elemento y la etiqueta “last” el último. De este modo lo único que tendríamos que hacer es aplicar el siguiente CSS a nuestra hoja de estilo y la web se mostraría con los márgenes adecuados.

.last{margin-right:0;}

Veamos como hacerlo. En la documentación de WooCommerce está perfectamente explicado.

Cómo cambiar el número de productos por fila en WooCommerce

Es tan sencillo como añadir el siguiente código a nuestro archivo functions.php o crear un plugin y añadir la función en él.

// Modificar la cantidad de productos que aparecen por fila en WooCommerce
function loop_columns() {
return 4; // 4 productos en cada fila
}
add_filter('loop_shop_columns', 'loop_columns', 999);

Como ves es muy sencillo. Vamos a comprobar en el código HTML de nuestra tienda online que efectivamente el cambio se ha producido:

Productos WooCommerce con etiquetas CSS correctamente puestas
Productos WooCommerce con etiquetas CSS correctamente puestas

Como podéis ver las etiquetas “first” y “last” están correctamente situadas y ahora todos los márgenes se ven bien. Lo que acabamos de hacer funciona.

¿Y si no funciona?

Si has hecho todo lo que explico en este tutorial y aún así no se muestra el número de columnas que has indicado, el problema es que el tema que estás usando no ha utilizado la función loop_shop_columns, único método recomendado por los creadores del plugin. Contacta con los desarrolladores del theme o elige otro.

Este es el código correcto para definir las columnas a la hora de crear un tema. De este modo futuros desarrolladores podrán modificar el valor con el código de arriba.

// Cambiar el número de productos por fila a 4
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 4; // 4 productos en cada fila
}
}

Para terminar un pequeño truco

Para terminar dejo un truco para mostrar distinto número de columnas en la home y el resto de páginas. Se trata de algo tan sencillo como añadir un condicional a nuestro código php:

// Cambiar el número de productos por fila a 4 en la home en el resto de páginas se verán 3
add_filter( 'loop_shop_columns', 'loop_columns', 1, 10 );
function loop_columns( $number_columns ) {
if ( is_front_page() ) {	
return 4; // 4 productos por fila en la home
}
else {
return 3; // 3 productos por fila en el resto de páginas
}
}

En este enlace y en este otro está todo

Deja un comentario

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies