Docs

How to Use the Pricing Section

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
(→Pricing Columns)
 
(21 intermediate revisions by one user not shown)
Line 1: Line 1:
−
[[Category:New Page]]
+
[[Category:Store Sections]]
 
[[File:Pricing-Front-End.png|200px|thumb|right|alt=Pricing Section|Pricing Section]]
 
[[File:Pricing-Front-End.png|200px|thumb|right|alt=Pricing Section|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
+
The Pricing section is a premium section available in the [[Glossary#Store|PageLines Store.]] It 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.
−
<br />
+
  
−
After you have purchased, installed, & activated the Pricing section, you must then enable it in your template.
+
==Install the Pricing Section==
 +
In order to use the Pricing section, you must first purchase, install, & activate it from the PageLines Store.
 +
<br />
 +
From your WordPress Administration Panel:
 +
# Select the "PageLines" panel, then "Store"
 +
# Select the "Sections" tab, then "Add Sections"
 +
# Select the "Top Premium" tab
 +
# Locate the "Pricing" section and click "Purchase"
 +
#* You will be redirected to PayPal.com where you can purchase the section. After purchase is complete, you will be directed back to the Store.
 +
# Click "Install"
 +
# Under the "Added" tab, you will find your newly installed section
 +
#* It should already be activated
  
 
==Enable the Pricing section==
 
==Enable the Pricing section==
 
[[File:Enable-Pricing-Section.png|200px|thumb|right|alt=Enable Pricing Section|Enable Pricing Section]]
 
[[File:Enable-Pricing-Section.png|200px|thumb|right|alt=Enable Pricing Section|Enable Pricing Section]]
 +
After you have purchased, installed, & activated the Pricing section, you must then enable it in your [[Glossary#Template Setup|Template Setup.]]
 +
<br /><br />
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
 
# Select the "PageLines" panel, then "Templates"
 
# Select the "PageLines" panel, then "Templates"
Line 47: Line 59:
 
Now that you've configured which pages will show the Pricing section, it's time to create some Pricing columns
 
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 Columns==
 +
[[File:Add-New-Pricing.png|200px|thumb|right|alt=Add New Pricing|Add New Pricing]]
 
From your WordPress Administration Panel:  
 
From your WordPress Administration Panel:  
 
# Select the "Pricing" panel, then "Add New Pricing"
 
# Select the "Pricing" panel, then "Add New Pricing"
Line 63: Line 76:
 
##* Use WP menus to show clickable features in this column
 
##* Use WP menus to show clickable features in this column
 
# Click "Publish"
 
# Click "Publish"
 +
 +
==Pricing Sets==
 +
A Pricing Set is what controls which Pricing columns are displayed on individual pages
 +
===Create Pricing Set===
 +
[[File:Create-Pricing-Set.png|200px|thumb|right|alt=Create Pricing Set|Create Pricing Set]]
 +
From your WordPress Administration Panel:
 +
# Select the "Pricing" panel, then "Pricing Sets"
 +
# Type a Name for the Pricing Set
 +
#* This name is how it will appear on your site
 +
# 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
 +
# Click "Add New Category."
 +
 +
===Assign Pricing column to a Pricing Set===
 +
[[File:Assign-Pricing-to-Set.png|200px|thumb|right|alt=Assign Pricing to Set|Assign Pricing to Set]]
 +
From your WordPress Administration Panel:
 +
# Select the "Pricing" panel, then "Pricing"
 +
# 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"
 +
# Check the box next to the Pricing Set that you want to assign the Pricing column to.
 +
# 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<br /><br />
  
 
==Pricing Meta==
 
==Pricing Meta==
 +
[[File:Pricing-Meta.png|200px|thumb|right|alt=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.<br />
 
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.<br />
  
Line 70: Line 107:
 
# Select the "Pages" panel, then "All Pages"
 
# Select the "Pages" panel, then "All Pages"
 
# Click to edit the Page that will display the Pricing section
 
# Click to edit the Page that will display the Pricing section
−
# Under "PageLines Meta Settings," click "Pricing"
+
# Under "PageLines Meta Settings," click "Pricing Columns"
−
 
+
## '''Columns Per Row'''
 +
##* Select the number of columns to display per row
 +
## '''Total Number of Columns To Show'''
 +
##* Select the number of columns to display
 +
## '''Select Set To Show'''
 +
##* The the "set" or category of posts to show in this section
 +
## '''Column Colors'''
 +
##* Enter the price or primary highlight text to show for this column
 
# Click "Save Meta Settings"
 
# Click "Save Meta Settings"
 +
 +
==Pricing Sort Order==
 +
[[File:Pricing-Sort-Order.png|200px|thumb|right|alt=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 [http://wordpress.org/extend/plugins/post-types-order Post Types Order] plugin. It will allow you drag and drop control over the order.<br />
 +
 +
[http://downloads.wordpress.org/plugin/post-types-order.zip Download], install, & activate the Post Types Order plugin.
 +
 +
From your WordPress Administration Panel:
 +
# Select the "Pricing" panel, then "Re-Order"
 +
# Click and drag to rearrange the order of the Pricing columns
 +
# Click "Update"
 +
* When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured. [[File:Post-Types-Order-setup.png|200px|thumb|right|alt=Post Types Order Setup|Post Types Order Setup]]
 +
*# Select the "Settings" panel, then "Post Types Order"
 +
*# Choose the General settings you desire. If you are unsure what these setting mean, leave them alone
 +
*# Click "Save Settings"
 +
<br />
 +
 +
==Customize with CSS==
 +
[[File:Pricing-With-CSS-Front-End.png|200px|thumb|right|alt=Pricing With CSS|Pricing With CSS]]
 +
Use some CSS to really make your Pricing section look great.
 +
<br /><br />
 +
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:
 +
<div style="background-color: #F2F2F2; clear: both;">
 +
.pcol-head {
 +
    border-radius: 11px}
 +
 +
.pcol-title {
 +
        background-color: #2d2d2d;
 +
        border-radius: 11px 11px 0px 0px;
 +
border-bottom: 1px solid #000000;
 +
text-align: left;
 +
color: white !important;
 +
font-size: 24px}
 +
 +
.pcol-highlight {
 +
    background-color: #2d2d2d;
 +
    font-size: 93px;
 +
    padding: 0px;
 +
}
 +
.pcol-link {
 +
    background-color: #2d2d2d;
 +
    border-radius: 0px 0px 11px 11px}
 +
 +
.action-link{border-radius: 25px}
 +
 +
.pcol-content p{
 +
    color: #ffffff;
 +
    font-family: arial;
 +
    font-weight: bolder;
 +
    font-size: 17px}
 +
 +
.pcol-link {bottom:0px}
 +
 +
.feature-list li a, .feature-list li a:hover {
 +
    color: black;
 +
    border: none}
 +
 +
.pcol-content{
 +
    background-color: #2d2d2d;
 +
    border-bottom: 4px solid black}
 +
 +
.pcol-features {
 +
    background-color: #e4e4e4;
 +
    border: none;
 +
    border-radius: 11px;
 +
    padding-left: 10px;
 +
    padding-right: 10px}
 +
 +
.pcol-features ul li {
 +
    border-bottom: 1px solid #C8C8C8;
 +
    border-top: 1px solid #eeeeee}
 +
 +
li#menu-item-111 {border: none;}
 +
 +
.endlink {border-bottom: none !important}
 +
</div>

Latest revision as of 20:52, 18 January 2012

Pricing Section
Pricing Section

The Pricing section is a premium section available in the PageLines Store. It 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.

Contents

[edit] Install the Pricing Section

In order to use the Pricing section, you must first purchase, install, & activate it from the PageLines Store.
From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Store"
  2. Select the "Sections" tab, then "Add Sections"
  3. Select the "Top Premium" tab
  4. Locate the "Pricing" section and click "Purchase"
    • You will be redirected to PayPal.com where you can purchase the section. After purchase is complete, you will be directed back to the Store.
  5. Click "Install"
  6. Under the "Added" tab, you will find your newly installed section
    • It should already be activated

[edit] Enable the Pricing section

Enable Pricing Section
Enable Pricing Section

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

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

[edit] Hide Pricing on individual pages

Hide Pricing
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.

[edit] Show Pricing on individual pages

Hide Pricing by default
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
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

[edit] Add New Pricing Columns

Add New Pricing
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"

[edit] Pricing Sets

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

[edit] Create Pricing Set

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

[edit] Assign Pricing column to a Pricing Set

Assign Pricing to 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

[edit] Pricing Meta

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"

[edit] Pricing Sort Order

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
    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"


[edit] Customize with CSS

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

  1. Apply the following Column Colors to your page meta:
    • Header Background: #2D2D2D
    • Head Text Color: #F4F4F4
  2. Add the following CSS to your Custom Code section:

.pcol-head { 

   border-radius: 11px}

.pcol-title { 

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

border-bottom: 1px solid #000000; text-align: left; color: white !important; font-size: 24px}

.pcol-highlight { 

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

} .pcol-link { 

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

.action-link{border-radius: 25px}

.pcol-content p{ 

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

.pcol-link {bottom:0px}

.feature-list li a, .feature-list li a:hover { 

   color: black;
   border: none}

.pcol-content{ 

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

.pcol-features { 

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

.pcol-features ul li { 

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

li#menu-item-111 {border: none;}

.endlink {border-bottom: none !important}

Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_the_Pricing_Section&oldid=3920"