Skip to content

Instantly share code, notes, and snippets.

@kamalinfo

kamalinfo/KingComposer.pricing table

Created November 25, 2017 09:22
Show Gist options
  • Save kamalinfo/f1e714a33a771f6b90132a0deeeae9b5 to your computer and use it in GitHub Desktop.
Save kamalinfo/f1e714a33a771f6b90132a0deeeae9b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
KingComposer.pricing table
<?php
/**
* =======================================================
* KC Shortcode Map
* =======================================================
*/
add_action('init', 'thmename_pricing_table_map'); // Call kc_add_map function ///
if(!function_exists('thmename_pricing_table_map')):
function thmename_pricing_table_map(){
if(function_exists('kc_add_map')): // if kingComposer is active
kc_add_map(
array(
'thmename_pricing_table' => array( // <-- shortcode tag name
'name' => esc_html__('Pricing Table', 'thmename'),
'description' => esc_html__('thmename pricing table', 'thmename'),
'icon' => 'fa-header',
'category' => thmename_SHORTCODE_CATEGORY,
'params' => array(
'General' => array(
array(
'name' => 'title',
'label' => esc_html__('Title','thmename'),
'type' => 'text',
'value' => 'Silver Pack'
),
array(
'name' => 'currency',
'label' => esc_html__('Currency','thmename'),
'type' => 'text',
'value' => '$'
),
array(
'name' => 'price',
'label' => esc_html__('Price','thmename'),
'type' => 'text',
'value' => '150'
),
array(
'name' => 'per_month',
'label' => esc_html__('Per','thmename'),
'type' => 'text',
'value' => '/ per night'
),
array(
'name' => 'pricing_table_attributes',
'label' => esc_html__('Attributes:','thmename'),
'description' => esc_html__('Insert tag <strong> when you want highlight text.
Example: <strong>24/7</strong> Support','thmename'),
'type' => 'textarea',
'value' => base64_encode("Flight Ticket\r\nMusic Concert (30% Off)\r\nRestaurant (Lunch)\r\nTreatment\r\nFace Make")
),
array(
'name' => 'show_button',
'label' => esc_html__( 'Display Button', 'thmename' ),
'type' => 'toggle',
'value' => 'yes',
),
array(
'name' => 'button_text',
'label' => esc_html__('Button Text','thmename'),
'type' => 'text',
'value' => 'SIGN UP',
'relation' => array(
'parent' => 'show_button',
'show_when' => 'yes'
),
),
array(
'name' => 'button_link',
'label' => esc_html__('Button Link','thmename'),
'type' => 'text',
'value' => '#',
'relation' => array(
'parent' => 'show_button',
'show_when' => 'yes'
),
),
array(
'name' => 'custom_css_class',
'label' => esc_html__( 'CSS Class','thmename'),
'description' => esc_html__( 'Custom css class for css customisation','thmename' ),
'type' => 'text'
),
), // content
// .............................................
// ..... // Styling
// .............................................
'styling' => array(
array(
'name' => 'custom_css',
'type' => 'css',
'options' => array(
array(
'screens' => 'any,1024,999,767,479',
'Title' => array(
array(
'property' => 'color',
'label' => esc_html__( 'Color','thmename' ),
'selector' => '+ .pricing-title h3'
),
array(
'property' => 'font-size',
'label' => esc_html__( 'Font Size', 'thmename' ),
'selector' => '+ .pricing-title h3'
),
array(
'property' => 'font-family',
'label' => esc_html__('Font Family','thmename' ),
'selector' => '+ .pricing-title h3'
),
array(
'property' => 'font-weight',
'label' => esc_html__( 'Font Weight','thmename' ),
'selector' => '+ .pricing-title h3'
),
array(
'property' => 'text-transform',
'label' => esc_html__( 'Text Transform','thmename' ),
'selector' => '+ .pricing-title h3'
),
array(
'property' => 'padding',
'label' => esc_html__( 'Padding','thmename' ),
'selector' => '+ .pricing-title:hover'
),
),
'Price' => array(
array(
'property' => 'color',
'label' => esc_html__( 'Color','thmename' ),
'selector' => '+ .package-name h1'
),
array(
'property' => 'color',
'label' => esc_html__( 'Hover Color','thmename' ),
'selector' => '+ .single-pricing:hover .package-name > h1'
),
array(
'property' => 'background-color',
'label' => esc_html__( 'Hover Color','thmename' ),
'selector' => '+ .package-name > h1'
),
array(
'property' => 'font-size',
'label' => esc_html__( 'Currency Font Size', 'thmename' ),
'selector' => '+ .package-name h1 .currency'
),
array(
'property' => 'font-size',
'label' => esc_html__( 'Price Font Size', 'thmename' ),
'selector' => '+ .package-name h1'
),
array(
'property' => 'font-size',
'label' => esc_html__( 'Month Font Size', 'thmename' ),
'selector' => '+ .package-name h1 .count'
),
array(
'property' => 'font-family',
'label' => esc_html__('Font Family','thmename' ),
'selector' => '+ .package-name h1'
),
array(
'property' => 'font-weight',
'label' => esc_html__( 'Font Weight','thmename' ),
'selector' => '+ .package-name h1'
),
array(
'property' => 'text-transform',
'label' => esc_html__( 'Text Transform','thmename' ),
'selector' => '+ .package-name h1'
),
array(
'property' => 'padding',
'label' => esc_html__( 'Padding','thmename' ),
'selector' => '+ .package-name h1'
),
),
'Per/' => array(
array(
'property' => 'font-size',
'label' => esc_html__( 'Font Size','thmename' ),
'selector' => '+ .period'
),
array(
'property' => 'font-weight',
'label' => esc_html__( 'Font Weight', 'thmename' ),
'selector' => '+ .period'
),
array(
'property' => 'text-transform',
'label' => esc_html__( 'Text Transform','thmename' ),
'selector' => '+ .period'
),
array(
'property' => 'color',
'label' => esc_html__( 'Color','thmename' ),
'selector' => '+ .period'
),
array(
'property' => 'color',
'label' => esc_html__( 'Hover Color','thmename' ),
'selector' => '+ .single-pricing:hover .period'
),
),
'Attributes' => array(
array(
'property' => 'font-family',
'label' => esc_html__( 'Font Family', 'thmename' ),
'selector' => '+ .package-offer > span'
),
array(
'property' => 'font-size',
'label' => esc_html__( 'Font Size', 'thmename' ),
'selector' => '+ .package-offer > span'
),
array(
'property' => 'line-height',
'label' => esc_html__( 'Line height','thmename' ),
'selector' => '+ .package-offer > span'
),
array(
'property' => 'font-weight',
'label' => esc_html__( 'Font Weight','thmename' ),
'selector' => '+ .package-offer > span'
),
array(
'property' => 'text-transform',
'label' => esc_html__( 'Text Transform','thmename' ),
'selector' => '+ .package-offer > span'
),
array(
'property' => 'color',
'label' => esc_html__('Color', 'thmename' ),
'selector' => '+ .package-offer > span'
),
array(
'property' => 'margin',
'label' => esc_html__('Margin', 'thmename' ),
'selector' => '+ .package-offer'
),
),
'Button' => array(
array(
'property' => 'color',
'label' => esc_html__('Color', 'thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'color',
'label' => esc_html__('Hover color','thmename' ),
'selector' => '+ .signup-btn:hover .default-btn'
),
array(
'property' => 'background-color',
'label' => esc_html__('Background color', 'thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'background-color',
'label' => esc_html__( 'Hover Background color', 'thmename' ),
'selector' => '+ .pricing-bottom:hover .default-btn, .signup-btn a::before'
),
array(
'property' => 'font-size',
'label' => esc_html__('Font Size','thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'font-family',
'label' => esc_html__('Font Family','thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'font-weight',
'label' => 'Font Weight',
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'text-transform',
'label' => esc_html__('Text Transform','thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'padding',
'label' => esc_html__('Padding','thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
array(
'property' => 'margin',
'label' => esc_html__('Margin','thmename' ),
'selector' => '+ .signup-btn .default-btn'
),
),
'Box' => array(
array(
'property' => 'background-color',
'label' => esc_html__( 'Background-color', 'thmename' ),
'selector' => '+ .single-pricing'
),
array(
'property' => 'background-color',
'label' => esc_html__( 'Hover Background-color', 'thmename' ),
'selector' => '+ .single-pricing:hover'
),
array(
'property' => 'border-color',
'label' => esc_html__( 'Border', 'thmename' ),
'selector' => '+ .single-pricing, .single-pricing::before, .single-pricing::after'
),
),
)
) //End of options
)
), //End of styling
'animate' => array(
array(
'name' => 'animate',
'type' => 'animate'
)
), //End of animate
// .............................................
// .............................................
// .............................................
/////////////////////////////////////////////////////////
)// Params
)// end shortcode key
)// first array
); // End add map
endif;
}
endif;
/**
* =======================================================
* Register Shortcode
* =======================================================
*/
function thmename_pricing_table_func($atts,$content){
ob_start();
extract($atts);
//custom class
$wrap_class = apply_filters( 'kc-el-class', $atts );
if( !empty( $custom_class ) ):
$wrap_class[] = $custom_class;
endif;
$extra_class = implode( ' ', $wrap_class );
if( !empty( $button_link )){
$link_atrt = explode('|', $button_link);
if( !empty($link_atrt[0])){
$link_url = $link_atrt[0];
}else{
$link_url = '#';
}
}else{
$link_url = '#';
}
?>
<div class="pricing-area <?php echo $extra_class; ?> <?php echo $custom_css_class; ?>">
<div class="single-pricing">
<div class="package-name">
<?php if( $title ): ?>
<h3><?php echo $title; ?></h3>
<?php endif; ?>
<h1><span class="currency"><?php echo $currency; ?></span><?php echo $price; ?> <span class="count"><?php echo $per_month; ?></span></h1>
</div>
<div class="package-offer">
<?php
$attributes = explode("\n", $pricing_table_attributes);
if($attributes):
foreach ($attributes as $key => $value) :
?>
<span><?php echo $value; ?></span>
<?php endforeach; endif;?>
</div>
<?php if( $show_button == 'yes'): ?>
<div class="signup-btn">
<a href="<?php echo esc_url( $button_link ); ?>" class="default-btn"><?php echo $button_text; ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('thmename_pricing_table','thmename_pricing_table_func');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment