Cambiar tamaño prod...
Avisos
Vaciar todo

Cambiar tamaño productos Woocommerce en Divi  

Página 1 / 3
 
Beatriz
 Beatriz
Usuario eminente

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

Citar
Respondido : 04/11/2016 5:37 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 04/11/2016 8:59 pm

Beatriz
 Beatriz
Usuario eminente

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?

ResponderCitar
Respondido : 07/11/2016 1:05 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Beatriz.

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

un saludo

ResponderCitar
Respondido : 07/11/2016 2:12 pm

Cursos Gratuitos WordPress

Beatriz
 Beatriz
Usuario eminente

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.

ResponderCitar
Respondido : 07/11/2016 3:39 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 07/11/2016 5:48 pm

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

Beatriz
 Beatriz
Usuario eminente

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?

ResponderCitar
Respondido : 07/11/2016 5:58 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 07/11/2016 9:29 pm

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

Beatriz
 Beatriz
Usuario eminente

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.

ResponderCitar
Respondido : 08/11/2016 9:01 am
Pepe
 Pepe
Soporte CMS Webempresa 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

ResponderCitar
Respondido : 08/11/2016 11:58 am

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

Beatriz
 Beatriz
Usuario eminente

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?

ResponderCitar
Respondido : 08/11/2016 12:48 pm
Beatriz
 Beatriz
Usuario eminente

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.

ResponderCitar
Respondido : 08/11/2016 12:50 pm

Beatriz
 Beatriz
Usuario eminente

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.

ResponderCitar
Respondido : 08/11/2016 12:58 pm
Pepe
 Pepe
Soporte CMS Webempresa 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

ResponderCitar
Respondido : 08/11/2016 1:31 pm

Cursos Gratuitos WordPress

Beatriz
 Beatriz
Usuario eminente

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.

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