Customizations

Customized Plan Page

Create your own pricing page. You decide how you want to show your plans. If you want to create or customize your plan pricing page then you just need the knowledge of HTML and CSS. Create plan page as shown below-

Create your own pricing page

Steps to create customized plan page.

  • Create a Joomla article, write html for your plans, like below code-
<ul class="pricing_table">
    <li>
        <h3>Starter</h3>
        <div class="price_body">
            <div class="price">
                Free
            </div>
        </div>
        <div class="features">
            <ul>
                <li>Premium Profile Listing</li>
                <li>Unlimited File Access</li>
                <li>Free Appointments</li>
                <li><strong>5 Bonus Points</strong> every month</li>
                <li>Customizable Profile Page</li>
                <li><strong>2 months</strong> support</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Get Started</a>
        </div>
    </li>
    <!-- Active/Hover styles -->
    <li class="active">
        <h3>Basic</h3>
        <div class="price_body">
            <div class="price">
                <span class="price_figure">$24</span>
                <span class="price_term">per month</span>
            </div>
        </div>
        <div class="features">
            <ul>
                <li>Premium Profile Listing</li>
                <li>Unlimited File Access</li>
                <li>Free Appointments</li>
                <li><strong>20 Bonus Points</strong> every month</li>
                <li>Customizable Profile Page</li>
                <li><strong>6 months</strong> support</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Get Started</a>
        </div>
    </li>
    <li>
        <h3>Premium</h3>
        <div class="price_body">
            <div class="price">
                <span class="price_figure">$49</span>
                <span class="price_term">per month</span>
            </div>
        </div>
        <div class="features">
            <ul>
                <li>Premium Profile Listing</li>
                <li>Unlimited File Access</li>
                <li>Free Appointments</li>
                <li><strong>50 Bonus Points</strong> every month</li>
                <li>Customizable Profile Page</li>
                <li><strong>Lifetime</strong> support</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Get Started</a>
        </div>
    </li>
    <!-- To prevent .pricing_table height collapse(as its children are floated) -->
    <div class="clr"></div>
</ul>
  • Then you need to add css of plan page to your template css at following path :root/templates/YOUR_SITE_TEMPLATE/css/template.css, like below code-

    /Lets load up a Google Font/
    @import url(http://fonts.googleapis.com/css?family=Ubuntu);

    /Basic Reset/

    • {margin: 0; padding: 0;}

    .pricing_table {
    width: 600px;
    color: #fff;
    font-size: 12px;
    font-family: Ubuntu, arial, verdana;
    line-height: 150%;
    text-align: center;
    margin: 100px auto 0 auto;
    }
    /Only the direct LI child, not the .features li/
    .pricing_table>li {
    background: linear-gradient(#666, #333);
    width: 33.33%;
    float: left;
    list-style-type: none;
    /For smooth hover effects if .active is replaced by :hover/
    transition: all 0.2s;
    }
    .pricing_table>li.active {
    background: linear-gradient(#F9B84A, #DB7224);
    transform: scale(1.03);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
    }
    .pricing_table h3 {
    text-transform: uppercase;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
    }
    .pricing_table .price_body {
    width: 125px;
    height: 125px;
    margin: 0 auto 15px auto;
    border: 2px solid #fff;
    border-radius: 100%;
    display: table;
    }
    .pricing_table .price {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    /Lets vertically center align the price now/
    vertical-align: middle;
    display: table-cell;
    }
    .pricing_table .price .price_figure {
    display: block;
    }
    .pricing_table .price .price_term {
    font-size: 11px;
    font-weight: normal;
    }

    .pricing_table .features li {
    list-style-type: none;
    padding: 5px 0;
    }

    .pricing_table .footer {
    padding: 10px;
    background: #333;
    margin-top: 10px;
    }
    .pricing_table .footer .action_button{
    color: #fff;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    background: #000;
    padding: 4px 20px;
    border-radius: 15px;
    background: linear-gradient(#666, #333);
    }
    .pricing_table li.active .footer .action_button {
    background: linear-gradient(#F9B84A, #DB7224);
    }

    .clr {clear: both;}

  • Find the subscribe link in the HTML :

 <a href="#" class="action_button">Get Started</a> 

then change "#" with following url : index.php?option=com_payplans&view=plan&task=subscribe&plan_id=X. Where, X is plan id, according to plan as you have created in back-end.

Plan Ids in PayPlans back-end Plans page

Change all the subscribe button according to your requirement. Now, you can customize plan page this way to be displayed anywhere like - on any page or even in module, which allows to render Joomla articles.