Updated on December 14, 2018
In the members-only forum a user asked,
how easy / hard would it be to take this:
and utilize it for a woocommerce main "shop" page?
In this article we shall spruce up the standard WooCommerce products display on product archives (main Shop page, Category archives and Tag archives) into a sleek 3-column image-only grid. Hovering on a product image will fade in the product details: Name, Excerpt, Rating, Price and Add to cart button. When the mouse moves off a image, the product meta will fade out.
Before:
After:
When a product image is hovered:
While the tutorial has been written for Agency Pro child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Install and activate WooCommerce and Genesis Connect for WooCommerce, if you haven't already.
Set up WooCommerce.
Step 2
Add the following in child theme's functions.php:
