Elementor-Widget-WoocommerceGallery

Transform your WooCommerce product displays into stunning, conversion-driven galleries with this advanced Elementor widget! Designed to surpass the default WooCommerce and Elementor product grids, this plugin empowers you to create visually captivating product showcases with unmatched customization and style.

ight elementor-woocommerce-gallery.php PHP • 1.41 KB
widgets/ PHP • 5.83 KB
ewg-styles.css CSS • 1.53 KB

/**
 * Plugin Name: Elementor WooCommerce Gallery
 * Description: Galeria personalizada para WooCommerce com Elementor
 * Version: 1.0.0
 * Author: Seu Nome
 */

if (!defined('ABSPATH')) exit;

final class Elementor_WooCommerce_Gallery {

    private static $_instance = null;

    public static function instance() {
        if (is_null(self::$_instance)) {
            self::$_instance = new self();
        }
        return self::$_instance;
    }

    public function __construct() {
        add_action('plugins_loaded', [$this, 'init']);
    }

    public function init() {
        // Verifica se Elementor e WooCommerce estão ativos
        if (!did_action('elementor/loaded') || !function_exists('WC')) return;

        // Carrega os widgets
        add_action('elementor/widgets/register', [$this, 'register_widgets']);
        add_action('elementor/frontend/after_enqueue_styles', [$this, 'enqueue_styles']);
    }

    public function register_widgets($widgets_manager) {
        require_once(__DIR__ . '/widgets/woocommerce-gallery.php');
        $widgets_manager->register(new \Elementor_WooCommerce_Gallery_Widget());
    }

    public function enqueue_styles() {
        wp_enqueue_style(
            'ewg-styles',
            plugins_url('/assets/css/ewg-styles.css', __FILE__),
            [],
            '1.0.0'
        );
    }
}

Elementor_WooCommerce_Gallery::instance();

ight elementor-woocommerce-gallery.php

class Elementor_WooCommerce_Gallery_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'woocommerce-gallery';
    }

    public function get_title() {
        return __('Galeria WooCommerce Premium', 'elementor-woocommerce-gallery');
    }

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

    public function get_categories() {
        return ['woocommerce-elements'];
    }

    protected function register_controls() {
        // Seção de Conteúdo
        $this->start_controls_section(
            'content_section',
            [
                'label' => __('Configurações', 'elementor-woocommerce-gallery'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        // Controles para query de produtos
        $this->add_control(
            'products_query',
            [
                'label' => __('Query de Produtos', 'elementor-woocommerce-gallery'),
                'type' => \Elementor\Controls_Manager::SELECT2,
                'options' => $this->get_product_categories(),
                'multiple' => true,
                'label_block' => true,
            ]
        );

        // Adicione mais controles de query conforme necessário

        $this->end_controls_section();

        // Seção de Estilo
        $this->start_controls_section(
            'style_section',
            [
                'label' => __('Estilo', 'elementor-woocommerce-gallery'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        // Controle para cor do preço
        $this->add_control(
            'price_color',
            [
                'label' => __('Cor do Preço', 'elementor-woocommerce-gallery'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ewg-product-price' => 'color: {{VALUE}}',
                ],
            ]
        );

        // Controle para texto do botão
        $this->add_control(
            'button_text',
            [
                'label' => __('Texto do Botão', 'elementor-woocommerce-gallery'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __('Comprar Agora', 'elementor-woocommerce-gallery'),
            ]
        );

        // Controle para mostrar/ocultar botão
        $this->add_control(
            'show_button',
            [
                'label' => __('Mostrar Botão', 'elementor-woocommerce-gallery'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Sim', 'elementor-woocommerce-gallery'),
                'label_off' => __('Não', 'elementor-woocommerce-gallery'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        // Controle para posição do preço
        $this->add_control(
            'price_position',
            [
                'label' => __('Posição do Preço', 'elementor-woocommerce-gallery'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    'above' => __('Acima do Título', 'elementor-woocommerce-gallery'),
                    'below' => __('Abaixo do Título', 'elementor-woocommerce-gallery'),
                ],
                'default' => 'below',
            ]
        );

        // Adicione mais controles de estilo...

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $args = [
            'post_type' => 'product',
            'posts_per_page' => -1,
            // Adicione mais parâmetros de query conforme necessário
        ];

        $products = new \WP_Query($args);

        if ($products->have_posts()) {
            echo '<div class="ewg-grid">';
            
            while ($products->have_posts()) {
                $products->the_post();
                global $product;
                
                echo '<div class="ewg-product">';
                echo '<div class="ewg-product-inner">';
                
                // Imagem do produto
                echo '<div class="ewg-product-image">';
                echo woocommerce_get_product_thumbnail('large');
                echo '</div>';
                
                // Posição do preço
                if ($settings['price_position'] === 'above') {
                    echo '<div class="ewg-product-price">' . $product->get_price_html() . '</div>';
                }
                
                // Título do produto
                echo '<h3 class="ewg-product-title">' . get_the_title() . '</h3>';
                
                // Posição do preço
                if ($settings['price_position'] === 'below') {
                    echo '<div class="ewg-product-price">' . $product->get_price_html() . '</div>';
                }
                
                // Botão
                if ($settings['show_button'] === 'yes') {
                    echo '<a href="' . $product->add_to_cart_url() . '" class="ewg-product-button">';
                    echo esc_html($settings['button_text']);
                    echo '</a>';
                }
                
                echo '</div></div>';
            }
            
            echo '</div>';
            wp_reset_postdata();
        }
    }

    private function get_product_categories() {
        // Função para obter categorias de produtos
        $categories = get_terms('product_cat');
        $options = [];
        
        foreach ($categories as $category) {
            $options[$category->slug] = $category->name;
        }
        
        return $options;
    }
}

widgets/

.ewg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
}

.ewg-product {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.ewg-product:hover {
    transform: translateY(-5px);
}

.ewg-product-image {
    overflow: hidden;
    position: relative;
    padding-top: 100%;
}

.ewg-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ewg-product:hover .ewg-product-image img {
    transform: scale(1.05);
}

.ewg-product-inner {
    position: relative;
    background: #fff;
    padding: 20px;
    text-align: center;
}

.ewg-product-title {
    margin: 15px 0;
    font-size: 1.2em;
    color: #333;
}

.ewg-product-price {
    font-size: 1.4em;
    font-weight: 700;
    margin: 10px 0;
}

.ewg-product-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007bff;
    color: #fff !important;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.ewg-product-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,123,255,0.3);
}

@media (max-width: 768px) {
    .ewg-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

ewg-styles.css