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:
- Instala el plugin Code Snippets desde el repositorio de WordPress, o bien, abre el archivo
functions.phpde tu tema (preferiblemente usando un tema hijo). - Agrega este código PHP en el plugin o archivo, y guarda los cambios.
- Refresca la página del producto en tu sitio para ver los efectos aplicados.
