Cambiar tamaño productos Woocommerce en Divi  

Hola

Veo que ya esta maquetado para que aparezcan 4 productos por fila, supongo que quieres mostrar menos productos por ejemplo 3 en este caso si que aumentaría el tamaño de las imágenes.

Revisa :
https://www.webempresa.com/foro/36-Pack-Tienda-WordPress/143863-%C2%BFC%C3%B3mo-cambiar-el-n%C3%BAmero-de-productos-por-fila.html

Saludos.

Muchas gracias. ¡Funcionó! 🙂
Ahora tengo otro problema, la distancia entre todas las fotos de productos no es la misma en toda la tienda u además, en navegadores como Safari, se ven dos elementos en una fila, luego uno, dos, uno....

¿Cómo puedo solucionar ambos problemas?

Hola Beatriz.

¿ Modificaste el numero de productos a mostrar por 3 ? como te comento Jhon en la anterior entrada?

un saludo

Hola!
Si, este es el código que eh introducido en funtions php:

add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3;
}
}

y este en el css:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin: 0 2.8% 2.992em 0;
width: 27.55%;
}

(he aumentado un 10 % el ancho, que estaba en 17,55%)

Os dejo más info sobre la información que tengo también en funtions php, por si estuviera afectando.

Hola

Veo el problema en :
Contenido solo visible a usuarios registrados

Es algo que tu theme según veo esta forzando a desplazar el ultimo producto, puedes evaluar poner código adicional

.et_vertical_nav.archive.et_full_width_page.woocommerce ul.products li.product{
	margin-right:0px!important;
	width:24%
}
.et_vertical_nav.archive.et_full_width_page.woocommerce ul.products li.product:nth-child(3n+1){
	clear:none!important;
	float:left!important;
}

Usa este código al final del archivo :
wp-content/themes/divi-child/style.css

Saludos.

Muchas gracias por el código, pero no funciona. De hecho, he vaciado caché y regenerado las miniaturas y se ven aún más descolocado.

¿Existe otra posibilidad que no sea un plugin?

Hola

No veo que hayas agregado el código, asegurate que se encuentre al final de este archivo:
Contenido solo visible a usuarios registrados

Saludos.

Buenos días. Me pillaríais haciendo cambios y haciendo pruebas, pero volví a poner el código y no me funciona, los productos siguen desordenados.

Hola Beatriz.

.- Edita el archivo style.css que encontraras en la ruta ->wp-content/themes/divi-child/style.css
.- Añade el siguiente código:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	clear:none!important;
	float:left!important;
}

Un saludo

Perfecto! Por fin ha funcionado.
Muchísimas gracias!
Ahora ya, para que todo quede perfecto, sólo falta separar los productos de la segunda y tercera fila, que están juntos.

¿Tengo que insertar algún código más en el CSS?

También, me he dado cuenta que la segunda página de productos, se ve muy desordenada. No sé si es que ese código sólo ha funcionado en la primera página de productos.

Nada, esto último que os comento se ha solucionado. Sería la caché. Sólo es solucionar la separación entre la segunda y la tercera columna.

Hola Beatriz.

Veo que volviste a poner 4 artículos 🙂
.- Añade lo siguiente al mismo archivo de antes:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
 padding: 20px;
}

Un saludo

Hola Pepe.
No sé a que te refieres, no he tocado nada del código, ni ningún plugin....
¿Puede ser que la Plantilla Divi, esté forzando a que se visualicen 4 productos por fila?
El código que me dejaste antes funcionó, sólo que la distancia entre la primera y segunda columna, no es el mismo que entre la segunda y tercera.