WooCommerce: muestra la galería de productos verticalmente (página de un solo producto)
El desafío de hoy ha estado en la parte superior de mi lista de tareas por escribir durante un tiempo. Y gracias a uno de los suscriptores de Business Bloomer, finalmente decidí publicar un tutorial rápido. Aquí se explica cómo alinear las miniaturas de la "Galería de productos" al costado de la imagen principal de la página de un solo producto, sin importar el dispositivo.
Fragmento de PHP (Parte 1 de 2): cambie el número de columnas de la galería de productos de WooCommerce
Primero, debemos asegurarnos de que nuestra Galería de productos tenga 1 imagen por fila si queremos mostrarla verticalmente (el valor predeterminado es 3 si no me equivoco).
/** * @snippet Change Gallery Columns @ Single Product Page * @how-to Get CustomizeWoo.com FREE * @sourcecode https://businessbloomer.com/?p=20518 * @author Rodolfo Melogli * @compatible WooCommerce 3.5.4 * @donate $9 https://businessbloomer.com/bloomer-armada/ */add_filter ( 'woocommerce_product_thumbnails_columns', 'bbloomer_change_gallery_columns' );function bbloomer_change_gallery_columns() { return 1; } |
Para el tema del escaparate:
/** * @snippet CSS to Move Gallery Columns @ Single Product Page * @sourcecode https://businessbloomer.com/?p=20518 * @author Rodolfo Melogli * @compatible WooCommerce 3.5.4 * @donate $9 https://businessbloomer.com/bloomer-armada/ */add_filter ( 'storefront_product_thumbnail_columns', 'bbloomer_change_gallery_columns_storefront' );function bbloomer_change_gallery_columns_storefront() { return 1; } |
Fragmento de CSS (Parte 2 de 2): edite el CSS de la galería de productos de WooCommerce
En segundo lugar, necesitamos "mover" la Galería de productos al lado de la imagen. Este es un CSS bastante básico que puede colocar en la hoja de estilo de su tema hijo.
Para el tema del escaparate:
/** * @snippet CSS to Move Gallery Columns @ Single Product Page * @sourcecode https://businessbloomer.com/?p=20518 * @author Rodolfo Melogli * @compatible WooCommerce 3.5.4 * @donate $9 https://businessbloomer.com/bloomer-armada/ *//* Make image 75% width to make room to its right */.single-product div.product .woocommerce-product-gallery .flex-viewport { width: 75%; float: left;}/* Make Gallery 25% width and place it beside the image */.single-product div.product .woocommerce-product-gallery .flex-control-thumbs { width: 25%; float: left;}/* Style each Thumbnail with width and margins */.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { width: 90%; float: none; margin: 0 0 10% 10%;} |
Subir
Deja una respuesta