CMS Woocommerce WordPress

[WooCommerce] Configurar número de productos a mostrar por fila

[titulo][WooCommerce] Cambiar el número de columnas para listar productos[/titulo] [resumen]
  1. Por PHP
  2. Por CSS
  3. Por shortcode
[/resumen] [titulo]Por PHP[/titulo]

Si estás creando un tema, puedes hacer uso de la siguiente función en el functions.php:

/**
 * 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 por fila
	}
}

En el caso de que estés trabajando sobre un tema ya creado, es bastante posible que la función de arriba ya esté definida. Así que o bien la buscamos y la editamos, o la anulamos para volver a definirla:

/ **
 * Anular la especificación predeterminada del tema para el producto # por fila
 * /
función loop_columns () {
retorno 5; // 5 productos por fila
}
add_filter ('loop_shop_columns', 'loop_columns', 999);

 

[titulo]Por CSS[/titulo]

El principal problema de aplicar CSS radica en que, aunque modifiquemos el porcentaje de ancho de las columnas para forzar que en lugar de, por ejemplo, 4 productos por fila, se muestren 3, esto hará que los productos se organicen de la siguiente manera:

Para evitar eso, hacemos uso de la propiedad CSS [codigo]clear[/codigo].

Esta propiedad es descrita por Mozilla de la siguiente forma: [subraya_verde]»La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear aplica a ambos elementos flotantes y no flotantes.[/subraya_verde]

Por lo tanto, el código a aplicar ssería algo como lo siguiente:

@media screen and (min-width:1024px) {
    .woocommerce ul.products li.product { 
	width: 21% !important;
	margin: 2% !important;
	clear: none !important;
    }
    .woocommerce ul.products li.product:nth-child(4n+1) {
	clear: both !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
    .woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last {
        clear: right !important;
    }
    .woocommerce ul.products li.product:nth-child(4n+1) {
         clear: none !important;
    }
}

 

[titulo]Por shortcode[/titulo]

El shortcode es el siguiente:

[recent_products per_page="12" columns="5"]

Donde [codigo]per_page[/codigo] indicará el número de productos a mostrar por página y [codigo]columns[/codigo] el número de productos por fila.

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario