Show ‘Add to Cart’ button on image hover in WooCommerce on Astra

Do you want to display a quick “Add to Cart” button on hover over WooCommerce product images while using Astra theme? This small change can make your WooCommerce store more user-friendly by allowing easy “add to card” action.

Preview: Add to Card button on hover

Add to Cart and Quick View buttons

Minimum Requirements:

  1. Astra Theme
  2. Astra Pro add-on
  3. WooCommerce

Enable Quick View Button

Go to Appearance -> Customize page and then click on the WooCommerce -> Product Catalog panel. Scroll down to the Quick View section, select “On Image” option from the drop-down box and then click the publish button.

Display the ‘Add to Cart Button’

By default, the Add to Cart button display below the product price. Go to Theme Customize -> WooCommerce -> Product Catalog -> Shop Product Structure section and turn off the Add To Cart option.

Turn off Add to Cart button

Now we shall add the button “On Image” position. In WordPress Dashboard, go to Theme Editor page (Appearance -> Theme Editor) and open the functions.php file of your Astra child theme. Add the following PHP code at the end.

CSS

Open the style.css file of Astra child theme or go to Appearance -> Additional CSS section and add the following CSS code.

Share this Tutorial

1 Comment

  1. George F. on April 5, 2020 at 8:07 pm

    Thank you for this tutorial – it works great!

    The only “issue” I experienced is the lack of a “View Cart” button after clicking on “Add to cart”. In my case, I don’t need “Quickview” so I was wondering if it is possible to show “View Cart” where “Quickview” shows in your tutorial. And ideally, only show “View Cart” after “Add to cart” has been clicked.

Leave a Comment