Using Advanced Custom Fields and Snippets to make a Pricing Table

  • Contents

  • 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.

    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:

    1. Price
    2. Recurrence of the charge (e.g. per year)
    3. Text for the link to the purchase page
    4. URL for the link to the purchase page
    5. 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.

    1. Enter the title that wil display at the top of each price table
    2. Enter the details. We are using a bulleted list here so we can easily reformat the items as the design required.
    3. Enter the catchy message in the Excerpt
    4. Give it a Snippet category that we can then select by in the Blueprint
    5. 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

    1. Enter a Title for this Blueprint
    2. Give it a Short name
    3. You should already be in the Blueprint Design but switch to it if you're not.
    4. Select the Grid layout Type
    5. Set the Limit number of posts to show to to 3 (or the number of price plans you are displaying)
    6. Set the number of Panels across for each breakpoint as required
    7. Add some space between the panels using the Panel margins
    Content Selection

    6: Content Selection

    1. Switch to the Content Selection screen
    2. 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.

    1. Switch to the Settings tab
    2. Set Order by to Page order
    3. 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

    1. Choose the Filters tab
    2. In Other taxonomies, select pz_snippet_cat
    3. 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

    1. Switch to the Content Layout screen
    2. Set the Components to show to Title, Excerpt, Body, Custom 1 and Custom 2
    3. Adjust all of them in the Layout to be 100% wide
    4. 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.

    11: Unlink the title

    1. Select the Titles tab
    2. 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

    1. Switch to the Custom field 1: price tab
    2. Set Show in custom field group to Custom 1
    3. Select price in the Field name dropdown
    4. Set the Field type as Number
    5. Set the Decimals to 0
    6. Enter Prefix text of $ (or your own currency symbol)
    7. 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

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

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

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

    15: Setup the Highlight field

    1. Switch to the Custom field 1: highlight tab
    2. Set Show in custom field group to Custom 2
    3. 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

    1. 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

    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