Image Flipping & Floating Cart Buttons on Product Archives in Oxygen
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.
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.