: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* WooCommerce Modules: ET_Builder_Module_Woocommerce_Add_To_Cart class
* The ET_Builder_Module_Woocommerce_Add_To_Cart Class is responsible for rendering the
* Add To Cart markup using the WooCommerce template.
* Class representing WooCommerce Add to cart component.
class ET_Builder_Module_Woocommerce_Add_To_Cart extends ET_Builder_Module {
$this->name = esc_html__( 'Woo Add To Cart', 'et_builder' );
$this->plural = esc_html__( 'Woo Add To Cart', 'et_builder' );
$this->slug = 'et_pb_wc_add_to_cart';
$this->vb_support = 'on';
$this->settings_modal_toggles = array(
'main_content' => et_builder_i18n( 'Content' ),
'elements' => et_builder_i18n( 'Elements' ),
'title' => et_builder_i18n( 'Text' ),
'title' => esc_html__( 'Heading Text', 'et_builder' ),
'tabbed_subtoggles' => true,
'title' => et_builder_i18n( 'Sizing' ),
$this->advanced_fields = array(
'label' => et_builder_i18n( 'Text' ),
'main' => '%%order_class%%, %%order_class%% a, %%order_class%% label, %%order_class%%.et_pb_module .et_pb_module_inner .stock',
'hide_text_align' => true,
'default' => '|700|||||||',
'margin_padding' => array(
'use_background_layout' => true,
'text_orientation' => array(
'background_layout' => array(
// Don't add text-shadow fields since they already are via font-options.
'label' => et_builder_i18n( 'Button' ),
'main' => '%%order_class%% .button',
'limited_main' => '%%order_class%% .button',
'alignment' => '%%order_class%% .et_pb_module_inner > form',
// Setting to TRUE since it only checks for the value's existence.
* Button inside add to cart module is rendered from WooCommerce's default
* template which makes its positioning isn't flexible. Thus button alignment
'use_alignment' => false,
'main' => '%%order_class%% .button',
'margin_padding' => array(
'label' => esc_html__( 'Fields', 'et_builder' ),
'main' => '%%order_class%% input, %%order_class%% .quantity input.qty',
'background_color' => '%%order_class%% input, %%order_class%% .quantity input.qty',
'background_color_hover' => '%%order_class%% input:hover, %%order_class%% .quantity input.qty:hover',
'focus_background_color' => '%%order_class%% input:focus, %%order_class%% select:focus, %%order_class%% .quantity input.qty:focus',
'form_text_color' => '%%order_class%% input, %%order_class%% select, %%order_class%% .quantity input.qty',
'form_text_color_hover' => '%%order_class%% input[type="text"]:hover, %%order_class%% select:hover, %%order_class%% .quantity input.qty:hover',
'focus_text_color' => '%%order_class%% input:focus, %%order_class%% .quantity input.qty:focus',
'placeholder_focus' => '%%order_class%% input:focus::-webkit-input-placeholder, %%order_class%% input:focus::-moz-placeholder, %%order_class%% input:focus:-ms-input-placeholder, %%order_class%% textarea:focus::-webkit-input-placeholder, %%order_class%% textarea:focus::-moz-placeholder, %%order_class%% textarea:focus:-ms-input-placeholder',
'padding' => '%%order_class%% input',
'margin' => '%%order_class%%',
'background_color_hover',
'focus_background_color',
'main' => '%%order_class%% input',
'default_on_fronts' => array(
'border_styles' => array(
'border_radii' => '%%order_class%% input, %%order_class%% .quantity input.qty',
'border_styles' => '%%order_class%% input, %%order_class%% .quantity input.qty',
'border_radii' => 'on|3px|3px|3px|3px',
'border_styles' => array(
'label_prefix' => esc_html__( 'Fields', 'et_builder' ),
'name' => 'fields_focus',
'border_radii' => '%%order_class%% input:focus, %%order_class%% .quantity input.qty:focus',
'border_styles' => '%%order_class%% input:focus, %%order_class%% .quantity input.qty:focus',
'label_prefix' => esc_html__( 'Fields Focus', 'et_builder' ),
'%%order_class%% input, %%order_class%% .quantity input.qty',
'%%order_class%% input:hover',
'%%order_class%% input:hover::-webkit-input-placeholder',
'%%order_class%% input:hover::-moz-placeholder',
'%%order_class%% input:hover:-ms-input-placeholder',
'margin_padding' => array(
'main' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations tr',
'important' => array( 'custom_padding' ),
'dropdown_menus' => array(
'label' => esc_html__( 'Dropdown Menus', 'et_builder' ),
'main' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select',
'background_color' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select',
'background_color_hover' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select:hover',
'focus_background_color' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select:focus',
'form_text_color' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select',
'form_text_color_hover' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select + label:hover, %%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select:hover',
'focus_text_color' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select option:focus, %%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select + label',
'placeholder_focus' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select:focus, %%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select + label:focus',
'margin_padding' => array(
'main' => '%%order_class%% select',
'important' => array( 'all' ),
'margin_padding' => array(
'name' => 'dropdown_menus',
'main' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select',
'border_styles' => array(
'dropdown_menus' => array(
'name' => 'dropdown_menus',
'border_styles' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select',
'border_radii' => '%%order_class%%.et_pb_module .et_pb_module_inner form.cart .variations td select',
'label_prefix' => esc_html__( 'Dropdown Menus', 'et_builder' ),
'%%order_class%% select',
'%%order_class%% select:hover',
'hide_line_height' => true,
'hide_text_align' => true,
$this->custom_css_fields = array(
'label' => esc_html__( 'Fields', 'et_builder' ),
'dropdown_menus' => array(
'label' => esc_html__( 'Dropdown Menus', 'et_builder' ),
'label' => esc_html__( 'Buttons', 'et_builder' ),
$this->help_videos = array(
'name' => esc_html__( 'Divi WooCommerce Modules', 'et_builder' ),
public function get_fields() {
'product' => ET_Builder_Module_Helper_Woocommerce_Modules::get_field(
'default' => ET_Builder_Module_Helper_Woocommerce_Modules::get_product_default(),
'computed_affects' => array(
'product_filter' => ET_Builder_Module_Helper_Woocommerce_Modules::get_field(
'computed_affects' => array(
'show_quantity' => array(
'label' => esc_html__( 'Show Quantity Field', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'On' ),
'off' => et_builder_i18n( 'Off' ),
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether the quantity field should be added before the Add to Cart button.', 'et_builder' ),
'mobile_options' => true,
'label' => esc_html__( 'Show Stock', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'On' ),
'off' => et_builder_i18n( 'Off' ),
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether the stock (displayed when product inventory is managed) should be visible or not', 'et_builder' ),
'mobile_options' => true,
'__add_to_cart' => array(
'computed_callback' => array(
'ET_Builder_Module_Woocommerce_Add_To_Cart',
'computed_depends_on' => array(
'computed_minimum' => array(
* Get add to cart markup as string
* @since 4.4.0 Fixed compatibility w/ WooCommerce Product Add-ons
* @see https://github.com/elegantthemes/Divi/issues/19116
* @param array $args Additional arguments.
public static function get_add_to_cart( $args = array() ) {
return et_builder_wc_render_module_template(
'woocommerce_template_single_add_to_cart',
array( 'product', 'post' )
* Gets the Button classname.
* @used-by ET_Builder_Module_Helper_Woocommerce_Modules::add_custom_button_icons()
public function get_button_classname() {
return 'single_add_to_cart_button';
* Adds Multi view attributes to the Outer wrapper.
* Since we do not have control over the WooCommerce Breadcrumb markup, we inject Multi view
* attributes on to the Outer wrapper.
* @param array $outer_wrapper_attrs
public function add_multi_view_attrs( $outer_wrapper_attrs ) {
$multi_view = et_pb_multi_view_options( $this );
$multi_view_attrs = $multi_view->render_attrs( array(
'et_pb_hide_input_quantity' => array(
'show_quantity' => 'off',
'et_pb_hide_stock' => array(
if ( $multi_view_attrs && is_array( $multi_view_attrs ) ) {
$outer_wrapper_attrs = array_merge( $outer_wrapper_attrs, $multi_view_attrs );
return $outer_wrapper_attrs;
* Calculates any required additional CSS.
* Dropdown menu's Bottom & Left margin affects the Dropdown arrow placement.
* This is handled using additional CSS.
* @param string $render_slug
public function add_additional_css( $attrs, $render_slug ) {
if ( ! is_array( $attrs ) || empty( $attrs ) ) {
$prop = 'dropdown_menus_custom_margin';
$values = et_pb_responsive_options()->get_property_values( $attrs, $prop );
$hover_value = et_pb_hover_options()->get_value( $prop, $attrs, '' );
$processed_values = array();
foreach ( $values as $device => $value ) {
$processed_values[ $device ] = $this->calculate_dropdown_arrow_margin( $value );
// Generate style for desktop, tablet, and phone.
et_pb_responsive_options()->declare_responsive_css(