How to Create WooCommerce Add to Cart Button by Product Id

WiIt is possible to create WooCommerce add to cart button by product id and use the button on forms, widgets, post or pages and even on templates. Ideally the WooCommerce add to cart button can be customized to fit a wide range of custom options.

Table of Contents

WooCommerce Add to Cart Button by Product Id

In a previous post, I explained how to change WooCommerce add to cart button to a link and also how to change WooCommerce add to cart button to read more.
These are other previous tutorials that can help you learn more on how to customize the WooCommerce add to cart button:

As you can see from the list of tutorials above, there are several ways you can customize the WooCommerce add to cart button to help you achieve different content layouts or design.

For example, when you want to create WooCommerce pricing table you may be required to create add to cart buttons that you can add to the call to action button on the pricing table.

Create Simple Product WooCommerce Add to Cart Button by Product Id

To create WooCommerce add to cart button by Product ID you need to know the product ID of the specific product you want to create the add to cart button. The product ID can be found easily on the all products overview page as explained on this tutorial on – How to Get WooCommerce Product ID.

Add to Cart Link

You can now create the add cart URL that you will not add to the button code in the place you want to display the button. In this case you can create the simple product Add to cart link as in the code below:

https://example.com/?add-to-cart=840

The URL of your site should replace the example.com part of the URL and the specific product ID should replace the product ID 840 used on the example above.

You can add this in a HTML button code as in the code below:

Create Simple Product with Quantity WooCommerce Add to Cart Button by Product Id

You can also add the quantity to the add to cart URL and you can do this using the various URL parameters that are used to add logic to the URLs.

In this case you can extend the code we created in the step above and create a simple product WooCommerce add to cart button by product ID with the quantity of 2 as follows:

https://example.com/?add-to-cart=840&quantity=2

As you can see we have added an ampersand sign and the word quantity and equated it to 2 the number of items we want to add to cart when the button is clicked of the same product.

To add this URL to the HTML code and create WooCommerce add to cart button by product ID with the quantity you should use the code below:

Create WooCommerce Add to Cart Button by Product Id with Redirect to Cart

To make it easier for your WooCommerce store customers to navigate your site, creating redirects is very important. In the past I have highlighted the many ways to create WooCommerce redirects.

Notably, I shared on these blog posts – WooCommerce create redirect after checkout and WooCommerce redirect after logout and even created the WooCommerce redirect after checkout plugin to help you implement redirect after checkout.

WooCommerce Redirect to Cart After Add to Cart

You can also create redirect to cart with the WooCommerce add to cart button by product ID. You can accomplish this by changing the code I shared on the step above to be as follows:

https://example.com/cart/?add-to-cart=840

As you see we have added the cart to the URL to ensure the user is redirect to the cart after they add the product to cart. The complete code with the HTML button code is as follows:

WooCommerce Redirect to Checkout After Add to Cart

You can also create redirect to checkout with the WooCommerce add to cart button by product ID. You can accomplish this by changing the code I shared on the step by adding the checkout on the URL above to be as follows:

https://example.com/checkout/?add-to-cart=840

As you see we have added the checkout to the URL to ensure the user is redirect to the checkout after they add the product to cart. The complete code with the HTML button code is as follows:

Conclusion

In this tutorial, we have highlighted the various ways you can create WooCommerce add to cart button by product ID.We have also seen how to add redirect to the add to cart button as well as how to add the quantity of the product to the add to cart button.

I hope you can now create WooCommerce add to cart button by product ID and use it on your pricing table, forms and within templates. You can also further customize the add to cart button using the button class I added to the code above. If you are still customizing your site, you can benefit from the ideas I shared on Ultimate WooCommerce Hide Guide.

For WooCommerce users who are have Storefront theme installed and want to customize it further, I shared a brilliant collection of 80+ WooCommerce Storefront Theme Customization Tips that will guide you on how to create a custom look of your site using the default WooCommerce theme – Storefront.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.