Move product gallery thumbnails to right

Support
#1

Hello,

On my product pages, I’m trying to move the product image gallery to the right of the main product image - just like this. As well, is it possible to remove the dark grey overlay that shows over my thumbnails when not being viewed too?

I’ve added the code below to my global css, but it just moved the gallery to the bottom. Please help!

.flex-control-nav.flex-control-thumbs img {
width: 75px;
height: auto;
border: 1px solid #999999;
}

#2

Hey @RocktheHouse1876,

Thanks for writing in!

To get you issue resolve have have something like this:

Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px){
	.woocommerce .flex-control-nav.flex-control-thumbs {
	    width: 75px;
	    height: auto;    
	    float: right;
	}

	.flex-control-nav.flex-control-thumbs li {
	    display: block;
	    padding: 0;
	    margin-left: 0 !important;
	    margin-bottom: 6px;
	    background-color: transparent;
	    border: 1px solid #999999;
	}

	.woocommerce .flex-control-nav.flex-control-thumbs img {
	    width: 100% !important;
	}

	.woocommerce .flex-viewport {
	    width: calc(100% - 95px);
	    float: left;
	    margin-right: 20px;
	    background-color: #eee;
	}
}

We would love to know if this has worked for you. Thank you.

#3

Wow, that did it!

It does appear the image gallery is cutting off the main large image when it is viewed (not showing full image). Would there be a way to adjust this?

#4

Hello @RocktheHouse1876,

Thanks for updating the thread.

I checked the product page and don’t see issues with image getting cut off. Can you please share some screenshot of the issue?

In the meantime please clear browser cache and try loading website again.

Thanks.

#5

Thank you, please see links in note below. It appears it is occurring in Firefox. Cache has been cleared.

Also, when viewing in a mobile mode, the gallery jumps to the top (instead of remaining on right side) and seems to cover main image.

Thank you for your help.

#6

Hello @RocktheHouse1876,

Please have the custom css updated and use this code instead:

@media(min-width: 980px){
	.woocommerce .flex-control-nav.flex-control-thumbs {
	    width: 75px;
	    height: auto;    
	    float: right;
	}

	.flex-control-nav.flex-control-thumbs li {
	    display: block;
	    padding: 0;
	    margin-left: 0 !important;
	    margin-bottom: 6px;
	    background-color: transparent;
	    border: 1px solid #999999;
	}

	.woocommerce .flex-control-nav.flex-control-thumbs img {
	    width: 100% !important;
	}

	.woocommerce .flex-viewport {
	    width: calc(100% - 95px);
	    float: left;
	    margin-right: 20px;
	    background-color: #eee;
	}
}

@media(max-width: 979px){
    ol.flex-control-nav.flex-control-thumbs {
        position: relative;
    }
}

We would love to know if this has worked for you. Thank you.

#7

The above code mentioned has been added, though I’m not seeing the change?

Perhaps, I’m missing something. I have cleared browser cache in multiple browsers.

Thank you for your time looking into this…

#8

Hi @RocktheHouse1876,

All of that issue is caused by the custom CSS itself, you can’t really just modify the sizes of those viewports especially they are calculated dynamically by javascript.

Removing the CSS fixes the clipping issue, and the sizing now correctly goes back to normal. In Firefox, this represents the entire width of the page

	.woocommerce .flex-viewport {
	    width: calc(100% - 95px);
	    float: left;
	    margin-right: 20px;
	    background-color: #eee;
	}

I have tried that, and the active slide needs to sync on that viewport hence, the issue. Unfortunately, I already tried all possible CSS but no luck, the sizing should be controlled by javascript.

Perhaps, the only solution is completely replacing the product gallery to fit it to your preference. https://wordpress.stackexchange.com/questions/300194/the-correct-way-to-override-woocommerce-product-gallery-from-a-plugin

Thanks!

#9

Thank you for your time with this, @Rad. I really appreciate you looking into this!

#10

You’re welcome!
We’re glad @Rad were able to help you out.

#11

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