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. 

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:

WooComerce Products

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):

Add or Import a new WooCommerce product

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 WooCommerce Product ID

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. 

Author: David Gavrilut

David is a content marketer at Thrive Themes, previously in charge of the Thrive Knowledge Base articles and video tutorials. When not at his working desk, he enjoys driving like an enthusiast, visiting the beautiful cities of Transylvania for the 100th time. Either that, or he could end up watching an entire season of Friends in one day.

  • David Paul says:

    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

    • David Gavrilut says:

      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. :)

  • Volker H says:

    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 ;-)

    • David Gavrilut says:

      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 :)

  • Wouter S says:

    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​

    • Lucia G says:

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

  • ayush singh says:

    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!

  • Rora says:

    Thanks for the info!

    • David Gavrilut says:

      You’re very welcome, Rora :)

  • James Thomas says:

    I always learn something new from these tutorials

  • >

    Join Thrive University (it's FREE!)