Turn any button into an Add to Cart button

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.

 

Filed under: Development, Divi, WordPressTagged with: ,

9 Comments

  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. OMG – of course! Works like a charm now:) Thank you!

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

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

  6. 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?

  7. This doesnt work for me either.


Add a Comment

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

Comment *

Name *
Email *
Website