: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
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' );
function render( $attrs, $content = null, $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;
$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'];
$bullet_color_hover = $this->get_hover_value( 'bullet_color' );
$bullet_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'bullet_color' );
$header_background_color_hover = $this->get_hover_value( 'header_background_color' );
$header_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'header_background_color' );
$price_background_color_hover = $this->get_hover_value( 'price_background_color' );
$price_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'price_background_color' );
$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;
et_pb_responsive_options()->generate_responsive_css( $bullet_color_values, '%%order_class%% .et_pb_pricing_content ul.et_pb_pricing li span:before', 'border-color', $render_slug, '', 'color' );
if ( et_builder_is_hover_enabled( 'bullet_color', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => '%%order_class%% .et_pb_pricing_content ul.et_pb_pricing:hover li span:before',
'declaration' => sprintf(
esc_html( $bullet_color_hover )
// 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.
et_pb_responsive_options()->generate_responsive_css( $header_background_color_values, '.et_pb_pricing %%order_class%%.et_pb_pricing_table .et_pb_pricing_heading', 'background-color', $render_slug, ' !important;', 'color' );
if ( et_builder_is_hover_enabled( 'header_background_color', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => '.et_pb_pricing %%order_class%%.et_pb_pricing_table:hover .et_pb_pricing_heading',
'declaration' => sprintf(
'background-color: %1$s !important;',
esc_html( $header_background_color_hover )
// Pricing Area Background Color.
et_pb_responsive_options()->generate_responsive_css( $price_background_color_values, '%%order_class%%.et_pb_pricing_table .et_pb_pricing_content_top', 'background-color', $render_slug, '', 'color' );
if ( et_builder_is_hover_enabled( 'price_background_color', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => '%%order_class%%.et_pb_pricing_table:hover .et_pb_pricing_content_top',
'declaration' => sprintf(
'background-color: %1$s;',
esc_html( $price_background_color_hover )
// Custom Padding Left On Center.
if ( ! empty( $body_text_align_values ) ) {
foreach( $body_text_align_values as $body_text_align_device => $body_text_align_value ) {
if ( 'center' !== $body_text_align_value ) {
$padding_left_style = array(
'selector' => '%%order_class%%.et_pb_pricing_table .et_pb_pricing li',
'declaration' => esc_html( 'padding-left: 0;' ),
if ( 'desktop' !== $body_text_align_device ) {
$current_media_query = 'tablet' === $body_text_align_device ? 'max_width_980' : 'max_width_767';