Objective
I wanted to create a pricing table to showcase our WordPress Maintenance services. There are tons of plugins out there that can do that, but we already have the ACF plugin working on different template parts, so why not use that?
ACF is a very flexible plugin and it can be used for almost everything if you try hard enough.
We wanted to list our services in a pricing table and what is included in the different plans that we offer.
This is the end result:
Requirements
At least Bootstrap v4.5.3 and Popper.js, because we’re going to use some classes and popovers in our pricing table.
ACF PRO, we need to use the repeater feature.
Structure
The most important things that we need to have:
- Different pricing plans
- List of services offered with variance for each plan
- Popover content to explain some of the services in more detail
- Footnotes section at the end of the table
- Title for the table (not that important maybe)
Implementation
We’re going to use ACF to create different groups and repeaters in order to make this work.
Go and get the ACF JSON from the bottom of this article to import it to your ACF install.
Next, you’ll need to render the ACF fields in your page/post.
I created a PHP template part called pricing-table.php and use it to include it where I need it. You can also create a shortcode from it if you really want.
You can copy it into your code and it will work with the ACF fields that are listed at the bottom of the article.
<?php
$dm_pricing_table = get_field('dm_pricing_table');
$title = $dm_pricing_table['title'];
$prices_groupes = $dm_pricing_table['prices_groupes'];
$services = $dm_pricing_table['services'];
$footnotes = $dm_pricing_table['footnotes'];
?>
<div class="dm-page-block" id="plans">
<div class="container">
<h2 class="dm-page-block-title"><?php echo $title; ?></h2>
<div>
<div class="table-responsive mx-lg-auto">
<table class="table table-striped table-borderless table-nowrap table-vertical-border-striped">
<thead class="table-text-center">
<tr>
<th scope="col" style="width: 40%;"></th>
<?php
foreach ($prices_groupes as $key => $prices) { ?>
<th scope="col" style="width: 20%;">
<span class="d-block h2"><strong><?php echo $prices['name']; ?></strong> <?php if($prices['featured']) { ?><span class="badge bg-brand text-white rounded-pill ms-1">Hot</span><?php } ?></span>
<span class="d-block text-muted h3 font-weight-bold"><?php echo $prices['price']; ?></span>
</th>
<?php } ?>
</tr>
</thead>
<tbody>
<?php foreach ($services as $key => $service) { ?>
<tr>
<th scope="row" class="font-weight-normal">
<div class="d-flex align-items-center dm-pricing-service-name">
<span><?php echo $service['name']; ?></span>
<?php if($service['description']) { ?>
<i class='bx bx-info-circle ml-3 text-secondary' data-html="true" data-toggle="popover" data-content="<?php echo $service['description']; ?>"></i>
<?php } ?>
</div>
</th>
<?php if($service['type'] == 'checkbox') { ?>
<td class="table-text-center dm-pricing-checkmark">
<?php if($service['basic']) { ?><i class='bx bx-check-circle text-success'></i><?php } ?>
</td>
<td class="table-text-center dm-pricing-checkmark">
<?php if($service['premium']) { ?><i class='bx bx-check-circle text-success'></i></i><?php } ?>
</td>
<td class="table-text-center dm-pricing-checkmark">
<?php if($service['pro']) { ?><i class='bx bx-check-circle text-success'></i><?php } ?>
</td>
<?php } ?>
<?php if($service['type'] == 'value') { ?>
<td class="table-text-center dm-pricing-checkmark">
<?php echo $service['basic_value']; ?>
</td>
<td class="table-text-center dm-pricing-checkmark">
<?php echo $service['premium_value']; ?>
</td>
<td class="table-text-center dm-pricing-checkmark">
<?php echo $service['pro_value']; ?>
</td>
<?php } ?>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="dm-pricing-footnotes mt-4 small">
<?php echo $footnotes; ?>
</div>
<div class="text-center mt-4">
<a href="<?php echo get_home_url(); ?>/contact-us" type="button" class="btn btn-lg btn-arrow btn-brand-blue">Contact us</a>
</div>
</div>
</div>
</div>
This is some very basic CSS that is added on top of the existing table. Nothing fancy, you can do whatever you want to adjust it based on your preferences.
.table-text-center,
.table-text-center td,
.table-text-center th {
text-align: center;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #f7faff;
}
.popover-header {
font-size: 1.4rem;
}
.popover {
font-size: 1.4rem;
font-family: 'Lato';
}
.dm-pricing-service-name i {
cursor: pointer;
}
.dm-pricing-checkmark i {
font-size: 2.4rem;
}
Notes
- The Pricing groups will determine the number of columns and column details.
- The service description is displayed in a popover on click.
- For each service, you have 2 options: Checkbox or Value. If the “checkbox” is selected it will allow you to mark if the service is available on what plan, if the “value” is selected you will be able to mention the amount (text) for each plan.
- If you want to have more or less Pricing groups you will need to go and edit the ACF group imported from the JSON below for the Services to add or remove the options when the Service Type is selected. At the moment it’s created for the 3 options: Basic, Premium, and Pro.
See the example below on how the content can be completed.
Further improvements
Additionally, you can replace the options that appear when you select the Service Type.
At the moment those options are hard-coded for the 3 plans that I need in my example. If you want the flexibility to add and remove more plans because you’re going to use this pricing table for different pages with different details, you can use a repeater field in there.
So, instead of having 3 options appear when you select Checkbox or Value for the Service Type, you can have a repeater field.
That repeater field will populate the values for each column in order of repeater fields. Matching the columns for Price groups.
ACF Price Table JSON
You can grab the code below and save it in a .json file. After that you will be able to import it in ACF from Custom Fields > Tools and it will generate a field group called “Service Pages” that will have all the fields required to generate the content for the pricing table listed above.
I left some descriptions on certain fields, it should make it easier for you to know what data is populated there.
[
{
"key": "group_628cbbdce3312",
"title": "Service Pages",
"fields": [
{
"key": "field_630e1a2997242",
"label": "Pricing Table",
"name": "dm_pricing_table",
"type": "group",
"instructions": "Create a pricing table with multiple plans.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"layout": "row",
"sub_fields": [
{
"key": "field_630e1a4897243",
"label": "Title",
"name": "title",
"type": "text",
"instructions": "Title at the top of the Pricing Table.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_630e2981e52a0",
"label": "Prices groupes",
"name": "prices_groupes",
"type": "repeater",
"instructions": "Create the pricing groups with price and option to mark as featured.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "",
"min": 0,
"max": 0,
"layout": "row",
"button_label": "",
"sub_fields": [
{
"key": "field_630e29f96dd51",
"label": "Name",
"name": "name",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_630e2a006dd52",
"label": "Price",
"name": "price",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_630e2af9d8af1",
"label": "Featured",
"name": "featured",
"type": "true_false",
"instructions": "Will be highlighted.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 0,
"ui_on_text": "",
"ui_off_text": ""
}
]
},
{
"key": "field_630e1a5297244",
"label": "Services",
"name": "services",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "",
"min": 0,
"max": 0,
"layout": "row",
"button_label": "Add Service",
"sub_fields": [
{
"key": "field_630e1a5f97245",
"label": "Name",
"name": "name",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_630e1a6697246",
"label": "Description",
"name": "description",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": ""
},
{
"key": "field_630e448492d6f",
"label": "Type",
"name": "type",
"type": "radio",
"instructions": "Show checkboxes or use values for the Plans.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"choices": {
"checkbox": "Checkbox",
"value": "Value"
},
"allow_null": 0,
"other_choice": 0,
"default_value": "",
"layout": "vertical",
"return_format": "value",
"save_other_choice": 0
},
{
"key": "field_630e1a6d97247",
"label": "Basic",
"name": "basic",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_630e448492d6f",
"operator": "==",
"value": "checkbox"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 0,
"ui_on_text": "",
"ui_off_text": ""
},
{
"key": "field_630e1a7c97248",
"label": "Premium",
"name": "premium",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_630e448492d6f",
"operator": "==",
"value": "checkbox"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 0,
"ui_on_text": "",
"ui_off_text": ""
},
{
"key": "field_630e1a8a97249",
"label": "Pro",
"name": "pro",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_630e448492d6f",
"operator": "==",
"value": "checkbox"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 0,
"ui_on_text": "",
"ui_off_text": ""
},
{
"key": "field_630e4416fc48f",
"label": "Basic Value",
"name": "basic_value",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_630e448492d6f",
"operator": "==",
"value": "value"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_630e441efc490",
"label": "Premium Value",
"name": "premium_value",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_630e448492d6f",
"operator": "==",
"value": "value"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_630e4425fc491",
"label": "Pro Value",
"name": "pro_value",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_630e448492d6f",
"operator": "==",
"value": "value"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
}
]
},
{
"key": "field_630e2971e529f",
"label": "Footnotes",
"name": "footnotes",
"type": "textarea",
"instructions": "This goes under the pricing table for extra details.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": ""
}
]
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "page"
}
]
],
"menu_order": 0,
"position": "acf_after_title",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": [
"the_content",
"discussion",
"comments"
],
"active": true,
"description": ""
}
]
