57
Today’s challenge has been on the top of my to-write list for a while. And thanks to one of Business Bloomer’s subscribers, I finally decided to post a quick tutorial. Here’s how to align the “Product Gallery” thumbnails to the side of the main Single Product Page image, no matter the device.
PHP Snippet (Part 1 of 2): Change the Number of WooCommerce Product Gallery Columns
First, we need to make sure our Product Gallery has 1 image per row if we want to display it vertically (the default is 3 if I’m not wrong).
/** * @snippet Change Gallery Columns @ Single Product Page * @how-to Get tutoraspire.com FREE * @sourcecode https://tutoraspire.com/?p=20518 * @author Tutor Aspire * @compatible WooCommerce 3.5.4 * @donate $9 https://tutoraspire.com */ add_filter ( 'woocommerce_product_thumbnails_columns', 'tutoraspire_change_gallery_columns' ); function tutoraspire_change_gallery_columns() { return 1; }
For Storefront theme:
/** * @snippet CSS to Move Gallery Columns @ Single Product Page * @sourcecode https://tutoraspire.com/?p=20518 * @author Tutor Aspire * @compatible WooCommerce 3.5.4 * @donate $9 https://tutoraspire.com */ add_filter ( 'storefront_product_thumbnail_columns', 'tutoraspire_change_gallery_columns_storefront' ); function tutoraspire_change_gallery_columns_storefront() { return 1; }
CSS Snippet (Part 2 of 2): Edit the WooCommerce Product Gallery CSS
Second, we need to “move” the Product Gallery beside the image. This is pretty basic CSS you can place in your child theme’s stylesheet.
For Storefront theme:
/** * @snippet CSS to Move Gallery Columns @ Single Product Page * @sourcecode https://tutoraspire.com/?p=20518 * @author Tutor Aspire * @compatible WooCommerce 3.5.4 * @donate $9 https://tutoraspire.com */ /* 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%; }