Mostrar todas las miniaturas de producto

[Anamartin]

¡Hola! Estoy buscando qué tipo de código tengo que modificar en el CSS para que en la página de producto se puedan mostrar todas las miniaturas de producto. Por defecto sólo se muestran 4 miniaturas, y en Android ni siquiera aparecen las flechas de previo y siguiente para desplazarse por las imágenes. Creo que lo mejor es que se muestren todas las miniaturas para poder hacer click sobre ellas. ¿Alguien me puede indicar qué tipo de código tengo que incluir o modificar en CSS? ¡Gracias!

[Rolige]

Hola,

Necesitas compartir la URL para ver cómo está estructurado.

 

Saludos!

[Anamartin]

¡Hola! Aquí está la URL de una página de producto https://abiebrown.es/organizadores/407-profesional.html

¡Gracias!

Edited April 1, 2019 by Anamartin (see edit history)

[Anamartin]

¿Alguna idea?

[Anamartin]

Hola, he encontrado que una de las formas para que se puedan visualizar todas las miniaturas es dando más ancho al espacio donde aparecen.

En el inspeccionador de Google veo el cambio enseguida. Pero este cambio se relaciona con un element.style que no puedo editar en CSS y en el product tpl tampoco me sale resultado.

Cuando modifico el valor del element.style sí veo las miniaturas despegadas, o cuando deselecciono el valor width y lo dejo sin valor también puedo ver las miniaturas desplegadas como en la siguiente captura:

 

¿Podría editarlo dando estilos en CSS a pesar de no poder modificar el product tpl? ¿Alguna idea? Porque no sé ni en qué línea tendría que modificar los cambios.

 

¡Gracias!

 

 

 

[DavidPortfolio]

En este archivo https://abiebrown.es/themes/pf_floristy/css/product.css en la línea 249 cambia esto

#thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    margin: 0;
}

por esto

#thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    margin: 0;
	width: 100% !important;
	padding-top: 10px; /* esto opcional para que haya más espacio entre la imagen grande y las miniaturas */
}

te recomiendo también en la línea 263 añadir padding-bottom: 10px; para que haya espacio entre las miniaturas.

Y si quieres ocultar la flecha en la línea 317 pon esto

#view_scroll_right {
    right: 0;
    display: none !important;
}

 

[Anamartin]

Muchísimas gracias por toda la explicación, he copiado el código tal cual me indicas pero no se produce ningún cambio 😢

¿qué puede estar impidiendo que pueda ver el cambio?

[burrots]

refresca cache en rendimiento en el back office

[Anamartin]

¡Genial! Se han aplicado todos los cambios 👏

Me surge una duda, en el responsive para visualizarlo en dispositivos móviles, ¿puedo también ver todas las miniaturas visibles? porque este cambio lo veo únicamente en ordenador pero no en el móvil. ¿Será otra línea de código?

¡Muchas gracias!

[burrots]

seria otra modificacion.

si passas la url sera mas facil q te podamos ayudar ya q podremos mirar direfctamente.

suerte

[Anamartin]

Claro, aquí está la página https://abiebrown.es/agendas/239-personal.html

¡Gracias! 🤗

[burrots]

he ido a la url y yo si las veo. eliimina la cache del nmavegador tambien por si acaso o prueba en otro movil q no haya ido a la web

suerte

[Anamartin]

¡Genial! Tema resuelto  ¡Os debo una!