Elementor: product-thumb-left.php

<?php
namespace PixelPlus\Elementor\Widget;

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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

class Product_Thumb_Left extends Widget_Base {

	public function get_name() {
		return 'pixelplus-product-thumb-left';
	}

	public function get_title() {
		return __( 'Product Thumb Left', 'pixelplus' );
	}

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

	public function get_keywords() {
		return [ 'product' ];
	}

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

	protected function _register_controls() {
		$this->start_controls_section(
			'section_items',
			[
				'label' => __( 'Items', 'pixelplus' ),
			]
		);

		$categories = get_terms( array(
			'taxonomy'   => 'product_cat',
			'hide_empty' => false,
		) );

		$options = [];
		if ( $categories ) {
			$options = wp_list_pluck( $categories, 'name', 'term_id' );
		}

		$this->add_control(
			'term',
			[
				'label' => __( 'Categories', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => $options,
				'default' => [],
				'label_block' => true,
			]
		);

		$this->add_control(
			'number',
			[
				'label' => __( 'Posts Per Page', 'elementor-pro' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 5,
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		if ( ! class_exists( 'WooCommerce' ) ) {
			return;
		}

		$settings = $this->get_settings_for_display();

		$this->add_render_attribute( [
			'container' => [
				'class' => 'pixelplus-product-thumb-left',
			]
		] );

		$product_args = array(
			'post_type'           => 'product',
			'posts_per_page'      => $settings['number'],
			'ignore_sticky_posts' => 1,
		);

		if ( $settings['term'] ) {
			$product_args['tax_query'][] = array(
				'taxonomy' => 'product_cat',
				'terms'    => absint( $settings['term'] ),
			);
		}

		$products = new \WP_Query( $product_args );
		?>
		<?php if ( $products->have_posts() ) : ?>
		<div <?php echo $this->get_render_attribute_string( 'container' ); ?>>
			<?php while( $products->have_posts() ) : $products->the_post(); ?>
				<?php get_template_part( 'template-parts/content', 'product-thumb-left' ); ?>
			<?php endwhile; ?>
			<?php wp_reset_postdata(); ?>
		</div>
		<?php endif; ?>
		<?php
	}
}

// content-product-thumb-left
<?php
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true );
$sale_price     = get_post_meta( get_the_ID(), '_sale_price', true );

$percent = '';
if ( $regular_price && $sale_price && $regular_price > $sale_price ) {
	$percent = ceil( ( ($regular_price - $sale_price) / $regular_price ) * 100 ) . '%';
}

if ( $regular_price ) {
	$regular_price = number_format_i18n( $regular_price );
}
if ( $sale_price ) {
	$sale_price = number_format_i18n( $sale_price );
}
?>

<div class="product-item-thumb-left">
	<a href="<?php the_permalink(); ?>" class="product-item__thumb">
		<?php the_post_thumbnail( 'medium' ); ?>
    <div class="product-item__meta">
			<!-- <span class="product-item__meta--new">Hot</span> -->
			<?php if ( $percent ) : ?>
			<span class="product-item__meta--percent"><?php echo esc_html( $percent ); ?></span>
			<?php endif; ?>
		</div>
	</a>
	<div class="product-item__desc">
		<?php the_title( '<div class="product-item__title"><a href="' . get_permalink() . '">', '</a></div>' ); ?>
		<?php if ( $regular_price || $sale_price ) : ?>
		<div class="product-item__price">
			<?php if ( $sale_price ) : ?>
			<div class="product-item__price--sale">
				<?php echo esc_html( $sale_price ) . 'đ'; ?>
			</div>
			<?php endif; ?>
			<?php if ( $sale_price ) : ?>
			<div class="product-item__price--regular">
				<?php echo esc_html( $regular_price ) . 'đ'; ?>
			</div>
			<?php endif; ?>
		</div>
		<?php endif; ?>
	</div>
</div>


/* product-item-thumb-left */
.pixelplus-product-thumb-left {
	border: 1px solid #eee;
}

.product-item-thumb-left {
	display: grid;
	grid-template-columns: 30% auto;
	grid-column-gap: 10px;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

.product-item-thumb-left .product-item__meta--percent {
	margin-top: 0;
}

.pixelplus-support-container {
	border: 1px solid #ccc;
	padding: 10px;
}

.pixelplus-support-container .support-item {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: space-between;
}

.pixelplus-support-container .support-item:not(:last-child) {
	margin-bottom: 10px;
}

.support-item__icons {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 5px;
}

.support-item__icons a {
	width: 30px;
	height: 30px;
}

.product-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-view-all a {
    color: #fff;
    background: #ff5c00;
    padding: 10px 20px;
    margin-top: 20px;
    line-height: 1.2;
    border-radius: 18px;
    box-shadow: 0 3px 3px #ccc;
}