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

Leave a Comment