WooCommerce Product image shift when hover

Sounds like something within your theme. Usually people add a hover to themes for shops/woocommerce so when it hovers it shows the first image from the gallery and that first image is usually the product at another desired angle (example: With clothes, the main image is the front view of the item and the first gallery image would be the back view of it so a person doesn’t have to click and view the item to see how the back of it looks, making easier shopping and less time wasted looking at each product individually).

A simple fix is making your product image and the first image in your gallery the same image, but on the product page that would make the image show twice when looking at the product photos. I’m not a master coder from scratch, but by using the Safari inspector I see something with these classes contribute to it:

img.attachment-shop_catalog.size-shop_catalog.wp-post-image.animated.fadeInDown

and

img.attachment-shop_catalog.size-shop_catalog.wp-post-image.animated.fadeOutUp

You can try looking for those terms within your theme files and use some context clues to figure out what to change, if you’re a decent coder. You can try finding them and post the coding as well as what file they’re in and let someone else help you too….but something in that ballpark seems like the first step.

Be sure to look through your theme options up and down before editing the code though, because more than once have I changed something via code and there was a way to change it by some clicking and saving deep within my theme options. Also, any pages you change save them to a child theme because when you update your theme, it will just erase any changes. If straight up CSS fixes your problem, most themes have a section in your theme options to update/override them theme’s CSS codes that will stay intact with any theme updates.

Also, watch when you post your link. Capitalizing “store” makes a 404 error

• This reply was modified 8 years, 9 months ago by misabby.