Published on Jan 23, 2020

Image Flipping & Floating Cart Buttons on Product Archives in Oxygen

David Browne

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 ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right