Moving thumbnails from top right of product image to bottom

I followed this tutorial and was able to move my thumbnails to below the product image.

When I click on a thumbnail, it goes full screen and the only way to exit it is to use the browser back arrow. What do I need to do, so that the thumbnail I click, swaps with the main gallery?

I liked the features of the original thumbnail options, but all of my photos have details in the top right section. I really want to keep the options, just to relocate the slider to under the product. It seems like this should be an easy option without losing all the features that come stock.

Hello Sean,

Thanks for writing in! The image lightbox in your site may have been disabled. Did you add anything in your child theme that may have disable the lightbox feature? Please post your custom code in your next reply.

And if you just want to place the product gallery slider at the bottom of the single product image, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.flex-control-nav.flex-control-thumbs {
    top: auto;
}

Please let us know how it goes.

1 Like

That code didn’t work. When I add it, it just removed the thumbnails all together. I tried playing around with the function.php to add and remove the following code:

function my_wc_product_gallery_setup() {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}

add_action( ‘after_setup_theme’, ‘my_wc_product_gallery_setup’, 100 );

I also tried:

function my_wc_product_gallery_setup() {
remove_theme_support( ‘wc-product-gallery-zoom’ );
remove_theme_support( ‘wc-product-gallery-lightbox’ );
remove_theme_support( ‘wc-product-gallery-slider’ );
}

add_action( ‘after_setup_theme’, ‘my_wc_product_gallery_setup’, 100 );

but i’ve removed any custom function.php to start from scratch.

Here’s my CSS from the global section:

.woocommerce .price > .amount, .woocommerce .price > ins > .amount, .woocommerce li.product .entry-header h3 a:hover, .woocommerce .star-rating:before, .woocommerce .star-rating span:before {
color: #1abc9c;
}

.vc_row {
margin-right: auto;
margin-left: auto;
}

nav.woocommerce-breadcrumb {
margin-right: auto;
margin-left: auto;
}

.format-standard .entry-title::before {
content: “”;
}

.x-pagination ul {
display: inline-block;
margin: 0;
padding: 6px;
background-color: #7BBEE4;
border-radius: 100em;
}

.x-pagination span.current, .x-portfolio-filters-menu, .widget_tag_cloud .tagcloud a, .h-feature-headline span i, .widget_price_filter .ui-slider .ui-slider-handle {
background-color: #6290A5;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer {
color: #ffffff;
background-color: #7BBEE4;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart > span.outer {
color: #ffffff;
background-color: #7BBEE4;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart > span.outer {
color: #ffffff;
background-color: #140F28;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart {
color: #7BBEE4;
background-color: #ffffff;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart {
color: #140F28;
background-color: #ffffff;
}

mark {
background-color: white;
color: black;
}

h2.woocommerce-loop-category__title {
background-color: white;
color: black;
margin-top: 25px;
font-size: 265.7%;
}

.x-container.max {
margin-right: auto;
margin-left: auto;
max-width: 1200px;
}

.flex-control-nav.flex-control-thumbs {
top: auto;
}

My goal is to move the thumbnail section to below the single product, while keeping the features of the slider and lightbox. Please help.

Hello Sean,

Do you want something like this?

I created a test product page and have made some adjustments in your site.
Please check the page now.

Looks great RueNel! Thanks a ton!

You’re welcome!
Thanks for letting us know that it has worked for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.