Icono ayuda

¿Necesitas ayuda?

Contactar con asesor por WhatsApp

Saltar al contenido

Ariapsa – Diseño de páginas web México

Tutorial: Galería vertical de lado izquierdo estilo Amazon

Galería vertical de lado izquierdo estilo Amazon
Galería vertical de lado izquierdo estilo Amazon

 

Para adaptar este código CSS que cambia la posición de las miniaturas de la galería de productos de WooCommerce en escritorios y dispositivos móviles, puedes crear un snippet para agregar este estilo a tu tema de WordPress.

A continuación te muestro cómo hacerlo en forma de un snippet PHP que se puede agregar fácilmente a tu tema a través de un plugin como Code Snippets o directamente en el archivo functions.php de tu tema:

 


// Añadir estilos personalizados para cambiar la posición de miniaturas en la galería de productos
function custom_product_gallery_thumbnails() {
?>
<style>
/* DESKTOP */
.woocommerce .flex-control-thumbs {
margin: 10px 0px 10px -5px !important; /* Separación de miniaturas arriba y abajo */
width: 100% !important; /* Ancho del contenedor de miniaturas en escritorio – Horizontal */
display: flex;
}
/* Ancho de miniaturas en escritorio – Vertical (activar para vista vertical) */
ol.flex-control-nav.flex-control-thumbs li {
width: 15% !important;
}
/* Vista HORIZONTAL – Activar si se prefiere vista horizontal en escritorio */
/*ol.flex-control-nav.flex-control-thumbs li {
width: 18% !important;
}*/
/* PHONES */
@media (max-width:414px) {
ol.flex-control-nav.flex-control-thumbs li {
width: 18% !important; /* Ancho de miniaturas en móviles – Horizontal */
}
}
/* TABLETS */
@media (min-width:568px) and (max-width:768px) {
/* Contenedor de miniaturas en tablet – Vertical */
.woocommerce .flex-control-thumbs {
margin: 10px 0px 10px -5px !important;
width: 15% !important;
}
/* Contenedor de miniaturas en tablet – Horizontal (activar si es necesario) */
/*.woocommerce .flex-control-thumbs {
width: 70% !important;
}*/
ol.flex-control-nav.flex-control-thumbs li {
width: 90% !important; /* Ancho de miniaturas en tablet – Vertical */
}
}
@media (min-width:769px) and (max-width:1024px) {
/* Contenedor de miniaturas en tablet – Vertical */
.woocommerce .flex-control-thumbs {
margin: 10px 0px 10px -5px !important;
width: 12% !important;
}
/* Contenedor de miniaturas en tablet – Horizontal (activar si es necesario) */
/*.woocommerce .flex-control-thumbs {
width: 70% !important;
}*/
ol.flex-control-nav.flex-control-thumbs li {
width: 100% !important; /* Ancho de miniaturas en tablet – Vertical */
}
}
/* Miniaturas en el lado izquierdo de la página del producto (escritorio y tablets) */
@media (min-width:568px) {
.woocommerce .flex-control-nav {
position: absolute;
top: -10px;
left: 0px;
}
.flex-control-thumbs {
display: flex;
flex-direction: column;
}
}
/* Ajustes adicionales para la vista del producto */
@media (min-width:568px) and (max-width:768px) {
.woocommerce .flex-viewport {
width: 86.5% !important;
left: 100px !important;
}
}
@media (min-width:769px) and (max-width:1024px) {
.woocommerce .flex-viewport {
width: 87% !important;
left: 95px !important;
}
}
@media (min-width:1025px) {
.woocommerce .flex-viewport {
width: 85% !important;
left: 80px !important;
}
}
</style>
<?php
}
add_action(‘wp_head’, ‘custom_product_gallery_thumbnails’);

 

¿Qué hace este snippet?

  • Agrega estilos CSS personalizados para modificar la posición de las miniaturas de la galería de productos en WooCommerce.
  • Aplica diferentes estilos según el tamaño de la pantalla (escritorio, tablets y móviles), ajustando el ancho y la disposición de las miniaturas.
  • Coloca las miniaturas a la izquierda en pantallas grandes (escritorio) y las mantiene horizontales en dispositivos móviles.

Instrucciones para agregar el snippet:

  1. Instala el plugin Code Snippets desde el repositorio de WordPress, o bien, abre el archivo functions.php de tu tema (preferiblemente usando un tema hijo).
  2. Agrega este código PHP en el plugin o archivo, y guarda los cambios.
  3. Refresca la página del producto en tu sitio para ver los efectos aplicados.

 

Redactor de contenido para BLOG (SEO) en México Ariapsa
Redactor de contenido para BLOG (SEO) en México Ariapsa

 

Ariapsa - Diseño de páginas web México
×

Iniciar Sesión

El registro de usuarios no está permitido.