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

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.

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.

add_action( 'after_setup_theme', function(){
	add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 7 );
});

CSS

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

.astra-shop-thumbnail-wrap > a.add_to_cart_button {
	position: absolute;
	opacity: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	text-align: center;
	min-height: 2em;
	background: rgba(0,0,0,.7);
	border-radius: 0;
	color: #fff;
	font-weight: 400;
	padding: 5px 10px 2px;
	margin: 0!important;
}

.astra-shop-thumbnail-wrap:hover > a.add_to_cart_button {
	opacity: 1;
}

.astra-shop-thumbnail-wrap > a.add_to_cart_button:hover {
	background-color: #000;
}

.astra-shop-thumbnail-wrap .ast-quick-view-text {
	left: auto;
	right: 0;
	width: 50%;
}

.astra-shop-thumbnail-wrap a.added_to_cart {
	display: none!important;
}

@media only screen and (max-width: 921px) {
	.astra-shop-thumbnail-wrap > a.add_to_cart_button,
	.astra-shop-thumbnail-wrap .ast-quick-view-text {
		width: 100%;
	}
	
	.astra-shop-thumbnail-wrap > a.add_to_cart_button {
		bottom: 28px;
	}
}