How to Create a Pricing Table on WordPress Using HTML, ACF Pro and PayPal

Adding a pricing table to WordPress with a payment option can be a great way to generate more revenue. Indeed, if you sell products or services, it is sometimes more convenient to ask your customers to pay on your site. In this article, we'll walk you through the steps needed to create a pricing table. We will use HTML, ACF Pro (Advanced Custom Fields), and PayPal for payments. We'll cover finding a pricing table design, setting up ACF Pro, making your table dynamic, creating a PayPal API key, and integrating the table into your site.

1. Find a design for your pricing table on WordPress

The first step is to choose a design for your pricing table. Here are some examples of websites to help you.

• ThemeForest . It's a popular marketplace for WordPress and HTML themes and templates. You can go to their website and search for “Pricing Table”. You will certainly find several designs there.
• Envato Elements. It is the sister platform of ThemeForest which also offers a wide range of pricing table designs that you can use and customize.
• CodePen. It is a community of front-end developers. Indeed, via CodePen you can find examples of pricing tables in HTML/CSS/JS that you can adapt.

Take the time to choose a design that matches your site's aesthetic and is easy to customize. Here is an example pricing table that you can download via CodePen.

2. Create the repeater option via ACF Pro

ACF Pro is a powerful plugin that allows you to create custom fields for your WordPress posts and pages. For our price table, we will use the "Repeater" field to add dynamic rows.

1. Install and activate ACF Pro : If you haven't already done so, download, install and activate the ACF Pro plugin.
2. Create a field group :
   • Go to Custom Fields > Add New .
   • Give your field group a title, for example "Price Table".
3. Add a repeater field :
   • Click Add Field .
   • Choose Repeater as the field type and name it "Price".
   • In the repeater, add the necessary subfields, for example:
     • Title (text)
     • Description (textarea)
     • Price (number)
     • PayPal button (text for product ID)
4. Configure display options :
   • Define where this group of fields should appear, for example on a specific page or custom post type.

3. Make your pricing table dynamic

To dynamically display your pricing table data, you need to add code to your page template.

1. Create a template file :
   • Go to your WordPress theme and create a new template file, for example template-pricing-table.php .
2. Add the HTML and PHP code :
   • Use the following code to retrieve and display data from the ACF repeater:

4. Create PayPal API key

For PayPal buttons to work properly, you need to create a PayPal API key.

1. Log in to your PayPal account .
2. Go to the API section :
   • Go to Dashboard PayPal Developer (developer.paypal.com).
   • Create an app to get your Client ID and Secret .
3. Configure PayPal buttons :
   • In your PayPal account, create payment buttons and copy the corresponding IDs. These IDs will be used in the "PayPal Button" field of your ACF repeater.

5. Add the table to the website

There are several ways to add your pricing table to your site:

1. Use a shortcode :
   • Add a shortcode in your functions.php file to include your template.

 function display_pricing_table() {
ob_start();
get_template_part('template-pricing-table');
return ob_get_clean();
}
add_shortcode('pricing_table', 'show_pricing_table');

2. Use a reusable block :
   • Create a reusable Gutenberg block to include your pricing table. Add the HTML and PHP code directly into the block.

Conclusion

By following these steps, you can create a dynamic and functional pricing table on your WordPress site. This method allows you to easily customize and manage your prices while integrating secure payments via PayPal. Try these techniques and adapt them to your specific needs to provide an optimal user experience on your site. Do you have any questions ? Contact us .