How can I make Woocommerce Product Gallery Thumbnail Vertical - woocommerce

Question

I am working on a woocommerce site. But can't make the product thumbnails align vertical.
I used woozoom plugin & all the thumbnails are in a 'jcarousel-wrapper'.

Answer 1

Cairo Web Design's solution works for the default installation, but if you are using the WooCommerce Storefront Power Pack extension, you need 3 additional pieces:
To the filters that change the column count, add a priority so they fire later.
Add additional elements to each CSS rule. See CSS below.
Add another css rule that moves the magnification icon to the left side. Otherwise, it covers the first thumbnail after vertically stacking.
Make a plugin or paste this into functions.php and it should work for installations that use the PowerPack Extension.
/*Based on Solution from Rodolfo Melogli*/
/* --- PHASE 1, make the gallery thumbnail column count 1 (not 3 or 4 )--- */
add_filter( 'woocommerce_product_thumbnails_columns', 'dk_single_gallery_columns', 99 );
function dk_single_gallery_columns() {
return 1;
}
// Do it for the Storefront theme specifically:
add_filter( 'storefront_product_thumbnail_columns', 'dk_single_gallery_columns_storefront', 99 );
function dk_single_gallery_columns_storefront() {
return 1;
}
/* --- END PHASE 1 --- */
/* --- PHASE 2 add CSS --- */
add_action('wp_head','dkAddVertGalleryCSS');
function dkAddVertGalleryCSS() {
echo '<style>
#media (min-width: 0px) {
/* Make image width smaller to make room to its right */
.single-product div.product .images .woocommerce-main-image, .flex-viewport {
width: 85%;
float: left;
}
/* Make Gallery smaller width and place it beside the image */
.single-product div.product .images .thumbnails, ol.flex-control-nav.flex-control-thumbs {
width: 15%;
float: left;
margin-top: 40px !important;
}
/* Style each Thumbnail with width and margins */
.single-product div.product .images .thumbnails a.zoom, ol.flex-control-nav.flex-control-thumbs a.zoom {
width: 90%;
float: none;
margin: 0 0 10% 10%;
}
/* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
left: .875em !important;
}
}
</style>';
}
/* --- END PHASE 2 --- */

Answer 2

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 Watch tutorial # https://businessbloomer.com/?p=19055
* #sourcecode https://businessbloomer.com/?p=20518
* #author Rodolfo Melogli
* #testedwith WooCommerce 2.5.5
*/
add_filter ( 'woocommerce_product_thumbnails_columns', 'bbloomer_change_gallery_columns' );
function bbloomer_change_gallery_columns() {
return 1;
}
// ---------------------
// For Storefront theme:
add_filter ( 'storefront_product_thumbnail_columns', 'bbloomer_change_gallery_columns_storefront' );
function bbloomer_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.
/**
* #snippet CSS to Move Gallery Columns # Single Product Page
* #sourcecode https://businessbloomer.com/?p=20518
* #author Rodolfo Melogli
* #testedwith WooCommerce 2.5.5, Storefront 1.6
*/
#media (min-width: 0px) {
/* Make image 75% width to make room to its right */
.single-product div.product .images .woocommerce-main-image {
width: 75%;
float: left;
}
/* Make Gallery 25% width and place it beside the image */
.single-product div.product .images .thumbnails {
width: 25%;
float: left;
}
/* Style each Thumbnail with width and margins */
.single-product div.product .images .thumbnails a.zoom {
width: 90%;
float: none;
margin: 0 0 10% 10%;
}
}
You can place PHP snippets at the bottom of your child theme functions.php file (and in case of CSS, this goes at the bottom of the style.css file) - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.