2165 lines
67 KiB
PHP
2165 lines
67 KiB
PHP
<?php
|
|
namespace ElementorPro\Modules\Woocommerce\Widgets;
|
|
|
|
use ElementorPro\Plugin;
|
|
use Elementor\Controls_Manager;
|
|
use Elementor\Repeater;
|
|
use Elementor\Group_Control_Box_Shadow;
|
|
use Elementor\Group_Control_Typography;
|
|
use Elementor\Group_Control_Text_Shadow;
|
|
use Elementor\Group_Control_Border;
|
|
use Elementor\Group_Control_Background;
|
|
use ElementorPro\Modules\QueryControl\Module as QueryControlModule;
|
|
use Elementor\Core\Base\Document;
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly
|
|
}
|
|
|
|
class My_Account extends Base_Widget {
|
|
|
|
public function get_name() {
|
|
return 'woocommerce-my-account';
|
|
}
|
|
|
|
public function get_title() {
|
|
return esc_html__( 'My Account', 'elementor-pro' );
|
|
}
|
|
|
|
public function get_icon() {
|
|
return 'eicon-my-account';
|
|
}
|
|
|
|
public function get_categories() {
|
|
return [ 'woocommerce-elements' ];
|
|
}
|
|
|
|
protected function register_controls() {
|
|
$start = is_rtl() ? 'end' : 'start';
|
|
$end = is_rtl() ? 'start' : 'end';
|
|
|
|
$this->start_controls_section(
|
|
'section_menu_icon_content',
|
|
[
|
|
'label' => esc_html__( 'Tabs', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_layout',
|
|
[
|
|
'label' => esc_html__( 'Layout', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => [
|
|
'vertical' => esc_html__( 'Vertical', 'elementor-pro' ),
|
|
'horizontal' => esc_html__( 'Horizontal', 'elementor-pro' ),
|
|
],
|
|
'default' => 'vertical',
|
|
'render_type' => 'template',
|
|
'prefix_class' => 'e-my-account-tabs-',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_content_spacing',
|
|
[
|
|
'label' => esc_html__( 'Spacing', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tab-content-spacing: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_position',
|
|
[
|
|
'label' => esc_html__( 'Tabs Position', 'elementor-pro' ),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'options' => [
|
|
'start' => [
|
|
'title' => esc_html__( 'Start', 'elementor-pro' ),
|
|
'icon' => "eicon-align-$start-h",
|
|
],
|
|
'center' => [
|
|
'title' => esc_html__( 'Center', 'elementor-pro' ),
|
|
'icon' => 'eicon-align-center-h',
|
|
],
|
|
'end' => [
|
|
'title' => esc_html__( 'End', 'elementor-pro' ),
|
|
'icon' => "eicon-align-$end-h",
|
|
],
|
|
'stretch' => [
|
|
'title' => esc_html__( 'Stretch', 'elementor-pro' ),
|
|
'icon' => 'eicon-align-stretch-h',
|
|
],
|
|
],
|
|
'condition' => [
|
|
'tabs_layout' => 'horizontal',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '{{VALUE}}',
|
|
],
|
|
'selectors_dictionary' => [
|
|
'start' => '--tabs-container-justify-content: flex-start; --tab-width: auto',
|
|
'center' => '--tabs-container-justify-content: center; --tab-width: auto',
|
|
'end' => '--tabs-container-justify-content: flex-end; --tab-width: auto',
|
|
'stretch' => '--tabs-container-justify-content: space-between; --tab-width: 100%',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater = new Repeater();
|
|
|
|
$repeater->add_control(
|
|
'tab_name',
|
|
[
|
|
'label' => esc_html__( 'Tab Name', 'elementor-pro' ),
|
|
'type' => Controls_Manager::TEXT,
|
|
'dynamic' => [
|
|
'active' => true,
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'order_display_description',
|
|
[
|
|
'raw' => esc_html__( 'Note: By default, only your last order is displayed while editing the orders section. You can see other orders on your live site or in the WooCommerce orders section', 'elementor-pro' ),
|
|
'type' => Controls_Manager::RAW_HTML,
|
|
'content_classes' => 'elementor-descriptor',
|
|
'condition' => [
|
|
'field_key' => 'orders',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs',
|
|
[
|
|
'label' => '',
|
|
'type' => Controls_Manager::REPEATER,
|
|
'fields' => $repeater->get_controls(),
|
|
'item_actions' => [
|
|
'add' => false,
|
|
'duplicate' => false,
|
|
'remove' => false,
|
|
'sort' => false,
|
|
],
|
|
'default' => [
|
|
[
|
|
'field_key' => 'dashboard',
|
|
'field_label' => esc_html__( 'Dashboard', 'elementor-pro' ),
|
|
'tab_name' => esc_html__( 'Dashboard', 'elementor-pro' ),
|
|
],
|
|
[
|
|
'field_key' => 'orders',
|
|
'field_label' => esc_html__( 'Orders', 'elementor-pro' ),
|
|
'tab_name' => esc_html__( 'Orders', 'elementor-pro' ),
|
|
],
|
|
[
|
|
'field_key' => 'downloads',
|
|
'field_label' => esc_html__( 'Downloads', 'elementor-pro' ),
|
|
'tab_name' => esc_html__( 'Downloads', 'elementor-pro' ),
|
|
],
|
|
[
|
|
'field_key' => 'edit-address',
|
|
'field_label' => esc_html__( 'Addresses', 'elementor-pro' ),
|
|
'tab_name' => esc_html__( 'Addresses', 'elementor-pro' ),
|
|
],
|
|
[
|
|
'field_key' => 'edit-account',
|
|
'field_label' => esc_html__( 'Account Details', 'elementor-pro' ),
|
|
'tab_name' => esc_html__( 'Account Details', 'elementor-pro' ),
|
|
],
|
|
[
|
|
'field_key' => 'customer-logout',
|
|
'field_label' => esc_html__( 'Logout', 'elementor-pro' ),
|
|
'tab_name' => esc_html__( 'Logout', 'elementor-pro' ),
|
|
],
|
|
],
|
|
'title_field' => '{{{ tab_name }}}',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_alignment',
|
|
[
|
|
'label' => esc_html__( 'Alignment', 'elementor-pro' ),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'options' => [
|
|
'start' => [
|
|
'title' => esc_html__( 'Start', 'elementor-pro' ),
|
|
'icon' => 'eicon-text-align-left',
|
|
],
|
|
'center' => [
|
|
'title' => esc_html__( 'Center', 'elementor-pro' ),
|
|
'icon' => 'eicon-text-align-center',
|
|
],
|
|
'end' => [
|
|
'title' => esc_html__( 'End', 'elementor-pro' ),
|
|
'icon' => 'eicon-text-align-right',
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-alignment: {{VALUE}};',
|
|
],
|
|
'conditions' => [
|
|
'relation' => 'and',
|
|
'terms' => [
|
|
[
|
|
'name' => 'tabs_position',
|
|
'operator' => '!==',
|
|
'value' => 'start',
|
|
],
|
|
[
|
|
'name' => 'tabs_position',
|
|
'operator' => '!==',
|
|
'value' => 'center',
|
|
],
|
|
[
|
|
'name' => 'tabs_position',
|
|
'operator' => '!==',
|
|
'value' => 'end',
|
|
],
|
|
],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_additional_options',
|
|
[
|
|
'label' => esc_html__( 'Additional Options', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'customize_dashboard_check',
|
|
[
|
|
'label' => esc_html__( 'Customize Dashboard', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'label_on' => esc_html__( 'Yes', 'elementor-pro' ),
|
|
'label_off' => esc_html__( 'No', 'elementor-pro' ),
|
|
'frontend_available' => true,
|
|
'render_type' => 'template',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'customize_dashboard_description',
|
|
[
|
|
'raw' => sprintf(
|
|
/* translators: 1: Saved templates link opening tag. 2: Link closing tag. */
|
|
esc_html__( 'Replaces the default WooCommerce customer dashboard screen with a custom template. (Don\'t have one? Head over to %1$sSaved Templates%2$s.)', 'elementor-pro' ),
|
|
sprintf( '<a href="%s" target="_blank">', admin_url( 'edit.php?post_type=elementor_library&tabs_group=library#add_new' ) ),
|
|
'</a>'
|
|
),
|
|
'type' => Controls_Manager::RAW_HTML,
|
|
'content_classes' => 'elementor-control-field-description elementor-descriptor elementor-descriptor-subtle',
|
|
'condition' => [
|
|
'customize_dashboard_check' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'customize_dashboard_select_heading',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Choose template', 'elementor-pro' ),
|
|
'condition' => [
|
|
'customize_dashboard_check' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$document_types = Plugin::elementor()->documents->get_document_types( [
|
|
'show_in_library' => true,
|
|
] );
|
|
|
|
$this->add_control(
|
|
'customize_dashboard_select',
|
|
[
|
|
'type' => QueryControlModule::QUERY_CONTROL_ID,
|
|
'label_block' => true,
|
|
'show_label' => false,
|
|
'autocomplete' => [
|
|
'object' => QueryControlModule::QUERY_OBJECT_LIBRARY_TEMPLATE,
|
|
'query' => [
|
|
'meta_query' => [
|
|
[
|
|
'key' => Document::TYPE_META_KEY,
|
|
'value' => array_keys( $document_types ),
|
|
'compare' => 'IN',
|
|
],
|
|
],
|
|
],
|
|
],
|
|
'condition' => [
|
|
'customize_dashboard_check' => 'yes',
|
|
],
|
|
'render_type' => 'template',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'edit_button',
|
|
[
|
|
'raw' => sprintf( '<a href="#" target="_blank" class="elementor-button elementor-edit-template" style="margin-top:0px;"><i class="eicon-pencil" style="margin-left:10px;"></i>%s</a>', esc_html__( 'Edit Template', 'elementor-pro' ) ),
|
|
'type' => Controls_Manager::RAW_HTML,
|
|
'content_classes' => 'elementor-edit-template-wrapper',
|
|
'condition' => [
|
|
'customize_dashboard_check' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'tabs_style',
|
|
[
|
|
'label' => esc_html__( 'Tabs', 'elementor-pro' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'tabs_typography',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a',
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tabs_section' );
|
|
|
|
$this->start_controls_tab( 'tabs_normal', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ) ] );
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'tabs_normal_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li:not(.is-active) a',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'tabs_normal_box_shadow',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li:not(.is-active) a',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_normal_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-normal-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'tabs_hover', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ) ] );
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'tabs_hover_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'tabs_hover_box_shadow',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_hover_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-hover-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_hover_border_color',
|
|
[
|
|
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-hover-border-color: {{VALUE}}',
|
|
],
|
|
'condition' => [
|
|
'tabs_border_type!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'tabs_active', [ 'label' => esc_html__( 'Active', 'elementor-pro' ) ] );
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'tabs_active_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'tabs_active_box_shadow',
|
|
'selector' => '{{WRAPPER}} .woocommerce-MyAccount-navigation ul li.is-active a',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_active_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-active-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_active_border_color',
|
|
[
|
|
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-active-border-color: {{VALUE}}',
|
|
],
|
|
'condition' => [
|
|
'tabs_border_type!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->add_control(
|
|
'tabs_border_type',
|
|
[
|
|
'label' => esc_html__( 'Border Type', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => $this->get_custom_border_type_options(),
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-border-type: {{VALUE}};',
|
|
],
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_border_width',
|
|
[
|
|
'label' => esc_html__( 'Width', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'tabs_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_border_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-border-color: {{VALUE}};',
|
|
],
|
|
'condition' => [
|
|
'tabs_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_border_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_padding',
|
|
[
|
|
'label' => esc_html__( 'Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_spacing',
|
|
[
|
|
'label' => esc_html__( 'Spacing', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-spacing: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_divider_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Dividers', 'elementor-pro' ),
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tabs_divider_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-divider-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tabs_divider_weight',
|
|
[
|
|
'label' => esc_html__( 'Width', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tabs-divider-weight: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'sections_title',
|
|
[
|
|
'label' => esc_html__( 'Sections', 'elementor-pro' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'my_account_sections_background_color',
|
|
[
|
|
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--sections-background-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'my_account_sections_box_shadow',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab__dashboard:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content-wrapper, {{WRAPPER}} .e-my-account-tab__orders .woocommerce-MyAccount-content-wrapper, {{WRAPPER}} .e-my-account-tab__downloads .woocommerce-MyAccount-content-wrapper, {{WRAPPER}} address, {{WRAPPER}} .e-my-account-tab__edit-account .woocommerce-MyAccount-content-wrapper, {{WRAPPER}} .e-my-account-tab__view-order .order_details, {{WRAPPER}} .woocommerce-form-login, {{WRAPPER}} .woocommerce-form-register, {{WRAPPER}} .woocommerce-ResetPassword, {{WRAPPER}} .e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'sections_border_type',
|
|
[
|
|
'label' => esc_html__( 'Border Type', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => $this->get_custom_border_type_options(),
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--sections-border-type: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'sections_border_width',
|
|
[
|
|
'label' => esc_html__( 'Width', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--sections-border-top-width: {{TOP}}{{UNIT}}; --sections-border-right-width: {{RIGHT}}{{UNIT}}; --sections-border-bottom-width: {{BOTTOM}}{{UNIT}}; --sections-border-left-width: {{LEFT}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'sections_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'sections_border_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--sections-border-color: {{VALUE}};',
|
|
],
|
|
'condition' => [
|
|
'sections_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'sections_border_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--sections-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'sections_padding',
|
|
[
|
|
'label' => esc_html__( 'Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--sections-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --edit-link-margin-top: {{TOP}}{{UNIT}}; --edit-link-margin-start: {{LEFT}}{{UNIT}};',
|
|
'{{WRAPPER}} .e-my-account-tab__edit-address .woocommerce-Address address' => 'padding-top: calc( {{TOP}}{{UNIT}} + 40px );',
|
|
'{{WRAPPER}} .woocommerce-pagination' => 'padding-bottom: {{BOTTOM}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'typography_title',
|
|
[
|
|
'label' => esc_html__( 'Typography', 'elementor-pro' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'typography_titles',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Section Titles', 'elementor-pro' ),
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'typography_section_titles_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--typography-section-titles-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'section_titles_typography',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) h2, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) h3',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Text_Shadow::get_type(),
|
|
[
|
|
'name' => 'section_titles_typography_text_shadow',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) h2, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) h3',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'section_title_spacing',
|
|
[
|
|
'label' => esc_html__( 'Spacing', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--section-title-spacing: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'typography_secondary_titles',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'General Text', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'general_text_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--general-text-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'general_text_typography',
|
|
'selector' => '{{WRAPPER}} .woocommerce-MyAccount-content > div > p, {{WRAPPER}} address, {{WRAPPER}} .woocommerce-EditAccountForm fieldset legend, {{WRAPPER}} .woocommerce-ResetPassword p:nth-child(1), {{WRAPPER}} .woocommerce-OrderUpdate',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'typography_login_messages_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Login Messages', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'login_messages_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--login-messages-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'login_messages_typography',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register p:not([class]), {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce em',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'checkboxes_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Checkboxes', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'checkboxes_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--checkboxes-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'checkboxes_typography',
|
|
'selector' => '{{WRAPPER}} .woocommerce-form__label-for-checkbox span',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'payment_methods_radio_buttons_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Radio Buttons', 'elementor-pro' ),
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'payment_methods_radio_buttons_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--payment-methods-radio-buttons-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'payment_methods_radio_buttons_typography',
|
|
'selector' => '{{WRAPPER}} .woocommerce-PaymentMethod .input-radio + label',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'links_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Links', 'elementor-pro' ),
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'links_colors' );
|
|
|
|
$this->start_controls_tab( 'links_normal_colors', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'links_normal_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--links-normal-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'links_hover_colors', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'links_hover_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--links-hover-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'forms_section',
|
|
[
|
|
'label' => esc_html__( 'Forms', 'elementor-pro' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_columns_gap',
|
|
[
|
|
'label' => esc_html__( 'Columns Gap', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-columns-gap-padding-right: calc( {{SIZE}}{{UNIT}}/2 ); --forms-columns-gap-padding-left: calc( {{SIZE}}{{UNIT}}/2 ); --forms-columns-gap-margin-left: calc( -{{SIZE}}{{UNIT}}/2 ); --forms-columns-gap-margin-right: calc( -{{SIZE}}{{UNIT}}/2 );',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_rows_gap',
|
|
[
|
|
'label' => esc_html__( 'Rows Gap', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-rows-gap: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_label_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Labels', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_label_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-labels-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'forms_label_typography',
|
|
'selector' => '{{WRAPPER}} .woocommerce-form-row label, {{WRAPPER}} .woocommerce-address-fields label',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_label_spacing',
|
|
[
|
|
'label' => esc_html__( 'Spacing', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-label-spacing: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_field_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Fields', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'forms_field_typography',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row .input-text, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select, {{WRAPPER}} ::placeholder, {{WRAPPER}} .select2-container--default .select2-selection--single, .select2-results__option, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]',
|
|
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'forms_fields_styles' );
|
|
|
|
$this->start_controls_tab( 'forms_fields_normal_styles', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'forms_fields_normal_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-fields-normal-color: {{VALUE}};',
|
|
'.e-woo-select2-wrapper .select2-results__option' => 'color: {{VALUE}};',
|
|
// style select2 arrow
|
|
'{{WRAPPER}} .select2-container--default .select2-selection--single .select2-selection__arrow b' => 'border-color: {{VALUE}} transparent transparent transparent;',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'forms_fields_normal_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row .input-text, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default, .select2-results__option, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'forms_fields_normal_box_shadow',
|
|
'selector' => '{{WRAPPER}} .input-text, {{WRAPPER}} select, {{WRAPPER}} .select2-container--default .select2-selection--single, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'forms_fields_focus_styles', [ 'label' => esc_html__( 'Focus', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'forms_fields_focus_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-fields-focus-color: {{VALUE}}',
|
|
'.e-woo-select2-wrapper .select2-results__option:focus' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'forms_fields_focus_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row .input-text:focus, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select:focus, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default.select2-container--focus .select2-selection--single, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default.select2-container--focus, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]:focus',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'forms_fields_focus_box_shadow',
|
|
'selector' => '{{WRAPPER}} .input-text:focus, {{WRAPPER}} select:focus, {{WRAPPER}} .select2-container--default .select2-selection--single:focus, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]:focus',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_fields_focus_border_color',
|
|
[
|
|
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row .input-text:focus, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select:focus, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default.select2-container--focus, .select2-results__option:focus, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]:focus' => 'border-color: {{VALUE}}',
|
|
],
|
|
'condition' => [
|
|
'forms_fields_border_border!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_fields_focus_transition_duration',
|
|
[
|
|
'label' => esc_html__( 'Transition Duration', 'elementor-pro' ) . ' (ms)',
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 3000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-fields-focus-transition-duration: {{SIZE}}ms',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'forms_fields_border',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row .input-text, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default, {{WRAPPER}} .e-my-account-tab__payment-methods input[type=text]',
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_fields_border_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-fields-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_fields_padding',
|
|
[
|
|
'label' => esc_html__( 'Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-fields-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
// style select2
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single .select2-selection__rendered' => 'line-height: calc( ({{TOP}}{{UNIT}}*2) + 16px ); padding-left: {{LEFT}}{{UNIT}}; padding-right: {{RIGHT}}{{UNIT}};',
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single .select2-selection__arrow' => 'height: calc( ({{TOP}}{{UNIT}}*2) + 16px ); right: {{RIGHT}}{{UNIT}};',
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single' => 'height: auto;',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_button_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Buttons', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'forms_button_typography',
|
|
'selector' => '{{WRAPPER}} button.button, {{WRAPPER}} #add_payment_method #payment #place_order',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Text_Shadow::get_type(),
|
|
[
|
|
'name' => 'forms_button_text_shadow',
|
|
'selector' => '{{WRAPPER}} button.button, {{WRAPPER}} #add_payment_method #payment #place_order',
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'forms_buttons_styles' );
|
|
|
|
$this->start_controls_tab( 'forms_buttons_normal_styles', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'forms_buttons_normal_text_color',
|
|
[
|
|
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-buttons-normal-text-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'forms_buttons_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button, {{WRAPPER}} #add_payment_method #payment #place_order',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'forms_buttons_normal_box_shadow',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button, {{WRAPPER}} button.button, {{WRAPPER}} #add_payment_method #payment #place_order',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'forms_buttons_hover_styles', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'forms_buttons_hover_text_color',
|
|
[
|
|
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-buttons-hover-text-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'forms_buttons_hover_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button:hover, {{WRAPPER}} #add_payment_method #payment #place_order:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'forms_buttons_focus_box_shadow',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button:hover, {{WRAPPER}} button.button:hover, {{WRAPPER}} #add_payment_method #payment #place_order:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_buttons_hover_border_color',
|
|
[
|
|
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button:hover, {{WRAPPER}} #add_payment_method #payment #place_order:hover' => 'border-color: {{VALUE}}',
|
|
],
|
|
'condition' => [
|
|
'forms_buttons_border_border!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_buttons_hover_transition_duration',
|
|
[
|
|
'label' => esc_html__( 'Transition Duration', 'elementor-pro' ) . ' (ms)',
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 3000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-buttons-hover-transition-duration: {{SIZE}}ms',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'forms_buttons_hover_animation',
|
|
[
|
|
'label' => esc_html__( 'Hover Animation', 'elementor-pro' ),
|
|
'type' => Controls_Manager::HOVER_ANIMATION,
|
|
'frontend_available' => true,
|
|
'render_type' => 'template',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'forms_buttons_border',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button, {{WRAPPER}} #add_payment_method #payment #place_order',
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_buttons_border_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-buttons-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'forms_buttons_padding',
|
|
[
|
|
'label' => esc_html__( 'Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--forms-buttons-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'tables_section',
|
|
[
|
|
'label' => esc_html__( 'Order Details', 'elementor-pro' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tables_rows_gap',
|
|
[
|
|
'label' => esc_html__( 'Rows Gap', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--order-summary-rows-gap-top: calc( {{SIZE}}{{UNIT}}/2 ); --order-summary-rows-gap-bottom: calc( {{SIZE}}{{UNIT}}/2 );',
|
|
],
|
|
'separator' => 'after',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_titles',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Titles & Totals', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_title_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-title-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'tables_titles_typography',
|
|
'selector' => '{{WRAPPER}} .order_details thead th, {{WRAPPER}} .order_details tfoot td, {{WRAPPER}} .order_details tfoot th, {{WRAPPER}} .nobr',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Text_Shadow::get_type(),
|
|
[
|
|
'name' => 'tables_titles_text_shadow',
|
|
'selector' => '{{WRAPPER}} .order_details thead th, {{WRAPPER}} .order_details tfoot td, {{WRAPPER}} .order_details tfoot th, {{WRAPPER}} .nobr',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_items_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Items', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_items_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-items-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'tables_items_typography',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab__orders tbody td, {{WRAPPER}} .e-my-account-tab__downloads tbody td, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .product-quantity, {{WRAPPER}} .woocommerce-table--order-downloads tbody td, {{WRAPPER}} .woocommerce-table--order-details td a, {{WRAPPER}} td.product-total, {{WRAPPER}} td.payment-method-method, {{WRAPPER}} td.payment-method-expires',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'variations_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Variations', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'variations_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--variations-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'variations_typography',
|
|
'selector' => '{{WRAPPER}} .wc-item-meta',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'sections_links_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Product Link', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tables_links_colors' );
|
|
|
|
$this->start_controls_tab( 'tables_links_normal_colors', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'tables_links_normal_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-links-normal-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'tables_links_hover_colors', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'tables_links_hover_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-links-hover-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->add_control(
|
|
'tables_divider_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Dividers', 'elementor-pro' ),
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_divider_border_type',
|
|
[
|
|
'label' => esc_html__( 'Border Type', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => $this->get_custom_border_type_options(),
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-divider-border-type: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tables_divider_border_width',
|
|
[
|
|
'label' => esc_html__( 'Width', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-divider-border-width: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'tables_divider_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_divider_border_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-divider-border-color: {{VALUE}};',
|
|
],
|
|
'condition' => [
|
|
'tables_divider_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_button_title',
|
|
[
|
|
'type' => Controls_Manager::HEADING,
|
|
'label' => esc_html__( 'Buttons', 'elementor-pro' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'tables_button_typography',
|
|
'selector' => '{{WRAPPER}} .shop_table .button, {{WRAPPER}} .order-again .button, {{WRAPPER}} .woocommerce-pagination .button, {{WRAPPER}} .e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Text_Shadow::get_type(),
|
|
[
|
|
'name' => 'tables_button_text_shadow',
|
|
'selector' => '{{WRAPPER}} .shop_table .button, {{WRAPPER}} .order-again .button, {{WRAPPER}} .woocommerce-pagination .button, {{WRAPPER}} .e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button',
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tables_button_styles' );
|
|
|
|
$this->start_controls_tab( 'tables_button_styles_normal', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'tables_button_normal_text_color',
|
|
[
|
|
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-button-normal-text-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'tables_button_normal_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-pagination .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom).e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'tables_button_normal_box_shadow',
|
|
'selector' => '{{WRAPPER}} .shop_table .button, {{WRAPPER}} .order-again .button, {{WRAPPER}} .woocommerce-pagination .button, {{WRAPPER}} .e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab( 'tables_button_styles_hover', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ) ] );
|
|
|
|
$this->add_control(
|
|
'tables_button_hover_text_color',
|
|
[
|
|
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .shop_table .button:hover, {{WRAPPER}} .woocommerce-pagination .button:hover, {{WRAPPER}} .order-again .button:hover, {{WRAPPER}} .e-my-account-tab__payment-methods .woocommerce .woocommerce-MyAccount-content-wrapper .button:hover' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'tables_button_hover_background',
|
|
'selector' => '{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-pagination .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom).e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'tables_button_hover_box_shadow',
|
|
'selector' => '{{WRAPPER}} .shop_table .button:hover, {{WRAPPER}} .order-again .button:hover, {{WRAPPER}} .woocommerce-pagination .button:hover, {{WRAPPER}} .e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_button_hover_border_color',
|
|
[
|
|
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button:hover, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-pagination .button:hover, {{WRAPPER}} .e-my-account-tab__payment-methods:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content-wrapper .button:hover' => 'border-color: {{VALUE}}',
|
|
],
|
|
'condition' => [
|
|
'tables_button_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_button_hover_transition_duration',
|
|
[
|
|
'label' => esc_html__( 'Transition Duration', 'elementor-pro' ) . ' (ms)',
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 3000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-button-hover-transition-duration: {{SIZE}}ms',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_button_hover_animation',
|
|
[
|
|
'label' => esc_html__( 'Hover Animation', 'elementor-pro' ),
|
|
'type' => Controls_Manager::HOVER_ANIMATION,
|
|
'frontend_available' => true,
|
|
'render_type' => 'template',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->add_control(
|
|
'tables_button_border_type',
|
|
[
|
|
'label' => esc_html__( 'Border Type', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => $this->get_custom_border_type_options(),
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-buttons-border-type: {{VALUE}};',
|
|
],
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tables_button_border_width',
|
|
[
|
|
'label' => esc_html__( 'Width', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-pagination .button, {{WRAPPER}} .e-my-account-tab:not(.e-my-account-tab__dashboard--custom).e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'tables_button_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tables_button_border_color',
|
|
[
|
|
'label' => esc_html__( 'Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} ' => '--tables-buttons-border-color: {{VALUE}};',
|
|
],
|
|
'condition' => [
|
|
'tables_button_border_type!' => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tables_button_border_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-button-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'tables_button_padding',
|
|
[
|
|
'label' => esc_html__( 'Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--tables-button-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
}
|
|
|
|
public function modify_menu_items( $items, $endpoints ) {
|
|
$settings = $this->get_settings_for_display();
|
|
|
|
if ( ! empty( $settings['tabs'] ) ) {
|
|
foreach ( $settings['tabs'] as $tab ) {
|
|
if ( isset( $tab['tab_name'] ) && isset( $items[ $tab['field_key'] ] ) ) {
|
|
$items[ $tab['field_key'] ] = $tab['tab_name'];
|
|
}
|
|
}
|
|
}
|
|
|
|
return $items;
|
|
}
|
|
|
|
/**
|
|
* WooCommerce Get My Account Page Permalink
|
|
*
|
|
* Modify the permalinks of the My Account menu items. By default the permalinks will go to the
|
|
* set WooCommerce My Account Page, even if the widget is on a different page. This function will override
|
|
* the permalinks to use the widget page URL as the base URL instead.
|
|
*
|
|
* This is a callback function for the woocommerce_get_myaccount_page_permalink filter.
|
|
*
|
|
* @since 3.5.0
|
|
*
|
|
* @return string
|
|
*/
|
|
public function woocommerce_get_myaccount_page_permalink( $bool ) {
|
|
return get_permalink();
|
|
}
|
|
|
|
/**
|
|
* WooCommerce Logout Default Redirect URL
|
|
*
|
|
* Modify the permalink of the My Account Logout menu item. We add this so that we can add custom
|
|
* parameters to the URL, which we can later access to log the user out and redirect back to the widget
|
|
* page. Without this WooCommerce would have always just redirect back to the set My Account Page
|
|
* after log out.
|
|
*
|
|
* This is a callback function for the woocommerce_logout_default_redirect_url filter.
|
|
*
|
|
* @since 3.5.0
|
|
*
|
|
* @return string
|
|
*/
|
|
public function woocommerce_logout_default_redirect_url( $redirect ) {
|
|
return $redirect . '?elementor_wc_logout=true&elementor_my_account_redirect=' . esc_url( get_permalink() );
|
|
}
|
|
|
|
protected function render() {
|
|
// Add actions & filters before displaying our Widget.
|
|
add_action( 'woocommerce_account_navigation', [ $this, 'woocommerce_account_navigation' ], 1 );
|
|
add_filter( 'woocommerce_account_menu_items', [ $this, 'modify_menu_items' ], 10, 2 );
|
|
add_action( 'woocommerce_account_content', [ $this, 'before_account_content' ], 2 );
|
|
add_action( 'woocommerce_account_content', [ $this, 'after_account_content' ], 95 );
|
|
add_filter( 'woocommerce_get_myaccount_page_permalink', [ $this, 'woocommerce_get_myaccount_page_permalink' ], 10, 1 );
|
|
add_filter( 'woocommerce_logout_default_redirect_url', [ $this, 'woocommerce_logout_default_redirect_url' ], 10, 1 );
|
|
add_filter( 'woocommerce_is_account_page', '__return_true' );
|
|
|
|
if ( $this->has_custom_template() && 'dashboard' === $this->get_current_endpoint() ) {
|
|
remove_action( 'woocommerce_account_content', 'woocommerce_account_content', 10 );
|
|
add_action( 'woocommerce_account_content', [ $this, 'display_custom_template' ], 10 );
|
|
}
|
|
|
|
// Display our Widget.
|
|
if ( ! Plugin::elementor()->editor->is_edit_mode() ) {
|
|
$this->render_html_front_end();
|
|
} else {
|
|
$this->render_html_editor();
|
|
}
|
|
|
|
// Remove actions & filters after displaying our Widget.
|
|
remove_action( 'woocommerce_account_navigation', [ $this, 'woocommerce_account_navigation' ], 2 );
|
|
remove_action( 'woocommerce_account_menu_items', [ $this, 'modify_menu_items' ], 10 );
|
|
remove_action( 'woocommerce_account_content', [ $this, 'before_account_content' ], 5 );
|
|
remove_action( 'woocommerce_account_content', [ $this, 'after_account_content' ], 99 );
|
|
remove_filter( 'woocommerce_get_myaccount_page_permalink', [ $this, 'woocommerce_get_myaccount_page_permalink' ], 10, 1 );
|
|
remove_filter( 'woocommerce_logout_default_redirect_url', [ $this, 'woocommerce_logout_default_redirect_url' ], 10, 1 );
|
|
remove_filter( 'woocommerce_is_account_page', '__return_true' );
|
|
|
|
if ( $this->has_custom_template() && 'dashboard' === $this->get_current_endpoint() ) {
|
|
remove_action( 'woocommerce_account_content', [ $this, 'display_custom_template' ], 10 );
|
|
add_action( 'woocommerce_account_content', 'woocommerce_account_content', 10 );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get Account Pages
|
|
*
|
|
* Get all the pages that would render on the My Account page.
|
|
* We will use this array to be able to render all these pages' content when the editor loads.
|
|
* We will then switch between the pages via JS as all the content is already on the page.
|
|
*
|
|
* @since 3.5.0
|
|
*
|
|
* @return array
|
|
*/
|
|
private function get_account_pages() {
|
|
$pages = [
|
|
'dashboard' => '',
|
|
'orders' => '',
|
|
'downloads' => '',
|
|
'edit-address' => '',
|
|
];
|
|
|
|
// Check if payment gateways support add new payment methods.
|
|
$support_payment_methods = false;
|
|
foreach ( WC()->payment_gateways->get_available_payment_gateways() as $gateway ) {
|
|
if ( $gateway->supports( 'add_payment_method' ) || $gateway->supports( 'tokenization' ) ) {
|
|
$support_payment_methods = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if ( $support_payment_methods ) {
|
|
$pages['payment-methods'] = '';
|
|
$pages['add-payment-method'] = '';
|
|
}
|
|
|
|
// Edit account.
|
|
$pages['edit-account'] = '';
|
|
|
|
// Get the latest order (if there is one) for view-order (order preview) page.
|
|
$recent_order = wc_get_orders( [
|
|
'limit' => 1,
|
|
'orderby' => 'date',
|
|
'order' => 'DESC',
|
|
] );
|
|
|
|
if ( ! empty( $recent_order ) ) {
|
|
$pages['view-order'] = $recent_order[0]->get_id();
|
|
}
|
|
|
|
return $pages;
|
|
}
|
|
|
|
/**
|
|
* Get Current Endpoint
|
|
*
|
|
* Used to determine which page Account Page the user is on currently.
|
|
* This is used so we can add a unique wrapper class around the page's content.
|
|
*
|
|
* @since 3.5.0
|
|
*
|
|
* @return string
|
|
*/
|
|
private function get_current_endpoint() {
|
|
global $wp_query;
|
|
$current = '';
|
|
|
|
$pages = $this->get_account_pages();
|
|
|
|
foreach ( $pages as $page => $val ) {
|
|
if ( isset( $wp_query->query[ $page ] ) ) {
|
|
$current = $page;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if ( '' === $current && isset( $wp_query->query_vars['page'] ) ) {
|
|
$current = 'dashboard'; // Dashboard is not an endpoint so it needs a custom check.
|
|
}
|
|
|
|
return $current;
|
|
}
|
|
|
|
/**
|
|
* Render HTML Front End
|
|
*
|
|
* This function will output the content on the front-end.
|
|
*
|
|
* @since 3.5.0
|
|
*/
|
|
private function render_html_front_end() {
|
|
$current_endpoint = $this->get_current_endpoint();
|
|
$custom_dashboard_class = '';
|
|
if ( 'dashboard' === $current_endpoint && $this->has_custom_template() && is_user_logged_in() ) {
|
|
$custom_dashboard_class = 'e-my-account-tab__dashboard--custom';
|
|
}
|
|
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
|
echo '<div class="e-my-account-tab e-my-account-tab__' . sanitize_html_class( $current_endpoint ) . ' ' . $custom_dashboard_class . '">'; ?>
|
|
<?php echo do_shortcode( '[woocommerce_my_account]' ); ?>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* Render HTML Editor
|
|
*
|
|
* This function will output the content in the Editor.
|
|
* One navigation will be rendered and the content for all pages will be rendered.
|
|
* Only the dashboard page's content will show on page load as the other pages' content
|
|
* will be hidden with CSS and toggled via JS when the user clicks on the menu items.
|
|
*
|
|
* @since 3.5.0
|
|
*/
|
|
private function render_html_editor() {
|
|
$settings = $this->get_settings_for_display();
|
|
// Add .e-my-account-tab__dashboard as the default class when the editor loads.
|
|
// This class will be replaced with JS when tabs are switched.
|
|
|
|
$custom_dashboard_class = '';
|
|
if ( $this->has_custom_template() && is_user_logged_in() ) {
|
|
$custom_dashboard_class = 'e-my-account-tab__dashboard--custom';
|
|
}
|
|
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
|
echo '<div class="e-my-account-tab e-my-account-tab__dashboard ' . $custom_dashboard_class . '">';
|
|
?>
|
|
<div class="woocommerce">
|
|
<?php
|
|
if ( 'horizontal' === $settings['tabs_layout'] ) {
|
|
?>
|
|
<div class="e-wc-account-tabs-nav">
|
|
<?php wc_get_template( 'myaccount/navigation.php' ); ?>
|
|
</div>
|
|
<?php
|
|
} else {
|
|
wc_get_template( 'myaccount/navigation.php' );
|
|
}
|
|
|
|
// In the editor, output all the tabs in order to allow for switching between them via JS.
|
|
$pages = $this->get_account_pages();
|
|
|
|
global $wp_query;
|
|
foreach ( $pages as $page => $page_value ) {
|
|
foreach ( $pages as $unset_tab => $unset_tab_value ) {
|
|
unset( $wp_query->query_vars[ $unset_tab ] );
|
|
}
|
|
$wp_query->query_vars[ $page ] = $page_value;
|
|
|
|
$wrapper_class = $this->get_account_content_wrapper( [
|
|
'context' => 'editor',
|
|
'page' => $page,
|
|
] );
|
|
?>
|
|
<div class="woocommerce-MyAccount-content" <?php echo $page ? 'e-my-account-page="' . esc_attr( $page ) . '"' : ''; ?>>
|
|
<div class="<?php echo sanitize_html_class( $wrapper_class ); ?>">
|
|
<?php
|
|
if ( 'dashboard' === $page ) {
|
|
if ( ! $this->has_custom_template() ) {
|
|
wc_get_template(
|
|
'myaccount/dashboard.php',
|
|
[
|
|
'current_user' => get_user_by( 'id', get_current_user_id() ),
|
|
]
|
|
);
|
|
} else {
|
|
$this->display_custom_template();
|
|
}
|
|
} else {
|
|
do_action( 'woocommerce_account_' . $page . '_endpoint', $page_value );
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* Woocommerce Account Navigation
|
|
*
|
|
* Output a horizontal menu if the setting was selected. The default vertical menu will be hidden with CSS
|
|
* and this menu will show. We wrap this menu with a class '.e-wc-account-tabs-nav' so that we
|
|
* can manipulate the display for this menu with CSS (make it horizontal).
|
|
*
|
|
* Callback function for the woocommerce_account_navigation hook.
|
|
*
|
|
* This eliminates the need for template overrides.
|
|
*
|
|
* @since 3.5.0
|
|
*/
|
|
public function woocommerce_account_navigation() {
|
|
$settings = $this->get_settings_for_display();
|
|
|
|
if ( 'horizontal' === $settings['tabs_layout'] ) {
|
|
?>
|
|
<div class="e-wc-account-tabs-nav">
|
|
<?php wc_get_template( 'myaccount/navigation.php' ); ?>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check if the My Account dashboard intro content is replaced with a custom Elementor template
|
|
*
|
|
* Conditions:
|
|
* 1. Customize Dashboard = Show
|
|
* 2. A Template ID has been set
|
|
*
|
|
* @since 3.7.0
|
|
*
|
|
* @return boolean
|
|
*/
|
|
public function has_custom_template() {
|
|
$template_id = intval( $this->get_dashboard_template_id() );
|
|
|
|
return 0 < $template_id;
|
|
}
|
|
|
|
/**
|
|
* Get Account Content Wrapper
|
|
*
|
|
* This function will determine the wrapper class around the main content.
|
|
* There are different wrappers depending on the following scenarios:
|
|
* 1. Are there orders/downloads or not.
|
|
* 2. A custom template been selected for the dashboard intro or not
|
|
*
|
|
* @since 3.5.0
|
|
*
|
|
* @return string
|
|
*/
|
|
private function get_account_content_wrapper( $args ) {
|
|
$user_id = get_current_user_id();
|
|
$num_orders = wc_get_customer_order_count( $user_id );
|
|
$num_downloads = count( wc_get_customer_available_downloads( $user_id ) );
|
|
$class = 'woocommerce-MyAccount-content-wrapper';
|
|
$current_endpoint = $this->get_current_endpoint();
|
|
|
|
/* we need to render a different css class if there are no orders/downloads to display
|
|
* as the no orders/downloads screen should not have the default padding and border
|
|
* around it but show the 'no orders/downloads' notification only
|
|
*/
|
|
if ( 'frontend' === $args['context'] ) { // Front-end display
|
|
global $wp_query;
|
|
if ( ( 0 === $num_orders && isset( $wp_query->query_vars['orders'] ) ) || ( 0 === $num_downloads && isset( $wp_query->query_vars['downloads'] ) ) ) {
|
|
$class .= '-no-data';
|
|
}
|
|
} else { // Editor display
|
|
if ( ( 0 === $num_orders && 'orders' === $args['page'] ) || ( 0 === $num_downloads && 'downloads' === $args['page'] ) ) {
|
|
$class .= '-no-data';
|
|
}
|
|
}
|
|
|
|
return $class;
|
|
}
|
|
|
|
/**
|
|
* Before Account Content
|
|
*
|
|
* Output containing elements. Callback function for the woocommerce_account_content hook.
|
|
*
|
|
* This eliminates the need for template overrides.
|
|
*
|
|
* @since 3.5.0
|
|
*/
|
|
public function before_account_content() {
|
|
$wrapper_class = $this->get_account_content_wrapper( [ 'context' => 'frontend' ] );
|
|
|
|
echo '<div class="' . sanitize_html_class( $wrapper_class ) . '">';
|
|
}
|
|
|
|
/**
|
|
* Get Dashboard Template ID
|
|
*
|
|
* Get the template_id for the dashboard intro section if a custom template should be displayed
|
|
*
|
|
* @since 3.7.0
|
|
*
|
|
* @return int
|
|
*/
|
|
public function get_dashboard_template_id() {
|
|
$settings = $this->get_settings_for_display();
|
|
if ( 'yes' === $settings['customize_dashboard_check'] ) {
|
|
$template_id = intval( $settings['customize_dashboard_select'] );
|
|
} else {
|
|
$template_id = 0;
|
|
}
|
|
|
|
return $template_id;
|
|
}
|
|
|
|
/**
|
|
* Display a custom template inside the My Account dashboard section
|
|
*
|
|
* @since 3.7.0
|
|
*/
|
|
public function display_custom_template() {
|
|
$template_id = intval( $this->get_dashboard_template_id() );
|
|
|
|
if ( 0 < $template_id ) {
|
|
echo do_shortcode( '[elementor-template id="' . $template_id . '"]' );
|
|
|
|
do_action( 'woocommerce_account_dashboard' );
|
|
do_action( 'woocommerce_before_my_account' );
|
|
do_action( 'woocommerce_after_my_account' );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* After Account Content
|
|
*
|
|
* Output containing elements. Callback function for the woocommerce_account_content hook.
|
|
*
|
|
* This eliminates the need for template overrides.
|
|
*
|
|
* @since 3.5.0
|
|
*/
|
|
public function after_account_content() {
|
|
echo '</div>';
|
|
}
|
|
|
|
public function get_group_name() {
|
|
return 'woocommerce';
|
|
}
|
|
}
|