Edit file File name : product-data-tabs.php Content :<?php namespace ElementorPro\Modules\Woocommerce\Widgets; use Elementor\Controls_Manager; use Elementor\Group_Control_Box_Shadow; use Elementor\Group_Control_Typography; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } class Product_Data_Tabs extends Base_Widget { public function get_name() { return 'woocommerce-product-data-tabs'; } public function get_title() { return esc_html__( 'Product Data Tabs', 'elementor-pro' ); } public function get_icon() { return 'eicon-product-tabs'; } public function get_keywords() { return [ 'woocommerce', 'shop', 'store', 'data', 'product', 'tabs' ]; } protected function register_controls() { $this->start_controls_section( 'section_product_tabs_style', [ 'label' => esc_html__( 'Tabs', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'wc_style_warning', [ // TODO: Remove define() with the release of Elementor 3.22 'type' => defined( 'Controls_Manager::ALERT' ) ? Controls_Manager::ALERT : 'alert', 'alert_type' => 'info', 'content' => esc_html__( 'The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins.', 'elementor-pro' ), ] ); $this->start_controls_tabs( 'tabs_style' ); $this->start_controls_tab( 'normal_tabs_style', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'tab_text_color', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li a' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'tab_bg_color', [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'alpha' => false, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'tabs_border_color', [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel' => 'border-color: {{VALUE}}', '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li' => 'border-color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'active_tabs_style', [ 'label' => esc_html__( 'Active', 'elementor-pro' ), ] ); $this->add_control( 'active_tab_text_color', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li.active a' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'active_tab_bg_color', [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'alpha' => false, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel, .woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li.active' => 'background-color: {{VALUE}}', '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li.active' => 'border-bottom-color: {{VALUE}}', ], ] ); $this->add_control( 'active_tabs_border_color', [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel' => 'border-color: {{VALUE}}', '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li.active' => 'border-color: {{VALUE}} {{VALUE}} {{active_tab_bg_color.VALUE}} {{VALUE}}', '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li:not(.active)' => 'border-bottom-color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'tab_typography', 'selector' => '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li a', 'separator' => 'before', ] ); $this->add_control( 'tab_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs li' => 'border-radius: {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0 0', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_product_panel_style', [ 'label' => esc_html__( 'Panel', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'text_color', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-Tabs-panel' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'selector' => '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel', ] ); $this->add_control( 'heading_panel_heading_style', [ 'type' => Controls_Manager::HEADING, 'label' => esc_html__( 'Heading', 'elementor-pro' ), 'separator' => 'before', ] ); $this->add_control( 'heading_color', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-Tabs-panel h2' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_heading_typography', 'selector' => '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel h2', ] ); $this->add_control( 'panel_border_width', [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; margin-top: -{{TOP}}{{UNIT}}', ], 'separator' => 'before', ] ); $this->add_control( 'panel_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}', '.woocommerce {{WRAPPER}} .woocommerce-tabs ul.wc-tabs' => 'margin-left: {{TOP}}{{UNIT}}; margin-right: {{RIGHT}}{{UNIT}}', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'panel_box_shadow', 'selector' => '.woocommerce {{WRAPPER}} .woocommerce-tabs .woocommerce-Tabs-panel', ] ); $this->end_controls_section(); } protected function render() { global $product; $product = $this->get_product(); if ( ! $product ) { return; } setup_postdata( $product->get_id() ); wc_get_template( 'single-product/tabs/tabs.php' ); // On render widget from Editor - trigger the init manually. if ( wp_doing_ajax() ) { ?> <script> jQuery( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' ); </script> <?php } } public function render_plain_content() {} public function get_group_name() { return 'woocommerce'; } } Save