Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woo-checkout-field-editor-pro domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-pagenavi domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hurrytimer domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce-paypal-payments domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce-subscriptions domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wordpress-seo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114
Columnas responsive para loop de productos Woocommerce - Victor Aquino
Consigue Divi desde la web oficial a un precio especial
Ver Más

patrocinado

La mejor membresía para DiviFans

Aprovecha el plan más completo para DiviFans. Con una membresía de 1 AÑO de Guaupress obtienes: Descarga de +1000 plugins y temas WordPress, incluído +20 plugins Divi premium, por 1 año; API KEY del tema Divi para sitios Ilimitados, Pack de +500 plantillas Premium para Divi, listas para importar. La mejor membresía para DiviFans. Mira a detalle lo que ofrecemos haciendo click al botón de abajo:

Columnas responsive para loop de productos Woocommerce

PATROCINADO

El Mejor Hosting WordPress Divi. Estable, Seguro y Rápido.

Prueba el servicio de hosting más confiable y conocido del mercado: BANAHOSTING, sin riesgos con un Súper Descuento del 95% en cualquier plan. Cupón de descuento: BH1D

El loop de productos, es el conjunto de productos como lo muestra la tienda o el shortcode products de Woocommerce. Suele ser un arreglo de filas y columnas.

En éste tutorial encontrarás una herramienta que te generará el código necesario para definir el número de columnas del loop de productos en escritorio, tablet y celulares

Además también vas a poder elegir la distancia que separa cada columna y la distancia que separa cada fila. La herramienta genera todo el CSS en base a tus preferencias y te lo da listo para que lo copies y pegues en tu web. Así de fácil.

Número de columnas en loop de Productos

Dependiendo de nuestro diseño, va a haber muchas ocasiones dónde necesitemos definir exactamente qué número de columnas queremos que muestre. En el caso que se use el shortcode «products» (una excelente herramienta por cierto) bastará con utilizar el atributo «columns» para definir el número de columnas del loop. Por otro lado, para definir el loop de productos de la tienda, la cosa se vuelve un poco más complicada.

Para ambos casos, aún hay una gran limitante. El número de columnas definidas corresponde a la vista en escritorio.

¿Y que hay de la vista en tablet y celular? Pues Woocommerce utilizará sus valores por defecto. Que en muchos casos no coincidirá con nuestras intenciones.

¿Hay alguna solución todo en uno?

Psst si te interesa conocer más a fondo el shortcode products para mostrar los productos que quieras y dónde quieras, dale un vistazo a éste artículo:

Ordenando las columnas con CSS

Podemos solucionar éste problema con un poco de CSS y media queries, para cada resolución de pantallas.

Si sabes CSS, podrás definir la separación que deseas que haya entre columnas y calcular en base a ello el ancho requerido para cada producto.

No es necesario decir que hacer ésto es sumamente engorroso y más si lo vas a hacer para cada resolución. Y luego en otro diseño, otra vez.

Como aquí engreímos a nuestros a nuestros miembros premium, he creado una herramienta dónde simplemente elegirás tus preferencias y con un click tendrás todo el CSS personalizado a la mano, listo para copiar y pegar en 1 click.

Utilizando la herramienta

Veámos las opciones que podemos definir en la herramienta

Nombre de Clase del contenedor

El primer campo te pedirá la clase CSS del contenedor. Esto es opcional. Pero muy útil si deseas que el código CSS sólo se aplique al loop que se encuentra dentro del contenedor que hayas elegido. Si dejas ésta opción en blanco, el código surtirá efecto a todos los loops de productos del diseño.

El contenedor es cualquier elemento que contiene al loop. Si utilizas el shortocode products por ejemplo, y lo haz agregado dentro de un módulo. El módulo actúa cómo contenedor.

Número de columnas en Escritorio, Tablet y Celular

Aquí no hay nada que explicar, simplemente escribes el número de columnas que deseas que se muestre para cada resolución.

Espacio entre columnas

Se refiere al espacio marcado de rojo:

Espacio entre Filas

Se refiere al espacio marcado de rojo:

Ahora sí, la herramienta generadora del código CSS:

Éste contenido está restringido sólo para usuarios con una membresía premium. Si cuentas con una, inicia sesión desde aquí y desbloquearás el contenido. Si no tienes una membresía, puedes adquirirla siguiendo el botón de abajo:

Psst si te está gustando el tutorial, éstos otros te pueden interesar:

¿Dónde agregar éste código?

En cualquier parte que te permita agregar CSS personalizado. Si utilizas Divi puedes agregarlo en el módulo código entre las etiquetas:


<style>
</style>

Si utilizas Elementor o Gutenberg, puedes agregar el módulo y bloque respectivamente llamado HTML personalizado. Igualmente agregarías el código CSS entre las etiquetas style.

Si no utilizas ningún constructor visual, puedes agregar un plugin como Post/Page specific custom CSS, que te permite agregar CSS personalizado a páginas y entradas específicas.

Si deseas profundizar en cómo y dónde agregar CSS personalizado a Divi, puedes revisar el siguiente artículo:

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.

5/5 - (1 voto)

No olvides que subo trucos nuevos cada semana suscríbete a mi canal y dale a la campanita para que te enteres cuando suba uno nuevo.

Hasta la próxima!!

Artículos Relacionados

Victor Aquino

Experto en WordPress y Divi, entusiasta del SEO, Copywriting, Marketing Digital y Negocios Online en general. Amante de la vida y tu webmaster de confianza.

Contactar

¿Quieres invitarme un cafécito?

Así podré estar más despierto para crear más contenido gratuito como éste 😛

Click Aquí

¿Tienes dudas?

0 comentarios

Enviar un comentario

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

Hosting WordPress

El mejor Hosting Premium optimizado para WordPress y Divi, al mejor precio.

Licencias 1 Sitio

Divi Theme/ Builder

Ver Más

Divi Machine

Ver Más

Divi Bodycommerce

Ver Más

Divi Flash

Ver Más

Últimos Artículos

Q

¿Quieres Desbloquear TODO el contenido?

Registrándote en nuestra web tendrás acceso a TODO el contenido gratuito oculto. Deja tu correo aquí abajo para que te enviemos un mail con el formulario de registro gratuito.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/victoraquic1/public_html/wp-includes/functions.php on line 5464