How to Add a WooCommerce Button on a Pricing Table
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.
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:
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):
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:
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:
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:
In this field, type the following link:
- 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.
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.