In this premium tutorial, we'll look at how to add these common effects seen on eCommerce sites. Image flipping on the product listings with floating cart buttons that appear over the image on hover.

Live Demo

Of course, as with anything dependant on hover, only desktop users will get the benefit of the hover effect. On smaller screens, we just need to ensure the buttons are visible and in their usual positions.

To create this effect, we'll use Oxygen's Woocommerce Integration, using the 'Product List' element for the archive pages and 'Related Posts' & 'Upsell Posts' components on the single product pages.

The image that appears when the user hovers is the first image from the product gallery. To change this image, we can reorder the gallery from the product edit screen to make the correct image appear first.

Adding the Second Images to Each Product Listing

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: