View file File name : product-images.php Content :<?php namespace ElementorPro\Modules\Woocommerce\Widgets; use Elementor\Controls_Manager; use Elementor\Group_Control_Border; use ElementorPro\Core\Utils; use ElementorPro\Plugin; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } class Product_Images extends Base_Widget { public function get_name() { return 'woocommerce-product-images'; } public function get_title() { return esc_html__( 'Product Images', 'elementor-pro' ); } public function get_icon() { return 'eicon-product-images'; } public function get_keywords() { return [ 'woocommerce', 'shop', 'store', 'image', 'product', 'gallery', 'lightbox' ]; } protected function register_controls() { $this->start_controls_section( 'section_product_gallery_style', [ 'label' => esc_html__( 'Style', '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->add_control( 'sale_flash', [ 'label' => esc_html__( 'Sale Flash', 'elementor-pro' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'elementor-pro' ), 'label_off' => esc_html__( 'Hide', 'elementor-pro' ), 'render_type' => 'template', 'return_value' => 'yes', 'default' => 'yes', 'prefix_class' => '', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'image_border', 'selector' => '.woocommerce {{WRAPPER}} .woocommerce-product-gallery__trigger + .woocommerce-product-gallery__wrapper, .woocommerce {{WRAPPER}} .flex-viewport, .woocommerce {{WRAPPER}} .flex-control-thumbs img', 'separator' => 'before', ] ); $this->add_responsive_control( 'image_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .woocommerce-product-gallery__trigger + .woocommerce-product-gallery__wrapper, .woocommerce {{WRAPPER}} .flex-viewport' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}', ], ] ); $this->add_control( 'spacing', [ 'label' => esc_html__( 'Spacing', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .flex-viewport:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}}', ], ] ); $this->add_control( 'heading_thumbs_style', [ 'label' => esc_html__( 'Thumbnails', 'elementor-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'thumbs_border', 'selector' => '.woocommerce {{WRAPPER}} .flex-control-thumbs img', ] ); $this->add_responsive_control( 'thumbs_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .flex-control-thumbs img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}', ], ] ); $this->add_control( 'spacing_thumbs', [ 'label' => esc_html__( 'Spacing', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'selectors' => [ '.woocommerce {{WRAPPER}} .flex-control-thumbs li' => 'padding-right: calc({{SIZE}}{{UNIT}} / 2); padding-left: calc({{SIZE}}{{UNIT}} / 2); padding-bottom: {{SIZE}}{{UNIT}}', '.woocommerce {{WRAPPER}} .flex-control-thumbs' => 'margin-right: calc(-{{SIZE}}{{UNIT}} / 2); margin-left: calc(-{{SIZE}}{{UNIT}} / 2)', ], ] ); $this->end_controls_section(); } public function render() { global $product; $product = $this->get_product(); if ( ! $product ) { return; } $settings = $this->get_settings_for_display(); $is_library_preview = Utils::_unstable_get_super_global_value( $_GET, 'elementor_library' ) && Utils::_unstable_get_super_global_value( $_GET, 'preview_id' ); if ( $is_library_preview ) { // We need to enqueue these scripts manually on the Library preview. $this->load_assets_dependencies(); } if ( 'yes' === $settings['sale_flash'] ) { wc_get_template( 'loop/sale-flash.php' ); } wc_get_template( 'single-product/product-image.php' ); // On render widget from Editor - trigger the init manually. if ( Plugin::elementor()->editor->is_edit_mode() ) { ?> <script> jQuery( '.woocommerce-product-gallery' ).each( function() { jQuery( this ).wc_product_gallery(); } ); </script> <?php } } private function load_assets_dependencies() { if ( current_theme_supports( 'wc-product-gallery-zoom' ) ) { wp_enqueue_script( 'zoom' ); } if ( current_theme_supports( 'wc-product-gallery-slider' ) ) { wp_enqueue_script( 'flexslider' ); } if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) { wp_enqueue_script( 'photoswipe-ui-default' ); wp_enqueue_style( 'photoswipe-default-skin' ); add_action( 'wp_footer', 'woocommerce_photoswipe' ); } wp_enqueue_script( 'wc-single-product' ); wp_enqueue_style( 'photoswipe' ); wp_enqueue_style( 'photoswipe-default-skin' ); wp_enqueue_style( 'woocommerce_prettyPhoto_css' ); } public function get_group_name() { return 'woocommerce'; } }