Using Advanced Custom Fields and Snippets to make a Pricing Table
In this tutorial, we will learn about using the custom fields feature of Architect by using the very popular Advanced Custom Fields plugin and Architect’s own Snippet post type, to make a product pricing table.
In this tutorial we’ll learn about:
- Custom fields
- Custom CSS
- Custom taxonomies
- Snippets
This tutorial covers custom CSS which involves techniques of the intermediate to advanced user. In time, Architect will be improved to make this aspect easier for the beginner level user.
NOTE: Architect can display any basic custom fields. Fields that return arrays or objects, like repeater fields or those in repeater fields, cannot yet be displayed. However, you could write a shortcode to display those and include that in an Architect meta field group.
This document can be viewed online at: https://architect4wp.com/codex/using-advanced-custom-fields-and-snippets-to-make-a-pricing-table/
1: Goal
Our goal is something similar to the example pricing table found at http://codepen.io/j-w-v/full/DIcJx/
We will add an extra description fields to it and use a highlight field.
2: Create the custom fields
First off, we will create a custom fields in Advanced Custom Fields in their own field group. I am assuming sufficient knowledge of ACF, so wont cover this in much detail.
We'll use five extra fields:
- Price
- Recurrence of the charge (e.g. per year)
- Text for the link to the purchase page
- URL for the link to the purchase page
- Set up the Highlight field as a checkbox with one item with the text for it being the message. e.g. "Best value!"
We could create a Features field, but will use the normal Body content.
We then set this field group to appear on Snippets (6).
In this example, I think this content is more suited to a metabox layout (7) and in the sidebar (8).
It should be noted, that ideally, since we are using a generic post type (that is, one that can be used for multiple purposes), it would be better to use WP's own custom fields feature as we could then apply the field on a per Snippet usage.
3: Create the content
Next up we need to create a Snippet for each price point.
This image shows how we do that.
- Enter the title that wil display at the top of each price table
- Enter the details. We are using a bulleted list here so we can easily reformat the items as the design required.
- Enter the catchy message in the Excerpt
- Give it a Snippet category that we can then select by in the Blueprint
- Enter all the pricing information. If this is the one you want to highlight , then check that box. Also, the Link URL will be the add to cart URL for your ecommerce software.
4: Create the Blueprint
Go to Architect and add a new blank Blueprint
5: Blueprint Design
- Enter a Title for this Blueprint
- Give it a Short name
- You should already be in the Blueprint Design but switch to it if you're not.
- Select the Grid layout Type
- Set the Limit number of posts to show to to 3 (or the number of price plans you are displaying)
- Set the number of Panels across for each breakpoint as required
- Add some space between the panels using the Panel margins
8: Filter
Now, to ensure we only get the pricing plans, we need to set the filters
- Choose the Filters tab
- In Other taxonomies, select pz_snippet_cat
- In Other taxonomy tags enter the WordPress slug name of the Snippet category to show. This can easily be guessed as it is the name you gave the category but converted to all lower case and spaces converted to dashes. e.g. Ours was Pricing table, so that becomes pricing-table
12: Setup the Price field
- Switch to the Custom field 1: price tab
- Set Show in custom field group to Custom 1
- Select price in the Field name dropdown
- Set the Field type as Number
- Set the Decimals to 0
- Enter Prefix text of $ (or your own currency symbol)
- Enter 99 in the Suffix text.
Because Architect allows you to format the prefix and suffix text independently of the main text, we can enter the $ and 99 here and then format them to achieve the same look as in the example we a copying.
16: Content Styling
The content styling is fairly self explanatory. I will highlight each item that need sot be changed, and if necessary, will makes notes.
Most of the clever styling is done with custom CSS
25: Add the custom CSS
We need a bit of custom CSS to style, in particular:
- The price
- The different coloured titles
- Features list with lines between each
MYPANELS .entry-customfield-price .pzarc-prefix-text {font-size: 32px; vertical-align: baseline;}
MYPANELS .entry-customfield-price .pzarc-suffix-text {font-size: 32px; vertical-align: super;}
MYPANELS.pzarc-panel-no_1 .entry-title {background: #EAC80D;border-bottom: 3px solid #BFA30C;}
MYPANELS.pzarc-panel-no_2 .entry-title {background: #1ABC9C;border-bottom: 3px solid #18937B;}
MYPANELS.pzarc-panel-no_3 .entry-title {background: #5D6A9A;border-bottom: 3px solid #474F6F;}
MYPANELS {border-radius: 5px;}
MYPANELS .entry-title {border-top-left-radius: 5px; border-top-right-radius: 5px;}
MYPANELS .entry-content li {border-bottom: 1px solid #777; list-style: none;padding: 15px 0;}
MYPANELS .entry-content ul {padding: 0; border-top: 1px solid #777;}
27: Additional notes
Architect version used to make this tutorial: 1.1.7
Hosting defaults can seriously affect sites with many custom fields.
Using custom fields greatly increases the number of input fields in the Architect Blueprint. Each custom field you add to a Blueprint, adds 50 input fields (between its settings and its CSS)
PHP has a default limit of max_input_vars of 1000.
If this is exceeded, some fields won't get saved.
It is easily changed by updating your PHP.ini file with this:
max_input_vars = 2000
or your .htaccess with:
php_value_max_input_vars 2000
As WordPress gets used more and more for major applications rather than just blogs and CMSes, this will become a more common problem. However, hopefully, hosts will start changing the default to 2000 or more.
For more information, see these posts: http://jonathannicol.com/blog/2014/03/02/wordpress-custom-fields-not-saving-phps-max_input_vars-may-be-to-blame/
If you are working with WooCommerce, Advanced Custom Fields, or any other plugin that adds many fields to your WordPress, the following plugin is highly recommended for debugging this issue.