class ET_Builder_Module_Pricing_Tables_Item extends ET_Builder_Module {
$this->name = esc_html__( 'Pricing Table', 'et_builder' );
$this->plural = esc_html__( 'Pricing Tables', 'et_builder' );
$this->slug = 'et_pb_pricing_table';
$this->vb_support = 'on';
$this->main_css_element = '%%order_class%%';
$this->child_title_var = 'title';
$this->advanced_setting_title_text = esc_html__( 'New Pricing Table', 'et_builder' );
$this->settings_text = esc_html__( 'Pricing Table Settings', 'et_builder' );
$this->settings_modal_toggles = array(
'main_content' => et_builder_i18n( 'Text' ),
'elements' => et_builder_i18n( 'Elements' ),
'layout' => et_builder_i18n( 'Layout' ),
'bullet' => esc_html__( 'Bullet', 'et_builder' ),
$this->advanced_fields = array(
'border_radii' => '.et_pb_pricing .et_pb_pricing_table%%order_class%%',
'border_styles' => '.et_pb_pricing .et_pb_pricing_table%%order_class%%',
'border_radii' => 'on||||',
'border_styles' => array(
'border_radii' => '.et_pb_pricing %%order_class%% .et_pb_pricing_content_top',
'border_styles' => '.et_pb_pricing %%order_class%% .et_pb_pricing_content_top',
'option_category' => 'border',
'tab_slug' => 'advanced',
'toggle_slug' => 'price',
'border_radii' => 'on||||',
'border_styles' => array(
'border_bottom' => array(
'border_width_bottom' => '1px',
'label' => et_builder_i18n( 'Title' ),
'main' => "{$this->main_css_element} .et_pb_pricing_heading h2, {$this->main_css_element} .et_pb_pricing_heading h1.et_pb_pricing_title, {$this->main_css_element} .et_pb_pricing_heading h3.et_pb_pricing_title, {$this->main_css_element} .et_pb_pricing_heading h4.et_pb_pricing_title, {$this->main_css_element} .et_pb_pricing_heading h5.et_pb_pricing_title, {$this->main_css_element} .et_pb_pricing_heading h6.et_pb_pricing_title,
{$this->main_css_element}.et_pb_featured_table .et_pb_pricing_heading h2, {$this->main_css_element}.et_pb_featured_table .et_pb_pricing_heading h1.et_pb_pricing_title, {$this->main_css_element}.et_pb_featured_table .et_pb_pricing_heading h3.et_pb_pricing_title, {$this->main_css_element}.et_pb_featured_table .et_pb_pricing_heading h4.et_pb_pricing_title, {$this->main_css_element}.et_pb_featured_table .et_pb_pricing_heading h5.et_pb_pricing_title, {$this->main_css_element}.et_pb_featured_table .et_pb_pricing_heading h6.et_pb_pricing_title",
'range_settings' => array(
'label' => et_builder_i18n( 'Body' ),
'main' => "{$this->main_css_element} .et_pb_pricing li",
'limited_main' => "{$this->main_css_element} .et_pb_pricing li, {$this->main_css_element} .et_pb_pricing li span, {$this->main_css_element} .et_pb_pricing li a",
'range_settings' => array(
'block_elements' => array(
'tabbed_subtoggles' => true,
'bb_icons_support' => true,
'label' => esc_html__( 'Subtitle', 'et_builder' ),
'main' => "{$this->main_css_element} .et_pb_pricing_heading .et_pb_best_value",
'range_settings' => array(
'label' => esc_html__( 'Price', 'et_builder' ),
'main' => "{$this->main_css_element} .et_pb_et_price .et_pb_sum",
'text_align' => "{$this->main_css_element} .et_pb_pricing_content_top",
'range_settings' => array(
'options_priority' => array(
'currency_frequency' => array(
'label' => esc_html__( 'Currency & Frequency', 'et_builder' ),
'main' => "{$this->main_css_element} .et_pb_dollar_sign, {$this->main_css_element} .et_pb_frequency",
'hide_text_align' => true,
'label' => esc_html__( 'Excluded Item', 'et_builder' ),
'main' => '%%order_class%% ul.et_pb_pricing li.et_pb_not_available, %%order_class%% ul.et_pb_pricing li.et_pb_not_available span, %%order_class%% ul.et_pb_pricing li.et_pb_not_available a',
'range_settings' => array(
'default' => absint( et_get_option( 'body_font_size', '14' ) ) . 'px',
'main' => "{$this->main_css_element}.et_pb_pricing_table",
'label' => et_builder_i18n( 'Button' ),
'main' => ".et_pb_pricing {$this->main_css_element} .et_pb_button",
'limited_main' => ".et_pb_pricing {$this->main_css_element} .et_pb_pricing_table_button.et_pb_button",
'alignment' => ".et_pb_pricing {$this->main_css_element} .et_pb_button_wrapper",
'main' => '%%order_class%% .et_pb_button.et_pb_pricing_table_button',
'margin_padding' => array(
'important' => 'all', // Need to overwrite pricing table's styling
'main' => '.et_pb_pricing %%order_class%% .et_pb_pricing_heading, .et_pb_pricing %%order_class%% .et_pb_pricing_content_top, .et_pb_pricing %%order_class%% .et_pb_pricing_content',
'padding-right' => '%%order_class%% .et_pb_button_wrapper',
'padding-bottom' => '.et_pb_pricing %%order_class%%',
'padding-left' => '%%order_class%% .et_pb_button_wrapper',
'text_orientation' => '%%order_class%%.et_pb_pricing_table, %%order_class%% .et_pb_pricing_content',
'text_shadow' => '%%order_class%% .et_pb_pricing_heading, %%order_class%% .et_pb_pricing_content_top, %%order_class%% .et_pb_pricing_content',
$this->custom_css_fields = array(
'pricing_heading' => array(
'label' => esc_html__( 'Pricing Heading', 'et_builder' ),
'selector' => '.et_pb_pricing_heading',
'pricing_title' => array(
'label' => esc_html__( 'Pricing Title', 'et_builder' ),
'selector' => '.et_pb_pricing_heading h2',
'pricing_subtitle' => array(
'label' => esc_html__( 'Pricing Subtitle', 'et_builder' ),
'selector' => '.et_pb_pricing_heading .et_pb_best_value',
'label' => esc_html__( 'Pricing Top', 'et_builder' ),
'selector' => '.et_pb_pricing_content_top',
'label' => esc_html__( 'Price', 'et_builder' ),
'selector' => '.et_pb_et_price',
'label' => esc_html__( 'Currency', 'et_builder' ),
'selector' => '.et_pb_dollar_sign',
'label' => esc_html__( 'Frequency', 'et_builder' ),
'selector' => '.et_pb_frequency',
'pricing_content' => array(
'label' => esc_html__( 'Pricing Content', 'et_builder' ),
'selector' => '.et_pb_pricing_content',
'label' => esc_html__( 'Pricing Item', 'et_builder' ),
'selector' => 'ul.et_pb_pricing li',
'pricing_item_excluded' => array(
'label' => esc_html__( 'Excluded Item', 'et_builder' ),
'selector' => 'ul.et_pb_pricing li.et_pb_not_available',
'pricing_button' => array(
'label' => esc_html__( 'Pricing Button', 'et_builder' ),
'selector' => '.et_pb_pricing_table_button',
'label' => esc_html__( 'Make This Table Featured', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'default_on_front' => 'off',
'tab_slug' => 'advanced',
'toggle_slug' => 'layout',
'description' => esc_html__( 'Featuring a table will make it stand out from the rest.', 'et_builder' ),
'label' => et_builder_i18n( 'Title' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Define a title for the pricing table.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Subtitle', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Define a sub title for the table if desired.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Currency', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Input your desired currency symbol here.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Frequency', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'If your pricing is subscription based, input the subscription payment cycle here.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Price', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Input the value of the product here.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Button Link URL', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Input the destination URL for the signup button.', 'et_builder' ),
'toggle_slug' => 'link_options',
'dynamic_content' => 'url',
'url_new_window' => array(
'label' => esc_html__( 'Button Link Target', 'et_builder' ),
'option_category' => 'configuration',
'off' => esc_html__( 'In The Same Window', 'et_builder' ),
'on' => esc_html__( 'In The New Tab', 'et_builder' ),
'toggle_slug' => 'link_options',
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'et_builder' ),
'default_on_front' => 'off',
'label' => et_builder_i18n( 'Button' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Adjust the text used from the signup button.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => et_builder_i18n( 'Body' ),
'option_category' => 'basic_option',
'description' => sprintf(
'%1$s<br/> + %2$s<br/> - %3$s',
esc_html__( 'Input a list of features that are/are not included in the product. Separate items on a new line, and begin with either a + or - symbol: ', 'et_builder' ),
esc_html__( 'Included option', 'et_builder' ),
esc_html__( 'Excluded option', 'et_builder' )
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Bullet Color', 'et_builder' ),
'description' => esc_html__( "Pick a color to use for the bullets that appear next to each list item within the pricing table's feature area.", 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'bullet',
'mobile_options' => true,
'price_background_color' => array(
'label' => esc_html__( 'Pricing Area Background Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to use for the background area that appears behind the pricing text.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'price',
'mobile_options' => true,
'header_background_color' => array(
'label' => esc_html__( 'Table Header Background Color', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'header',
'mobile_options' => true,
public function get_transition_fields_css_props() {
$fields = parent::get_transition_fields_css_props();
$fields['bullet_color'] = array( 'border-color' => '%%order_class%% ul.et_pb_pricing li span:before' );
$fields['header_background_color'] = array( 'background-color' => '%%order_class%% .et_pb_pricing_heading' );
$fields['price_background_color'] = array( 'background-color' => '%%order_class%% .et_pb_pricing_content_top' );
* Inherit value from pricing tables (parent) module
public function maybe_inherit_values() {
global $et_pb_pricing_tables_sticky_transition;
// Module item has no sticky option so we can go ahead and inherit parent's sticky attr.
$this->props['sticky_transition'] = $et_pb_pricing_tables_sticky_transition;
* Generates the module's HTML output based on {@see self::$props}.
* @param array $attrs List of unprocessed attributes.
* @param string $content Content being processed.
* @param string $render_slug Slug of module that is used for rendering output.
* @return string The module's HTML output.
public function render( $attrs, $content, $render_slug ) {
global $et_pb_pricing_tables_num,
$et_pb_pricing_tables_icon,
$et_pb_pricing_tables_icon_tablet,
$et_pb_pricing_tables_icon_phone,
$et_pb_pricing_tables_button_rel,
$et_pb_pricing_tables_header_level,
$et_pb_pricing_tables_sticky;
$multi_view = et_pb_multi_view_options( $this );
$featured = $this->props['featured'];
$button_url = $this->props['button_url'];
$button_rel = $this->props['button_rel'];
$button_text = $this->_esc_attr( 'button_text', 'limited' );
$url_new_window = $this->props['url_new_window'];
$button_custom = $this->props['custom_button'];
$header_level = $this->props['header_level'];
$body_text_align_values = et_pb_responsive_options()->get_property_values( $this->props, 'body_text_align' );
$custom_icon_values = et_pb_responsive_options()->get_property_values( $this->props, 'button_icon' );
$custom_icon = isset( $custom_icon_values['desktop'] ) ? $custom_icon_values['desktop'] : '';
$custom_icon_tablet = isset( $custom_icon_values['tablet'] ) ? $custom_icon_values['tablet'] : '';
$custom_icon_phone = isset( $custom_icon_values['phone'] ) ? $custom_icon_values['phone'] : '';
// Overwrite button rel with pricin tables' button_rel if needed
if ( in_array( $button_rel, array( '', 'off|off|off|off|off' ) ) && '' !== $et_pb_pricing_tables_button_rel ) {
$button_rel = $et_pb_pricing_tables_button_rel;
$et_pb_pricing_tables_num++;
$custom_table_icon = 'on' === $button_custom && '' !== $custom_icon ? $custom_icon : $et_pb_pricing_tables_icon;
$custom_table_icon_tablet = 'on' === $button_custom && '' !== $custom_icon_tablet ? $custom_icon_tablet : $et_pb_pricing_tables_icon_tablet;
$custom_table_icon_phone = 'on' === $button_custom && '' !== $custom_icon_phone ? $custom_icon_phone : $et_pb_pricing_tables_icon_phone;
'base_attr_name' => 'bullet_color',
'selector' => '%%order_class%% .et_pb_pricing_content ul.et_pb_pricing li span:before',
'hover_selector' => '%%order_class%% .et_pb_pricing_content ul.et_pb_pricing:hover li span:before',
'css_property' => 'border-color',
'render_slug' => $render_slug,
// Selector begins with current module item selector so this will never be sticky.
'is_sticky_module' => false,
// Header Background Color. In the parent item, header BG color doesn't has higher selector
// because it uses .et_pb_pricing_table as hover location. So, we should append the same
// parent class here because there is no class can be used to make current selector higher.
'base_attr_name' => 'header_background_color',
'selector' => '.et_pb_pricing %%order_class%%.et_pb_pricing_table .et_pb_pricing_heading',
'hover_selector' => '.et_pb_pricing %%order_class%%.et_pb_pricing_table:hover .et_pb_pricing_heading',
'sticky_pseudo_selector_location' => 'prefix',
'css_property' => 'background-color',
'render_slug' => $render_slug,