Cambiar tamaño prod...
 
Avisos
Vaciar todo

Cambiar tamaño productos Woocommerce en Divi

31 Respuestas
4 Usuarios
0 Reactions
1,872 Visitas
Respuestas: 26
Eminent Member
Topic starter
 

Hola.
Estoy intentando cambiar el tamaño de las imágenes de mi tienda invitacionesdeboda.pixelandlove.com/tienda, para hacerlas de un mayor tamaño.
He leído otros enlaces vuestros y buscando por internet, pero nada me ha dado resultado.

He visto que tal vez tenga que cambiar el css de mi plantilla que es DIVI, pero no sé como hacerlo, ni que poner.

También, cómo puedo cambiar el número de productos por fila en esta plantilla?

Muchas gracias.

Un saludo

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 04/11/2016 5:37 pm
Jhon
 Jhon
Respuestas: 44989
Soporte CMS Webempresa
 

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.


 
Respondido : 04/11/2016 8:59 pm
Respuestas: 26
Eminent Member
Topic starter
 

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?


 
Respondido : 07/11/2016 1:05 pm
Pepe
 Pepe
Respuestas: 41101
Illustrious Member Admin
 

Hola Beatriz.

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

un saludo


 
Respondido : 07/11/2016 2:12 pm
Respuestas: 26
Eminent Member
Topic starter
 

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.


 
Respondido : 07/11/2016 3:39 pm
Jhon
 Jhon
Respuestas: 44989
Soporte CMS Webempresa
 

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.


 
Respondido : 07/11/2016 5:48 pm
Respuestas: 26
Eminent Member
Topic starter
 

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?


 
Respondido : 07/11/2016 5:58 pm
Jhon
 Jhon
Respuestas: 44989
Soporte CMS Webempresa
 

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.


 
Respondido : 07/11/2016 9:29 pm
Respuestas: 26
Eminent Member
Topic starter
 

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.


 
Respondido : 08/11/2016 9:01 am
Pepe
 Pepe
Respuestas: 41101
Illustrious Member Admin
 

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


 
Respondido : 08/11/2016 11:58 am
Respuestas: 26
Eminent Member
Topic starter
 

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?


 
Respondido : 08/11/2016 12:48 pm
Respuestas: 26
Eminent Member
Topic starter
 

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.


 
Respondido : 08/11/2016 12:50 pm
Respuestas: 26
Eminent Member
Topic starter
 

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.


 
Respondido : 08/11/2016 12:58 pm
Pepe
 Pepe
Respuestas: 41101
Illustrious Member Admin
 

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


 
Respondido : 08/11/2016 1:31 pm
Respuestas: 26
Eminent Member
Topic starter
 

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.


 
Respondido : 08/11/2016 1:51 pm
Página 1 / 3