In this article we'll take a look at what's the easiest way of adding a WooCommerce button on a pricing table in WordPress.
When visitors will click on the WooCommerce button, the product that it's linked to will be added to the their shopping cart.
First of all, don't forget to check out the video at the top of the page for the full experience.
More...
Set Up the WooCommerce Products
Before actually adding the button, you need to link it to a product / service that you are selling on your website.
To do this, look for the "Products" entry in the WordPress admin dashboard:
Look for the Products item in the WordPress admin dashboard
Here, you will have all your products listed.
If you don't have any of them yet, you can always add a new one, either by clicking on "Add New" or "Import" (to import a CSV file):
You can either add a new product or import one as a CSV file
Then, you can go ahead and give your product a name, attach an image, set the price, etc.
Once you have a product that you are ready to sell and you want to create a buy button for it, look for the ID of that product:
Look for the Product ID and copy it
Link the Button to the Product
Moving forward, we'll add a pricing table on one of our pages.
For this step, you can use the WordPress editor or some plugins that has a pricing table option.
We'll (obviously ;-)) use our Thrive Architect plugin.
To add a pricing table, simply drag the "Pricing Table" element from the editor onto the page:
Look for the Pricing Table element and add it on the page
Then, you can choose a template for the pricing table and make any additional changes you see fit.
On the pricing table you usually have 3 boxes, you can use each box to represent one of your products.
To link a buy button to one of the products, simply select it and look for the "Button Link" field on the sidebar:
Look for the Button Link field on the sidebar, after you have selected the button
In this field, type the following link:​
http://yourdomain.com/cart/?add-to-cart=ID​
- Instead of yourdomain.com type in the actual URL of your WordPress website
- Instead of ID, type in the ID of your WooCommerce product, as it was highlighted above
You can then click on "Save", and you're done!
Now, when a visitor will click on that button, the product will be added to his shopping cart and he will be sent to a checkout page.
Your Turn
Are you going to use Thrive Architect to create awesome pricing tables and buy buttons linked to WooCommerce products? Let us know in the comments below.
David,
Yes great info! This can be very useful..if you want to build more customized product pages instead of using the standard woo templates. Thanks!
Also, David do you know how we can customize the cart or checkout page. To add like an extra offer or impulse buy when customer is checking out? If we could that would be still sales tremendously!
Appreciate you and everyone at Thrive…keep killing it!
-David Paul
Thanks for your comment, David!
So, the Cart and Checkout pages can be somewhat customized with the Thrive Themes products.
I say somewhat because you cannot customize the fields or the buttons on those pages, because those are specific WooCommerce features.
BUT… You can use Thrive Architect to display elements above or below the WooCommerce content on those pages. You can also use Thrive Leads to display opt-in offers on those pages, Thrive Quiz Builder to display quizzes/surveys, Ultimatum to display countdown timers, and so on. 🙂
Is there a tutorial on Woocommerce modifications?
Is it possible to build a product page in TA? That would be great.
The product page can’t be customized with TA, unfortunately, because it is custom built by WooCommerce…
Thank you for the Tipp, works great.
In my case, I can´t use it because I´ve implemented Prices by User Role. So existing Customer should see reduced prices…..
When I use LP´s for each product, what I do, than I usw a ‘add to cart’ woocommerce shortcode button which also shows the price respective to the User Role.
what I´m looking for, is the possibility to customize e.g. cart and checkout pages with TA or TTB 😉
Thanks for the info, Volker 🙂
In terms of customizing, you can pretty much customize the cart and checkout pages with our products.
Now, you cannot modify the fields and the actual data on those pages, because that is specific WooCommerce content.
But, you can add other elements on those pages, with Thrive Architect, or display an opt-in form with Thrive Leads or a quiz with Thrive Quiz Builder, and so on 🙂
Thx for the answer. I doesn´t want to change woo fields or something like that. therefore a lot of plugins are available (e.g. booster).
What I meant, were styling things which I do with the AVADA theme or with CSS right now.
I am looking for the new Theme Builder in order to unique customer experience in landing pages, blog and other pages. In this context it would be cool to have the opportunity to define e.g. headlines (h1,2,3…) and woo headlines…, input fields a.s.o. from design perspective.
anyway, hopefully the new Theme Builder will go live tomorrow ;-))
Nice tuturial. Good to know: you can also use an url that goes straight to the checkout and skips the cart: http://yourdomain.com/checkout/?add-to-cart=ID​
Thank you so much for this, Wouter! It’s something that always bothered me about connecting Woocommerce with my pricing tables and now I know how to skip the cart for a single product purchase! You rock! 🙂
Awesome! Thanks for the tip, Wouter 🙂
Great blog post David! I’m just getting started online and I think if I read posts like yours often enough it will be engrained in me to be REAL. Thanks for the tips!
You got it! If you are in the need for any new tutorials which could also be useful for anyone else starting out, let us know 🙂
Cheers!
Thanks for the info!
You’re very welcome, Rora 🙂
Is this also possible when you have your Woocommerce webshop on a subdomain?
I haven’t really tested WooCommerce this far, but I don’t see why not.
I always learn something new from these tutorials
I’m really glad to hear that, James 🙂