Remove WooCommerce Image Thumbnail on Product Page

[clovisd]

Hello,

I’m trying to remove the thumbnails from my WooCommerce single product page to show thumbnails under the main product image from this:

To this:

However, when including the provided functions.php code from this page: https://theme.co/docs/woocommerce-images-size-changes

Nothing happens / nothing changes. It would appear this documentation is outdated / incorrect?

Please advise?
Thank you!

[prakash_s]

Hello @clovisd,

Thanks for writing to us.

In order to move the product gallery thumbnail image I would suggest you please add this custom CSS code to the cornerstone–>Theme Options —>Custom code—>Global CSS.

.woocommerce.single-product .has-post-thumbnail .flex-control-nav.flex-control-thumbs {
    top: auto;
    right: auto;
    padding: 0em;
    left: auto;
    margin: 1em 0;
}
.woocommerce.single-product .has-post-thumbnail .flex-control-nav.flex-control-thumbs img {
    height: 3em;    
} 

Please feel free to change the gallery product image height as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[clovisd]

Hey @prakash_s,

So the Themeco document page I linked doesn’t actually work as a solution? Re: https://theme.co/docs/woocommerce-images-size-changes

The CSS solution works on computer / large monitors, however it’s completely broken on Mobile. How do we fix this for mobile AND desktop since the docs are outdated / incorrect?

Thank you,
C

How do you fix this with mobile?

[ruenel]

Hello @clovisd,

The documentation should work. I have double-checked before making this reply. The given custom CSS helps align the thumbnail images on desktop screens. It may need another custom CSS to make it work flawlessly.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[clovisd]

Apologies, turns out I was having a Web Server issue that required a restart (Docker Container restart through Traefik web proxy) that was blocking functions.php changes from going through.

Thank you for providing that initial short CSS snippet, it was very helpful; I got it from here.

For other Users, here’s the solution that worked for me:

Solution

@media (max-width: 480px) {
	.woocommerce.single-product .has-post-thumbnail .flex-control-nav.flex-control-thumbs img  {
		height: 3.8em;
  	        align-content: safe center;
	} 
  [class*=woocommerce] div.product .summary  {
    margin-top: 6em;
	}
}

[prakash_s]

Hello @clovisd,

Glad that we were able to help you and thank you for sharing the information it would be helpful for the other users as well.

Thanks