[WooCommerce] Defina el número de modelos que se mostrarán en cada línea »Loop«

resumen

Desde PHP
Para css
Para el shortcode

Al hacer un tema, puede utilizar las siguientes funciones en functions.php:

/ ** * Cambiar el número de artículos por línea a 4 * / add_filter ('loop_shop_columns', 'loop_columns'); if (! function_exists ('loop_columns')) (function loop_columns () (return 4; // 4 por fila de artículos))

/ **

* Cambiar la cantidad de productos en cada fila a 4

* /

Añadir filtro('loop_shop_columns', 'Columna de bucle');

en caso de que (!Función_existencia('Columna de bucle'))

Caracteristicas Columna de bucle()

volver cuarto puesto; // 4 modelos por línea

Si está trabajando en un tema ya creado, probablemente las funcionalidades anteriores ya estén definidas. Entonces, o lo encontramos y lo modificamos, o lo sobrescribimos para redefinirlo:

/ ** * Informaciones estándar que cubren temas de artículos # por línea * / function loop_columns () return 5; // 5 productos por línea add_filter ('loop_shop_columns', 'loop_columns', 999);

/ **

* anular Este especificaciónOhNo defecto de tema con la intención de Este producto # cada línea

* /

eficienteOhNo Columna de bucle ()

volver 5; // 5 artículos por línea

Añadir filtro ('loop_shop_columns', 'Columna de bucle', 999);

El principal inconveniente con la aplicación de CSS es que incluso si cambiamos el porcentaje de ancho de columna para forzarlo a enseñar 3 en vez de, digamos, 4 productos por fila, da como resultado la organización de los productos de la próxima manera:

Para eludir esto vamos a usar propiedades CSS Despejar.

Mozilla detalla este atributo de la próxima forma: "Características CSS clear Especifique si un factor se puede colocar al lado del elemento flotante que tiene enfrente o si hay que mover (remover) a continuación. clear Adecuado para elementos flotantes y no flotantes.

Por consiguiente, el código a utilizar es el próximo:

@media pantalla y (ancho mínimo: 1024px) .woocommerce ul.products li.product ancho: 21%! esencial; Depósito: 2%! Esencial; claro: ninguno! Esencial; .woocommerce ul.products li.product: nth-child (4n + 1) clear: both! esencial; pantalla @media y (ancho mínimo: 768 px) y (ancho máximo: 980 px) . woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last clear: right! importante; .woocommerce ul.products li.product: nth-child (4n + 1) clear: none! esencial;

cuarto puesto

Sexto sitio

Séptimo sitio

numero 8

diez

quince

dieciséis

@medios pantalla con (en el límite mucho más bajo——ancho:1024 pixeles)

.Compra Este.producto al interior.producto

ancho: Veintiuno% !esencial;

alcance: 2% !importante;

Aclarar: No !importante;

.Compra Este.producto al interior.producto:Enésimo——niño(4n+1)

Despejar: Los 2 !esencial;

@medios de comunicación pantalla con (en el límite mucho más bajo——ancho: 768 pixeles) con (Máximo——ancho: 980 píxeles)

.Compra Este.producto al interior.producto.Primero, .Compra Este.producto al interior.producto.El mucho más reciente

Aclarar: legal !importante;

.Compra Este.producto al interior.producto:Enésimo——niño(4n+1)

Despejar: No !esencial;

El shortcode es el siguiente:

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

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

donde es eso Por página Muestre el número de modelos que se mostrarán en todos y cada página y Columna La cantidad de artículos en todos y cada fila.

Deja una respuesta Cancelar la respuesta