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/

Goal

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.

Create the custom fields

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.

Create the content

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.

Create the Blueprint

4: Create the Blueprint

Go to Architect and add a new blank Blueprint

Blueprint Design

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

Content Selection

6: Content Selection

Switch to the Content Selection screen
Set the Content source as Snippets

Content Selection Settings

7: Content Selection Settings

Back when we setup each of the price points, we set a page order. At this point we now want to set Architect you use that information.

Switch to the Settings tab
Set Order by to Page order
Set Order direction to Ascending (i.e. lowest to highest)

Filter

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

Setup the content layout

9: Setup the content layout

Switch to the Content Layout screen
Set the Components to show to Title, Excerpt, Body, Custom 1 and Custom 2
Adjust all of them in the Layout to be 100% wide
In Number of custom fields, enter 4 (i.e. Price, recurrence, link and highlight)

Publish/Update now

10: Publish/Update now

It is very important after adding, removing or changing custom fields that you publish or update this Blueprint. That enables Architect to add or remove the extra tabs for those fields.

Unlink the title

11: Unlink the title

Select the Titles tab
Turn off Link titles (this is fairly normal for Snippets, as they will almost always be used to show the information then and there, rather than linking to it)

Setup the Price field

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.

Setup the Recurrence field

13: Setup the Recurrence field

Switch to the Custom field 2: recurrence tab
Set Show in custom field group to Custom 1
Select recurrence in the Field name dropdown

Setup the link field (the Add to cart link)

14: Setup the link field (the Add to cart link)

Switch to the Custom field 3: link_text tab
Set Show in custom field group to Custom 2
Select link_text in the Field name dropdown
Select link_url as the Link field

Setup the Highlight field

15: Setup the Highlight field

Switch to the Custom field 1: highlight tab
Set Show in custom field group to Custom 2
Select highlight in the Field name dropdown

Our Highlight field is a checkbox with one item, if it had multiple items you could set a different highlight message for each price plan.

Content Styling

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

General content styling

17: General content styling

Switch to the Content Styling screen

Rather than giving the whole panel a background colour, we just give the components group a background colour. This enables us to have the Highlight message appear to be hanging off the bottom of the relevant pricing plan.

Style the Titles

18: Style the Titles

Style the Body content (our list of advantages)

19: Style the Body content (our list of advantages)

With the body content, we have to style both the main content area (usually class .entry-content) and the paragraphs. This is because some themes style these independently.

Style the Excerpt (our short message about the advantage of each plan)

20: Style the Excerpt (our short message about the advantage of each plan)

Likewise, with the excerpt, we have to style both the main excerpt area (usually class .entry-excerpt) and the paragraphs. Again, this is because some themes style these independently.

Style the Price field

21: Style the Price field

In the line height, I've set this as 1 simply to show off this alternative way of setting a line height.

Style the Recurrence field

22: Style the Recurrence field

Style the Link text field (i.e. Add to cart)

23: Style the Link text field (i.e. Add to cart)

Note step 5 and 6. It is important to style these as this field is a link.

Style the Highlight field

24: Style the Highlight field

Add the 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;}

This is the custom CSS used if you want to copy and paste it.

Checking it out

26: Checking it out

And finally, display it with whichever method you want (I used a shortcode) and then you can see it all completed.

Additional notes

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/

http://docs.woothemes.com/document/problems-with-large-amounts-of-data-not-saving-variations-rates-etc/

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.

https://wordpress.org/plugins/wp-max-submit-protect/p