Build a pricing table like in OneInstructor demo

Last updated on by

1. Download the attached folder and upload it in your child theme.

2. Add this CSS code in your child theme style sheet :

/*==========================================================================================*/
/*   PMPRO PRICING
/*==========================================================================================*/
.pmpro_content ul{
    margin:0 !important;
    list-style:none !important;
}
.pmpro_pricing_table>li{
    width:33%;
    float:left;
    border:1px solid #EFEFEF;
    text-align: center;
    padding:30px;
    height:400px;
    position: relative;
}
 
.pmpro_pricing_table>li{
 
}
 
.pmpro_pricing_table>li:hover{border-color:#FF6600;}
.pmpro_pricing_table>li.current{border:2px solid #FF6600;}
.pmpro_pricing_table>li>ul{padding-left:0 !important;}
.pmpro_pricing_table>li>ul li{
    padding:6px 0;
}
 
.pmpro_pricing_table>li .pmpro_price{
    font-size:32px;
}
.pmpro_pricing_table>li a{
    padding:6px 20px;
    border-radius:2px;
    background:#888;
    color:#FFF;
    width:120px;
    position: absolute;
    bottom:20px;
    left:50%;
    margin-left:-60px;
}
.pmpro_pricing_table>li.current a{
    background:#FF6600;
}
.pmpro_pricing_table>li>ul li h2{margin:0;font-size:14px;font-weight:600;text-transform: uppercase;}