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:
- Astra Theme
- Astra Pro add-on
- 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.
|
1 2 3 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.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; } } |
Hi Paul, would you be able to do this tutorial for WooCommerce with Elementor and Elementor Hello theme? I would appreciate it greatly! Thanks!!!
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.