✏️ Editing: product.php Writable

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Group_Control_Border;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class Nighty_Elementor_Product extends Widget_Base {

public function get_name() {
		return 'nighty_elementor_product';
	}

public function get_title() {
		return esc_html__( 'Product', 'nighty' );
	}

public function get_icon() {
		return 'eicon-products';
	}

public function get_categories() {
		return [ 'nighty' ];
	}

public function get_script_depends() {

wp_enqueue_style( 'fancybox-style', NIGHTY_URI . '/assets/libs/fancybox/fancybox.css', 'all' );
		wp_enqueue_script( 'fancybox-script', NIGHTY_URI . '/assets/libs/fancybox/fancybox.umd.js', ['jquery'], true , 'all' );

return [ 'nighty-elementor-product' ];
	}
	
	protected function register_controls() {

$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Content', 'nighty' ),
			]
		);

$this->add_control(
				'item_col_number',
				[
					'label' => esc_html__( 'Columns', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SELECT,
					'default' => '3',
					'options' => [
						'1' => 1,
						'2' => 2,
						'3'  => 3,
						'4' => 4,
					],
				]
			);

$this->add_control(
				'item_number',
				[
					'label' => esc_html__( 'Items', 'nighty' ),
					'type' => \Elementor\Controls_Manager::NUMBER,
					'min' => 1,
					'max' => 20,
					'step' => 1,
					'default' => 3,
				]
			);

$this->add_control(
				'order_by',
				[
					'label' => esc_html__( 'Order By', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SELECT,
					'default' => 'date',
					'options' => [
						'date' => esc_html__( 'Date', 'nighty' ),
						'price' => esc_html__( 'Price', 'nighty' ),
						'ID' => esc_html__( 'ID', 'nighty' ),
						'title' => esc_html__( 'Title', 'nighty' ),
						'rand' => esc_html__( 'Random', 'nighty' ),
					],
				]
			);

$this->add_control(
				'order',
				[
					'label' => esc_html__( 'Order', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SELECT,
					'default' => 'desc',
					'options' => [
						'desc' => 'DESC',
						'asc' => 'ASC',
					],
				]
			);

$terms = get_terms( array( 'taxonomy'=> 'product_cat' ) );
			$categories = [];
			if ($terms) {
				foreach ($terms as $term) {
					$categories[$term->slug] = $term->name;
				}
			}
			$cat_inc = $categories;
			$cat_exc = $categories;
			$cat_exc['none'] = esc_html__( 'None', 'nighty' );
			$cat_inc['all'] = esc_html__( 'All', 'nighty' );
			
			$this->add_control(
				'category_include',
				[
					'label' => esc_html__( 'Category Include', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SELECT,
					'default' => 'all',
					'options' => $cat_inc,
				]
			);

$this->add_control(
				'category_exclude',
				[
					'label' => esc_html__( 'Category Exclude', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SELECT,
					'options' => $cat_exc,
					'default' => 'none',
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'general_style_section',
			[
				'label' => esc_html__( 'General', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Box_Shadow::get_type(),
				[
					'name' => 'item_box_shadow',
					'selector' => '{{WRAPPER}} .ova-product .list-product .item',
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Border::get_type(),
				[
					'name' => 'item_border',
					'selector' => '{{WRAPPER}} .ova-product .list-product .item',
				]
			);

$this->add_control(
				'item_background_color',
				[
					'label' => esc_html__( 'Background', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .item' => 'background: {{VALUE}}'
					],
				]
			);

$this->end_controls_section();

/*TAB STYLE*/

$this->start_controls_section(
			'product_style_section',
			[
				'label' => esc_html__( 'Product Name', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'product_name_typography',
					'label' => esc_html__( 'Typography', 'nighty' ),
					'selector' => '{{WRAPPER}} .ova-product .list-product .info .product-title',
				]
			);

$this->add_control(
				'product_name_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .info .product-title a' => 'color: {{VALUE}}'
					],
				]
			);

$this->add_control(
				'product_name_hover_color',
				[
					'label' => esc_html__( 'Color Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .info .product-title:hover a' => 'color: {{VALUE}}'
					],
				]
			);

$this->add_control(
				'product_name_margin',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .info .product-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'product_name_padding',
				[
					'label' => esc_html__( 'Padding', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .info .product-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'price_style_section',
			[
				'label' => esc_html__( 'Price', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'price_typography',
					'label' => esc_html__( 'Typography', 'nighty' ),
					'selector' => '{{WRAPPER}} .ova-product .list-product .price',
				]
			);

$this->add_control(
				'price_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .price' => 'color: {{VALUE}}'
					],
				]
			);

$this->add_control(
				'price_hover_color',
				[
					'label' => esc_html__( 'Color Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .price:hover' => 'color: {{VALUE}}'
					],
				]
			);

$this->add_control(
				'price_margin',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .price' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'price_padding',
				[
					'label' => esc_html__( 'Padding', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'icon_style_section',
			[
				'label' => esc_html__( 'Icons', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'icon_size',
				[
					'label' => esc_html__( 'Size', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 30,
							'step' => 1,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon a i' => 'font-size: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'icon_bg_size',
				[
					'label' => esc_html__( 'Background Size', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 100,
							'step' => 1,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon a' => 'width: {{SIZE}}{{UNIT}};min-width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'icon_gap',
				[
					'label' => esc_html__( 'Gap', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 50,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 10,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon' => 'border-radius: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'icon_border_radius',
				[
					'label' => esc_html__( 'Border Radius', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 100,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon a' => 'border-radius: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'icon_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon a i' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'icon_background',
				[
					'label' => esc_html__( 'Background', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon a' => 'background: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'icon_background_hover',
				[
					'label' => esc_html__( 'Background Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-product .list-product .image .list-icon a:hover' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();
	}

// Render Template Here
	protected function render() {

$settings = $this->get_settings();

$columns 	= $settings['item_col_number'] ? sanitize_text_field( $settings['item_col_number'] ) : 3;
		$items  	= $settings['item_number']  ? sanitize_text_field( $settings['item_number'] ) 	: 3;
		$order_by 	= $settings['order_by'] 	? sanitize_text_field( $settings['order_by'] ) 		: 'date';
		$order 		= $settings['order'] 		? sanitize_text_field( $settings['order'] ) 		: 'DESC';

$category_include = $settings['category_include'] ? sanitize_text_field( $settings['category_include'] ) : 'all';
		$category_exclude = $settings['category_exclude'] ? sanitize_text_field( $settings['category_exclude'] ) : '' ;

if ( $order_by == 'price' ) {
			$order_by = 'meta_value_num';
		}

$args = array(
			'post_type'   => 'product',
			'post_status' => 'publish',
			'posts_per_page' => $items,
			'order'   => $order,
			'orderby' => $order_by,
			'field' => 'ids',
			'tax_query' => array(                    
				'relation' => 'AND',
				array(
					'taxonomy' => 'product_cat',
					'field' => 'slug',
					'terms' => $category_exclude,
					'include_children' => false,
					'operator' => 'NOT IN'
				),
				array(
	              'taxonomy'         => 'product_visibility',
	              'terms'            => array( 'exclude-from-catalog', 'exclude-from-search' ),
	              'field'            => 'name',
	              'operator'         => 'NOT IN',
	           ),
			),
		);

if ($category_include != 'all') {
			$tax_query = array(
				'taxonomy' => 'product_cat',                
				'field' => 'slug',                    
				'terms' => $category_include,    
				'include_children' => true,          
				'operator' => 'IN'                   
			);
			array_push($args['tax_query'], $tax_query );
		}

if ($order_by == 'meta_value_num') {
			$args['meta_key'] = '_price';
		}

$products = new WP_Query( $args );
		
	?>
		
		<div class="ova-product">

<ul class="list-product <?php echo 'col-'. $columns; ?>">
				<?php if ( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post();
					$feature_image   = wp_get_attachment_image_url(get_post_thumbnail_id() , 'shop_single' );
					if ( $feature_image == '') {
					    $feature_image  =  \Elementor\Utils::get_placeholder_image_src();
					}
					$_product = wc_get_product( get_the_ID() );
					$attachment_ids = $_product->get_gallery_image_ids();
					$data_gallery = [];

if ($attachment_ids) {

foreach ($attachment_ids as $image_id) {
							$gallery_url = wp_get_attachment_url( $image_id );
			                $gallery_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );

if ( !$gallery_alt ) {
			                    $gallery_alt = get_the_title( $image_id );
			                }

array_push( $data_gallery , array(
			                    'src'       => $gallery_url,
			                    'caption'   => $gallery_alt,
			                    'thumb'     => $gallery_url,
			                ));
						}

} else {

$image_id = get_post_thumbnail_id( get_the_ID() );
						$gallery_url = wp_get_attachment_url( $image_id );
						$gallery_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );

if ( !$gallery_alt ) {
		                    $gallery_alt = get_the_title( $image_id );
		                }

array_push( $data_gallery , array(
		                    'src'       => $gallery_url,
		                    'caption'   => $gallery_alt,
		                    'thumb'     => $gallery_url,
		                ));
					}

<img src="<?php echo esc_url( $feature_image ); ?>" alt="<?php the_title(); ?>" class="product-feature-image">

<ul class="list-icon">
								<li>
									<a href="javascript:void(0)" data-gallery="<?php echo esc_attr( json_encode( $data_gallery ) ); ?>" class="trigger-fancybox">
										<i class="fas fa-expand-arrows-alt"></i>
									</a>
								</li>

<?php $wishlist = do_shortcode('[yith_wcwl_add_to_wishlist]');
								 	if ( '[yith_wcwl_add_to_wishlist]' != $wishlist ): 
								?>
									<li class="product-wishlist">
										<?php echo do_shortcode('[yith_wcwl_add_to_wishlist]'); ?>
									</li>
								<?php endif; ?>
							</ul>

</div>

<div class="info">
							<h3 class="product-title">
								<a title="<?php the_title(); ?>" href="<?php echo esc_url( get_permalink() ); ?>">
									<?php the_title(); ?>
								</a>
							</h3>
							<p class="price">
								<?php printf( $_product->get_price_html() ) ; ?>
							</p>
						</div>

</li>

<?php endwhile; endif; wp_reset_postdata(); ?>
			</ul>

</div>

<?php
	}

}
$widgets_manager->register( new Nighty_Elementor_Product() );

🔐 Sid Gifari File Manager Pro