Adding A Quick Add To Cart Button To The Woocommerce Shop - Innuvo - Web Design For Cornwall

Adding A Quick Add To Cart Button To The Woocommerce Shop

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

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 ?

13 Responses

  1. 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.

    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.

      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. 🙁

        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.

  2. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *