Turn any button into an Add to Cart button

The thing I love about blogging about WordPress is how many great questions come out of the comments of previous blogs.

Today, on my post on ‘Adding the cart button to your shop pages in Divi‘, I was asked the following:

I am trying to put an Add-to-cart button in the main Divi slider. Now Divi slider only gives an option to input a URL for the default slider button. But i was wondering is there a way to modify that button and convert it into a WooCommerce AddtoCart button?

So, there’s no way to make a slider button (or any other button for that matter) an add to cart button. But what you can do is replicate the Add to Cart functionality on any button by entering the right url.

What a lot of people don’t know is that all the Divi add to cart buttons are doing is performing the add to cart action behind the scenes. To add a product to your cart all you need to do is pass a a variable called ‘add-to-cart’ with a value that is the id of a product and WooCommerce will add that product to your cart.

So lets say your site url is http://www.myawesomeshop.com/. To turn that url into an add to cart url you just need to add ?add-to-cart=[ID] to the end of it, where [ID] is the id of the product you want the customer to add to their cart.

http://www.myawesomeshop.com/?add-to-cart=[ID]

If you aren’t sure what the product id is, just look at any product. It’s the value that appears next to ID when you hover over a product. If you edit a product, its the value for post that appears in the address bar

http://www.myawesomeshop.com/wp-admin/post.php?post=[ID]&action=edit

Also, make sure you include the trailing slash at the end of the site url, otherwise things won’t work.

So that’s it, append ?add-to-cart=[ID] to the end of your site url ( don’t forget the trailing slash ) and turn any url into an ‘add to cart’ url.

Happy Diviing.

 

Buy my Divi Plugins from
Elegant Marketplace.

23 Replies to “Turn any button into an Add to Cart button”

  1. That works perfectly 🙂 I changed the url to my cart page so now when i click on Buy Now button, it takes me to the cart page where the product has been already added to the cart 🙂

    works superb!

  2. hi there, it adds the product to my cart, but redirects the user to the homepage (instead of the cart). do I need to add something else to include the redirect to the cart?

  3. Hi there,
    The button works fine, taking user through to basket (cart) page and adding the product to the basket.
    But for some reason at the top of the basket page a banner appears saying “Product has been added to basket” along with a “view cart” button. Obviously, these aren’t necessary as the user is already on the basket/cart page.
    Do you have any idea how to stop the banner appearing?
    Many thanks!

  4. The same is going on with my cart. It used to work up till now. I think the new woocommerce update changed the way products are added to the cart. Did anyone figure out how to make this work?

  5. Hi Johnathan! It works great, but it seems now to add the product TWICE each time I press the button. Any reason comes to mind? I dont have a clue how to fix that.
    Thanks for your awesome help!

    1. Hi Christophe, you can pass additional variables in the url, you’ll just need to make sure that there is some functionality to handle and process these additional variables.

  6. Hi Jonathan,

    really thanks for this great tip!! It would be even great if you could help us in how to make this add to cart action without having to leave the page/position, I mean without having to go to any other page or refresh.

    Thanks again!!

  7. Hey Jonathan,

    Its really great what you do, I really amaze. But here I’m using this plugin Add to cart button thats not working My website which is on the localhost. I’m using it on a custom page I think thats not the problem, right? I hope you have fix on this.

    PHP ver 7,
    Divi Theme,
    Divi builder.

    Please respond.

    1. If you create an ajax call to the same url as described in this post, it will achieve the same thing.

  8. Hi Jonathan,

    I seem to have the same issue as some of the earlier posts, where the basket is always empty, but I can’t seem to see a suggested solution. Would you be able to help me out on this one please – I can’t seem to figure out what the problem is.

    Thanks so much!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.