Jonathan Bossenger

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.

 

Posted

in

by

Jonathan

Tags:

,

Comments

37 responses to “Turn any button into an Add to Cart button”

  1. LEO Avatar
    LEO

    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!

    Reply
  2. sarah Avatar
    sarah

    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?

    Reply
    1. Jonathan Avatar
      Jonathan

      Hi Sarah, all you need to do is change the url before the ‘?add-to-cart=[ID]’ and that’s the url it will redirect to.

      So if your cart url is http://www.myawesomeshop.com/cart then your ‘add-to-cart’ button url is http://www.myawesomeshop.com/cart?add-to-cart=%5BID%5D

      Reply
      1. Hassan Omer Avatar
        Hassan Omer

        Hi Jonathan, Thanks for sharing this valuable info, I am experiencing the same kind of problem what Sarah has described, so this is my situation.
        Is it possible to add the item to the cart without redirecting to another page ?
        and even if i redirect it to the cart and the item has been added, every time i refresh the page adds the item quantity by 1.

        Reply
        1. Jonathan Avatar
          Jonathan

          Hi Hassan

          The only way you’d be able to do the add to cart without a redirect would be to call that add to cart URL via AJAX or the REST API and stay on the page.

          Reply
      2. MommaJorje Avatar
        MommaJorje

        Oh my gosh, thank you so much! This has stumped me for ages and now seems so simple!

        Reply
        1. Jonathan Avatar
          Jonathan

          Glad you found it useful 😀

          Reply
  3. sarah Avatar
    sarah

    OMG – of course! Works like a charm now:) Thank you!

    Reply
  4. James Avatar
    James

    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!

    Reply
    1. Jonathan Avatar
      Jonathan

      Hi James

      The ‘Product has been added to basked’ and ‘View Cart’ buttons are added by default by WooCommerce whenever a product is added to cart.

      One way to hide it would be via CSS, another would be to hook into the wc_add_to_cart_message filter. Here is an example of both:

      https://businessbloomer.com/woocommerce-remove-product-successfully-added-cart-message/

      Reply
  5. Alain Avatar
    Alain

    i’ve followed your great advice but for some reason my cart is always empty.

    Reply
    1. Stephanie Avatar
      Stephanie

      Hello, not sure if this will be relevant to anyone but I was also being redirected to an empty cart when I kept the brackets on either side of the product ID. When I removed them, I was redirected to a cart containing the product! So the button html that works for me looks like this:

      http://www.moonselfstudio.com/cart/?add-to-cart=1548

      🙂 Stephanie

      PS Thank you for this conversation it helped me so much!

      Reply
  6. Alex Avatar
    Alex

    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?

    Reply
  7. Alina Avatar
    Alina

    This doesnt work for me either.

    Reply
  8. Sam Garcia Avatar
    Sam Garcia

    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!

    Reply
    1. Pieter Grobler Avatar
      Pieter Grobler

      Hi Sam, did you find a solution to your problem? I am having the same issue.

      Reply
  9. dyrer Avatar
    dyrer

    Hello Sam
    the above example should be
    http://www.myawesomeshop.com/cart/?add-to-cart=123

    123 is the product ID

    Reply
  10. Christophe Avatar
    Christophe

    Hi,

    Excellent, is it possible to pass some variables too in the URL?
    On this page: http://www.ndfhs.org.uk/connection/?search=true&surname=irving&forename=&county=&birth_year=&plusminus=0&sur_match=EQ&sort_by=NAME&parish=&burial_year=
    I’d like to pass the serial no of the image so in the cart it would show the product + its serial number

    Reply
    1. Jonathan Avatar
      Jonathan

      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.

      Reply
      1. Christophe Avatar
        Christophe

        That’s great thanks. I’ll look into it.

        Reply
  11. Johnny Ringo Avatar
    Johnny Ringo

    Doesn’t seem to work any longer.

    Reply
  12. Adrian Avatar
    Adrian

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

    Reply
  13. Amit Avatar
    Amit

    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.

    Reply
  14. Nelson Miller Avatar
    Nelson Miller

    What ajax solution is there? I want people to be able to add various items to the cart from the same page without reloading or redirecting.

    Reply
    1. Jonathan Avatar
      Jonathan

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

      Reply
  15. Toni Avatar
    Toni

    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!

    Reply
    1. Jonathan Avatar
      Jonathan

      I did a quick Google search and found this – https://iconicwp.com/blog/update-custom-cart-count-html-ajax-add-cart-woocommerce/

      Reply
  16. Cory Beevers Avatar
    Cory Beevers

    I have tested this and it works really well, thank you!

    Reply
    1. Jonathan Avatar
      Jonathan

      Glad to hear it still works for you

      Reply
  17. Holly Avatar
    Holly

    Hi Jonathan,

    This is working but like a previous user it adds the product to the cart twice. Is there any reason for this, or a way I can remedy?

    Thanks,

    Holly

    Reply
  18. HbFonts Avatar
    HbFonts

    Hi,
    Can you help me
    how to make users redirect to the basket if they add the same product to the basket on one store page and product page
    thank you

    Reply
  19. linubuntu64 Avatar
    linubuntu64

    Hello, what about if I need to add a button Add to cart in the product page (for eg. product123, product ID: 123), I can not put a link of a product because I need a dynamic link (with the current product), so how can I do it?. I can not use the divi Add to cart module because can with another things like variations, I just need the button.

    Reply
    1. Jonathan Avatar
      Jonathan

      It sounds like you’re going to need some custom JavaScript here as well, so that when the button is clicked, it performs an Ajax request to trigger the ‘add to cart’ functionality. That’s a little out of scope for this article.

      Reply
  20. Andrea Avatar
    Andrea

    Holy cow. How long have I been searching on how to make my “add to cart” button more customizable in DIVI? Too long. Now this URL trick fixes it all for me. Even here in 2020! It ain’t all bad. 🙂

    Reply
    1. Jonathan Avatar
      Jonathan

      That’s awesome news Andrea, thanks for sharing!

      Reply
  21. bhuwan4485 Avatar
    bhuwan4485

    Hi Jonathan,
    Thanks for sharing great information. Your content is awesome.
    Suppose I have 4 products in same page and if someone click on add to cart button of first product then how can it will redirect to the next product add to cart button on same page?

    Thanks

    Reply
    1. Jonathan Avatar
      Jonathan

      I’m actually not sure how you would do that, it sounds like you’d need a more detailed solution, over and above what the scope of this tutorial would be.

      Reply

Leave a Reply to AmitCancel reply

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