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 ?

Related Articles

20 Responses

    1. I don’t use Divi any more, so can’t comment really, this blog post is a bit out of date now to be honest.

      I will update it now at the top so people know it’s no longer working. I may try and find time to get it updated for the latest version at some point

      Reply

    2. Hi try this instead add this code in the functions.php file of the child theme:

      // Add “Add to Cart” buttons in Divi shop pages
      add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 20 );

      Reply

    1. Hey Steve,

      I’d probably have to re-visit this now with all of the updates – been a while since i took a look at where we were with this

      Reply

  4. Hey there would you mind sharing which blog platform you’re using?
    I’m planning to start my own blog soon but I’m having a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I’m looking for something
    completely unique. P.S Apologies for getting off-topic but I had to
    ask!

    Reply

  5. HI i tried your code but icon is showing before add to cart button but i don’t want to show button i just want to show cart icon.
    can you please tell me how i can do that??

    Reply

    1. Man alive! Right, I’ve changed the whole way that code is now displayed – are you still not seeing it now?

      Reply

  8. Hi there, your codes seem to be missing. I am looking for a way to use default Woocommerce cart presentation tu use numerous dedicated plugins but it seems that Divi overrides to much the Woocommerce styles. Would you have any suggestions here. I am especially looking for a preview mode and eventually a list view for archives… Many other plugins like a Wishlist seems also interesting but using divi theme seems counter-indicated.

    Reply

    1. If you turn off AdBlocker then they will reappear. Not sure why that is the case.

      I am not 100% sure on what you want with the questions you have asked? Divi is a fantastic tool that can achieve pretty much anything you want, so I am sure it will be possible.

      Reply

      1. I’ve tried 3 different browsers, 2 of which don’t have ad blockers at all, and I still can’t see the code. Even tried incognito. 🙁

        Reply

        1. Ok, how about now? I have completely re-saved the code and the issue seems to have gone on all browsers I am viewing in now.

          Reply

Leave a Reply

Your email address will not be published.