Avisos
Vaciar todo

Cambiar nº columnas página tienda wp  

 
Alanah
 Alanah
Usuario eminente

Buenas tardes,
Estoy utilzando Helena theme y quería saber cómo cambiar el número de columnas de la página tienda.
He probado con un shortcode y no funciona y también lo he intentado desde el menú Woocommeres> ajustes> customizer> shop loop y tampoco logro el resultado que necesito.
Me gustaría mostrar todos los productos en una misma página y el 4 columnas.
Muchas gracias!

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 27/02/2018 5:02 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Has probado realizado los cambios en el archivo functions.php del theme?, tal como se indica en:
https://docs.woocommerce.com/document/change-number-of-products-per-row/

Te lo comento porque actualmente a nivel de código veo clases que hacen referencia a tres columnas en:
Contenido solo visible a usuarios registrados

Saludos

ResponderCitar
Respondido : 27/02/2018 6:27 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Alanah
 Alanah
Usuario eminente

Haré la prueba, gracias Jhon!

ResponderCitar
Respondido : 27/02/2018 6:33 pm
Alanah
 Alanah
Usuario eminente

He probado sustituyendo el el númeto 3 por el 4 en el siguiente código:

// 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; // 4 products per row

El resultado es que salen 2 columnas de productos en vez de 4, como lo pongo para que salgan 4 columnas?
También he visto que en el mismo archivo puedo cambiar el número de productos que salen por página, como solo tengo 18 productos, me gustaría que salgan todos en una sola pagina, qué parte del código debo modificar?

ResponderCitar
Respondido : 27/02/2018 8:48 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Alanah.

Si no te quieres complicar la vida, utiliza un plugin.
-> https://wordpress.org/plugins/woocommerce-product-archive-customiser/

Con este plugin puedes indicarle cuantos productos quieres que se muestren por columna y lo s que quieres que se muestran en una página.

Si te funciona bien, perfecto, si no empezaremos a ver el codigo y como modificarlo.

Un saludo

ResponderCitar
Respondido : 28/02/2018 11:08 am
Alanah
 Alanah
Usuario eminente

Hola Pepe,
He probado este pluging, pero lo instalo y no me aparecen las opciones que quiero modificar. Accedo a el plugin a través del menú apariencia>personalizar. Hay otra forma?
También instalé otro que se llama WooCommerce Customizer, este muestra la opción de customizer en el menú de Woocommerce como otra pestaña más, pero el resultado que me da al cambiar los valores, es el mismo que si cambio el archivo php directamente. Siempre se muestran 2 columnas en vez de 4.

ResponderCitar
Respondido : 28/02/2018 11:59 am

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Alanah.

Una vez instalado y activado tienes que acceder a través del live de tu web apariencia-
> personalizar

Verás que tienes un bloque Product Archives

Si despliegas ese bloque veras las opciones.

El que te muestre 4 por linea dependerá de la plantilla igual hay que modificar las opciones del tamaño de las imagen para que se muestran cuatro en el bloque pero bueno puedes jugar un poco con las opciones haber si funciona bien y si con otras opciones se muestra entonces veremos de modificar los tamaños de las imágenes.

Un saludo

ResponderCitar
Respondido : 28/02/2018 2:24 pm
Alanah
 Alanah
Usuario eminente

Hola Pepe,
El plugin está activo, pongo los valores que quiero y como te digo, solo consigo que aparezcan 2 columnas. Te adjunto capturas de pantalla.
Seguramente será una tontería como suele pasar, pero no doy con el problema.
Gracias!

ResponderCitar
Respondido : 28/02/2018 3:32 pm

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Primero deja configurado a 4 columnas ya que actualmente en código veo que esta a 5 columnas, luego prueba agregar el siguiente código CSS:

ul.products li.product{
    width:17%!important;
}

Puedes agregar este código al final del archivo style.css de tu theme

Saludos.

ResponderCitar
Respondido : 28/02/2018 4:56 pm
Alanah
 Alanah
Usuario eminente

Hola Jhon,
He puesto el código que me dices en style.css y si que muestra las 4 columnas pero no ocupaba el ancho completo de la pantalla (quedando un espacio en blanco a la derecha), así que aumenté el porcentaje del width a 22% y así si que ocupa la pantalla.
Ahora el problema es que para tablet y móvil no funciona porque se muestran 2 columnas y con las imágenes muy pequeñas.
Tampoco puedo resolver el que se muestren todos los productos en la misma página.
También me gustaría poner el el botón de añadir al carro en la página de los productos y el plugin instalado tiene la opción pero no funciona.
Sé que son muchas cosas, pero creo que todo está en el mismo archivo, no sé si es posible resolver todo a la vez.
Gracias!

ResponderCitar
Respondido : 28/02/2018 5:36 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Adicionalmente para la parte de responsive agrega el siguiente código CSS:

@media (max-width: 768px){
    ul.products li.product{
        width:46%!important;
    }
}

Para tus otras consultas mejor tratarlas en un hilo de discusión diferente con el título adecuado.

Saludos.

ResponderCitar
Respondido : 28/02/2018 6:39 pm
Alanah
 Alanah
Usuario eminente

Hola
He agregado el código y siguen saliendo 2 columnas de productos para tablet y móvil.
He intentado modificar el %, pero siguen apareciendo 2 columnas.
Gracias

ResponderCitar
Respondido : 28/02/2018 6:53 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Es posible que sea un tema de cache ya que al volver a refrescar cache de mi navegador ya se ve correctamente, ver imagen

Saludos.

ResponderCitar
Respondido : 28/02/2018 9:20 pm
Alanah
 Alanah
Usuario eminente

Yo pensaba que se mostraría en una columna para móviles, pero por ahora lo dejo así, no se ve mal.
Muchas gracias!

ResponderCitar
Respondido : 28/02/2018 10:45 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación