How to Use the Pricing Section

Revision as of 18:51, 11 November 2011

Pricing Section

The Pricing section displays columns that allow your users to compare plans or products. It utilizes Custom Post Types, which allow you to easily modify and arrange your pricing columns. Add some CSS to truly customize your columns

After you have purchased, installed, & activated the Pricing section, you must then enable it in your template.

Enable the Pricing section

Enable Pricing Section

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Templates"
2. Select the Template Area that you want the Pricing section to go
   • If you select the "Page Template area, by default the Pricing section will be displayed on every page that is assigned to the type of Page Template you choose
   • If you select "Header," "Footer," or "Morefoot," by default the Pricing section will be displayed on every page regardless of the Page Template
3. Drag the "Pricing" section from the "Available/Disabled Sections" over to the "Active Sections"
4. The Section Order will save automatically

You will now see an empty Pricing section on every page that it is active on. If you don't want the Pricing section to be displayed on all of those pages, you must configure your pages to show/hide it

Hide Pricing on individual pages

Hide Pricing

From your WordPress Administration Panel:

1. Select the "Pages" panel, then "All Pages"
2. Click to edit the page that you wish to hide the Pricing section
3. On the "Meta Panel," click the "Page Setup" tab
4. Under "Individual Page Section Control," click "Hide Pricing"
5. Click "Save Meta Settings"

Because the Pricing section is displayed by default when you enable it, you will need to use this method for every page that you do not want the Pricing section displayed.

Show Pricing on individual pages

Hide Pricing by default

You can also hide the Pricing section by default, and choose the pages you want to show it on.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Templates"
2. Make sure you have the correct Template Area selected for the type of page you want to hide
3. Under "Active Sections" click "PricingOptions"
4. Click "Hide This By Default"
5. The Section Options will save automatically

Show Pricing

Now the Pricing section will be hidden by default until you select to show it on the individual page.

1. Select the "Pages" panel, then "All Pages"
2. Click to edit the page that you wish to show the Pricing section
3. On the "Meta Panel," click the "Page Setup" tab
4. Under "Individual Page Section Control," click "Show Pricing"
5. Click "Save Meta Settings"

Now that you've configured which pages will show the Pricing section, it's time to create some Pricing columns

Add New Pricing Columns

Add New Pricing

From your WordPress Administration Panel:

1. Select the "Pricing" panel, then "Add New Pricing"
2. Enter a Title for your Pricing column
3. Enter text to be displayed as your Pricing description
4. Choose your Pricing Setup Options
   1. Column Price
      • Enter the price or primary highlight text to show for this column
   2. Link Text
      • Enter the text for the link on this column
   3. Link URL
      • Enter the URL for this columns's link
   4. Add HTML Feature List
      • Enter HTML to be used as a feature list
   5. Select Feature List Menu
      • Use WP menus to show clickable features in this column
5. Click "Publish"

Pricing Sets

A Pricing Set is what controls which Pricing columns are displayed on individual pages

Create Pricing Set

Create Pricing Set

From your WordPress Administration Panel:

1. Select the "Pricing" panel, then "Pricing Sets"
2. Type a Name for the Pricing Set
   • This name is how it will appear on your site
3. Type a Slug for the Pricing Set
   • The “Slug” is the URL-friendly version of the Pricing Set Name. It is usually all lowercase and contains only letters, numbers, and hyphens
4. Click "Add New Category."

Assign Pricing column to a Pricing Set

Assign Pricing to Set

From your WordPress Administration Panel:

1. Select the "Pricing" panel, then "Pricing"
2. Click to edit the Pricing column that you want to assign
   • You can also select multiple Pricing columns by checking the box next to the Title and under "Bulk Action," select "Edit," then click "Apply"
3. Check the box next to the Pricing Set that you want to assign the Pricing column to.
4. Click "Update"

• You can assign a Pricing column to more than one Pricing Set
• You can also assign a Pricing column to a Pricing Set while you are creating the Pricing column
  
  

Pricing Meta

Pricing Meta

Now that you have set up your Pricing columns, there are a few more page-level steps that are needed to control some display options.

From your WordPress Administration Panel:

1. Select the "Pages" panel, then "All Pages"
2. Click to edit the Page that will display the Pricing section
3. Under "PageLines Meta Settings," click "Pricing Columns"
   1. Columns Per Row
      • Select the number of columns to display per row
   2. Total Number of Columns To Show
      • Select the number of columns to display
   3. Select Set To Show
      • The the "set" or category of posts to show in this section
   4. Column Colors
      • Enter the price or primary highlight text to show for this column
4. Click "Save Meta Settings"

Pricing Sort Order

Pricing Sort Order

By default, the Pricing columns will be displayed chronologically, with the newest Pricing column displayed first. To change the order of the Pricing column, or any post type for that matter (Banners, Features, or Boxes), you must install the Post Types Order plugin. It will allow you drag and drop control over the order.

Download, install, & activate the Post Types Order plugin.

From your WordPress Administration Panel:

1. Select the "Pricing" panel, then "Re-Order"
2. Click and drag to rearrange the order of the Pricing columns
3. Click "Update"

• When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured.
  

  

  Post Types Order Setup
  1. Select the "Settings" panel, then "Post Types Order"
  2. Choose the General settings you desire. If you are unsure what these setting mean, leave them alone
  3. Click "Save Settings"

Customize with CSS

Pricing With CSS

Use some CSS to really make your Pricing section look great.

Here's an example of how this section looks with the following CSS applied.

• Apply the following Column Colors to your page meta:

Header Background: #2D2D2D Head Text Color: #F4F4F4

• Add the following CSS to your Custom Code section:

   border-radius: 11px}

       background-color: #2d2d2d;
       border-radius: 11px 11px 0px 0px;

   background-color: #2d2d2d;
   font-size: 93px;
   padding: 0px;

   background-color: #2d2d2d;
   border-radius: 0px 0px 11px 11px}

   color: #ffffff;
   font-family: arial;
   font-weight: bolder;
   font-size: 17px}

   color: black;
   border: none}

   background-color: #2d2d2d;
   border-bottom: 4px solid black}

   background-color: #e4e4e4;
   border: none;
   border-radius: 11px;
   padding-left: 10px;
   padding-right: 10px}

   border-bottom: 1px solid #C8C8C8;
   border-top: 1px solid #eeeeee}