Adding A Quick Add To Cart Button To The Woocommerce Shop
This post has not been updated for a few years and I can getting a few comments that it no longer works using Divi. I don’t use Divi any more so if anyone has any updated code that works please post below and I can update the post & credit.
So, this started when a client of ours wanted a way to add products quickly to their cart from the main “shop” page within WooCommerce and the Category Archives as well. We were using Divi (this can be used for any theme) and we now have the following solution. Here you can see the change:
So, first off let me just say that we are using Font Awesome throughout the site anyway, so we thought we would integrate it into this area as weel with the cart icon.
The first thing to do is get to the WordPress dashboard and get into your theme files. Go to Appearance >> Editor – This tutorial is presuming you are correctly using a child theme.
On the right hand side you will see the relevant files that we will need to access, those being the functions.php and the style.css file. First off, let’s paste the correct code into the functions file. Click on the functions.php link on the right hand side.
//FONT AWESOME ENQUEUE
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');
// ADDING CART ICON TO PRODUCT ARCHIVES
add_action('woocommerce_shop_loop_item_title','replace_add_to_cart');
function replace_add_to_cart() {
global $product;
$id = $product->id;
$sku = $product->get_sku();
echo '';
}Above you will see the code for adding Font Awesome to our site, as well as adding the relevant code for the Add To Cart button. All the code is doing, is pulling through the relevant product ID and Title for the product and adding it to the cart for us. So copy the code above, and paste it at the bottom of your functions.php file.
Next up, we need to then need to navigate to the style.css file and copy the code below, and paste it into your stylesheet and save.
.woocommerce ul.products li.product .button::before {
content: "\f217";
font-size: 30px;
font-family: FontAwesome;
color: #333 !important;
}
.woocommerce ul.products li.product .button {
margin-top: 0;
padding: 0 !important;
z-index: 9999;
float: right;
}
.woocommerce a.button.ajax_add_to_cart {
font-size: 17px;
background: none !important;
border: none !important;
text-align: center;
}
.woocommerce a.button.ajax_add_to_cart:hover {
font-size: 17px;
background: none !important;
border: none !important;
}
.woocommerce a.button.ajax_add_to_cart:hover::after {
display: none !important;
}
Save the style.css file, and reload your shop page, and it will look like this
That’s it! All done. Of course, you can play with the colours of the icons etc. But that is a nice simple way to add the function to your site.
I am working on a way to display a popup on adding it to the cart to let you know its been added and will add that to this post once I have done that.
Any questions drop me a comment below ?