This part connects the widget to WooCommerce products. We’ll query products, display their images and prices, and build a basic grid layout.

# Learning Objectives

By the end of this tutorial, you will:

• Query WooCommerce products using WP_Query
• Build query arguments based on widget settings
• Access product data using WooCommerce API
• Display product titles, prices, and images
• Work with product taxonomies
• Create a basic product grid layout
• Handle products with no results

# Step 1: Understanding WP_Query for Products

WooCommerce products are a custom post type called product. We use WordPress’s WP_Query to retrieve them.

# Basic Product Query Structure

$args = [
    'post_type' => 'product',
    'posts_per_page' => 9,
    'post_status' => 'publish',
];

$query = new WP_Query( $args );

# Common Query Parameters

• post_type: Must be ‘product’ for WooCommerce products
• posts_per_page: Number of products to retrieve
• orderby: How to sort (date, title, price, etc.)
• order: ASC or DESC
• tax_query: Filter by categories, tags, or attributes
• post_status: Usually ‘publish’ for public products

# Step 2: Update the render() Method

Replace the placeholder render() method in collection-products-widget.php with a proper product query:

<?php
protected function render() {
    $settings = $this->get_settings_for_display();

    // Build query arguments
    $args = [
        'post_type' => 'product',
        'posts_per_page' => $settings['products_per_page'],
        'orderby' => $settings['orderby'],
        'order' => $settings['order'],
        'post_status' => 'publish',
    ];

    // Add category filter if specified
    if ( ! empty( $settings['category'] ) ) {
        $args['tax_query'] = [
            [
                'taxonomy' => 'product_cat',
                'field' => 'term_id',
                'terms' => $settings['category'],
            ],
        ];
    }

    // Execute query
    $query = new WP_Query( $args );

    // Check if products found
    if ( $query->have_posts() ) {
        ?>
        <div class="collection-products-wrapper">
            <div class="collection-products-grid">
                <?php
                while ( $query->have_posts() ) {
                    $query->the_post();
                    global $product;

                    // We'll add product display code here
                    ?>
                    <div class="collection-product-item">
                        <h3><?php the_title(); ?></h3>
                    </div>
                    <?php
                }
                ?>
            </div>
        </div>
        <?php
        wp_reset_postdata();
    } else {
        echo '<p>' . __( 'No products found.', 'hello-biz-child' ) . '</p>';
    }
}

Code Explanation:

• Build Arguments: Create array based on widget settings
• Tax Query: Filter by categories if user selected any
• WP_Query: Execute the query
• The Loop: Iterate through results with have_posts() and the_post()
• global $product: Access WooCommerce product object
• wp_reset_postdata(): Reset query data after loop (important!)

# Step 3: Accessing Product Data

WooCommerce provides rich product data through the $product object. Let’s explore common methods:

# Common Product Methods

global $product;

// Basic info
$product->get_id();                    // Product ID
$product->get_name();                  // Product name
$product->get_title();                 // Product title
$product->get_permalink();             // Product URL

// Pricing
$product->get_price();                 // Current price
$product->get_regular_price();         // Regular price
$product->get_sale_price();            // Sale price
$product->get_price_html();            // Formatted price HTML

// Images
$product->get_image();                 // Featured image HTML
$product->get_image_id();              // Featured image ID
get_the_post_thumbnail_url( $id );     // Image URL

// Product types
$product->is_type( 'simple' );         // Is simple product
$product->is_type( 'variable' );       // Is variable product
$product->is_on_sale();                // Is on sale

// Variations
$product->get_variation_attributes();  // For variable products

# Step 4: Display Product Information

Update the product loop to display complete product information:

<?php
while ( $query->have_posts() ) {
    $query->the_post();
    global $product;

    $product_id = get_the_ID();
    ?>
    <div class="collection-product-item">
        <a href="<?php echo esc_url( get_permalink() ); ?>" class="collection-product-link">
            <div class="collection-product-image">
                <?php
                $image_url = get_the_post_thumbnail_url( $product_id, 'full' );
                if ( $image_url ) :
                ?>
                    <img src="<?php echo esc_url( $image_url ); ?>"
                         alt="<?php echo esc_attr( get_the_title() ); ?>">
                <?php endif; ?>
            </div>
        </a>
        
        <div class="collection-product-info">
            <div class="collection-product-info-left">
                <h3 class="collection-product-title">
                    <a href="<?php echo esc_url( get_permalink() ); ?>">
                        <?php the_title(); ?>
                    </a>
                </h3>
            </div>
            
            <div class="collection-product-price">
                <?php echo $product->get_price_html(); ?>
            </div>
        </div>
    </div>
    <?php
}

Code Explanation:

• Product Link: Wraps image in link to product page
• Product Image: Displays featured image
• esc_url(): Sanitizes URLs
• esc_attr(): Sanitizes attributes
• get_price_html(): Displays formatted price with currency

# Step 5: Add Basic Grid CSS

Create wp-content/themes/hello-biz-child/css/collection.css:

/* Collection Products Grid */
.collection-products-wrapper {
    width: 100%;
    max-width: 100%;
}

.collection-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}

.collection-product-item {
    position: relative;
}

.collection-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.collection-product-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Square aspect ratio */
    overflow: hidden;
    background: #f5f5f5;
}

.collection-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-product-info {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.collection-product-info-left {
    flex: 1;
}

.collection-product-title {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.collection-product-title a {
    color: #333;
    text-decoration: none;
}

.collection-product-title a:hover {
    color: #000;
}

.collection-product-price {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .collection-products-grid {
        grid-template-columns: 1fr;
    }
}

# Step 6: Enqueue the CSS File

Add this function to collection-products-register.php:

/**
 * Load widget styles.
 *
 * @return void
 */
function collection_products_widget_styles() {
    wp_enqueue_style(
        'collection-products-widget-style',
        get_stylesheet_directory_uri() . '/css/collection.css',
        [],
        HELLO_BIZ_CHILD_VERSION
    );
}
add_action( 'wp_enqueue_scripts', 'collection_products_widget_styles', 20 );

# Step 7: Test Product Display

1. Edit your test page in Elementor
2. The widget should now display products in a grid
3. Try different settings:
   • Change products per page
   • Change order by
   • Select specific categories
4. View the page on the frontend to see the live result

WooCommerce products displayed in the admin

# Step 8: Handle Special Cases

# Handle Products Without Images

Update the image display code:

<div class="collection-product-image">
    <?php
    $image_url = get_the_post_thumbnail_url( $product_id, 'full' );
    if ( $image_url ) :
    ?>
        <img src="<?php echo esc_url( $image_url ); ?>"
             alt="<?php echo esc_attr( get_the_title() ); ?>">
    <?php else : ?>
        <div class="no-image-placeholder">
            <span><?php _e( 'No Image', 'hello-biz-child' ); ?></span>
        </div>
    <?php endif; ?>
</div>

Add to CSS:

.no-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #999;
}

# Handle Variable Products

Check if product is variable and show starting price:

<div class="collection-product-price">
    <?php
    if ( $product->is_type( 'variable' ) ) {
        echo __( 'From ', 'hello-biz-child' );
    }
    echo $product->get_price_html();
    ?>
</div>

# Complete render() Method

Here’s the complete render() method with all improvements:

<?php
protected function render() {
    $settings = $this->get_settings_for_display();

    $args = [
        'post_type' => 'product',
        'posts_per_page' => $settings['products_per_page'],
        'orderby' => $settings['orderby'],
        'order' => $settings['order'],
        'post_status' => 'publish',
    ];

    // Add category filter
    if ( ! empty( $settings['category'] ) ) {
        $args['tax_query'] = [
            [
                'taxonomy' => 'product_cat',
                'field' => 'term_id',
                'terms' => $settings['category'],
            ],
        ];
    }

    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        ?>
        <div class="collection-products-wrapper">
            <div class="collection-products-grid">
                <?php
                while ( $query->have_posts() ) {
                    $query->the_post();
                    global $product;

                    $product_id = get_the_ID();
                    ?>
                    <div class="collection-product-item">
                        <a href="<?php echo esc_url( get_permalink() ); ?>" class="collection-product-link">
                            <div class="collection-product-image">
                                <?php
                                $image_url = get_the_post_thumbnail_url( $product_id, 'full' );
                                if ( $image_url ) :
                                ?>
                                    <img src="<?php echo esc_url( $image_url ); ?>"
                                         alt="<?php echo esc_attr( get_the_title() ); ?>">
                                <?php else : ?>
                                    <div class="no-image-placeholder">
                                        <span><?php _e( 'No Image', 'hello-biz-child' ); ?></span>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </a>
                        
                        <div class="collection-product-info">
                            <div class="collection-product-info-left">
                                <h3 class="collection-product-title">
                                    <a href="<?php echo esc_url( get_permalink() ); ?>">
                                        <?php the_title(); ?>
                                    </a>
                                </h3>
                            </div>
                            
                            <div class="collection-product-price">
                                <?php echo $product->get_price_html(); ?>
                            </div>
                        </div>
                    </div>
                    <?php
                }
                ?>
            </div>
        </div>
        <?php
        wp_reset_postdata();
    } else {
        echo '<p>' . __( 'No products found.', 'hello-biz-child' ) . '</p>';
    }
}

# Common Issues and Solutions

# Issue 1: Products Not Showing

Solutions:

• Verify you have published products in WooCommerce
• Check that product visibility is set to “Catalog and search”
• Ensure products are in the selected categories
• Check post_status is ‘publish’

# Issue 2: Wrong Products Showing

Solutions:

• Verify orderby and order settings
• Check category filter is working correctly
• Ensure no other plugins are filtering the query

# Issue 3: Images Not Displaying

Solutions:

• Verify products have featured images set
• Check image URLs in browser console
• Ensure file permissions are correct
• Try regenerating thumbnails

# Issue 4: Prices Not Showing Correctly

Solutions:

• Ensure WooCommerce currency settings are configured
• Verify products have prices set
• Check for theme conflicts with price display

# Summary

You’ve successfully integrated WooCommerce products into your widget:

• Query products with WP_Query
• Access product data via WooCommerce API
• Display product images, titles, and prices
• Handle products without images
• Create responsive grid layout
• Added basic styling

# What’s Next?

In Part 5: Implementing Custom Product Meta Fields, we’ll:

• Add custom collection image field to products
• Integrate WordPress media library uploader
• Add product orientation field
• Save and retrieve custom meta data
• Update frontend to display custom images

Previous: ← Part 3: Building the Basic Widget Structure
Next: Part 5: Implementing Custom Product Meta Fields →

We’ll now create the Collection Products widget files, add its controls and register it with Elementor.

# Learning Objectives

By the end of this tutorial, you will:

• Create the widget PHP files in the correct structure
• Implement a complete widget class with all required methods
• Register the widget with Elementor
• Add basic query controls (products per page, order, category)
• Add display controls (show/hide filters and sorting)
• Test the widget in the Elementor editor
• Understand how to organize widget files

# Step 1: Create Widget Files

We’ll create two PHP files to keep our code organized:

1. collection-products-widget.php – The main widget class
2. collection-products-register.php – Registration and helper functions

# 1.1 Create the Widget Class File

Create a new file at wp-content/themes/hello-biz-child/widgets/collection-products/collection-products-widget.php:

<?php
/**
 * Collection Products Widget for Elementor
 */

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

class Collection_Products_Widget extends \Elementor\Widget_Base {

    /**
     * Get widget name.
     *
     * @return string Widget name.
     */
    public function get_name() {
        return 'collection_products';
    }

    /**
     * Get widget title.
     *
     * @return string Widget title.
     */
    public function get_title() {
        return __( 'Collection Products', 'hello-biz-child' );
    }

    /**
     * Get widget icon.
     *
     * @return string Widget icon.
     */
    public function get_icon() {
        return 'eicon-products';
    }

    /**
     * Get widget categories.
     *
     * @return array Widget categories.
     */
    public function get_categories() {
        return [ 'woocommerce-elements' ];
    }

    /**
     * Get widget keywords.
     *
     * @return array Widget keywords.
     */
    public function get_keywords() {
        return [ 'woocommerce', 'shop', 'store', 'products', 'collection' ];
    }

    /**
     * Register widget controls.
     */
    protected function register_controls() {
        // We'll add controls in the next steps
    }

    /**
     * Render widget output on the frontend.
     */
    protected function render() {
        echo '<div class="collection-products-wrapper">';
        echo '<p>' . __( 'Collection Products Widget - Coming Soon!', 'hello-biz-child' ) . '</p>';
        echo '</div>';
    }
}

Code Explanation:

• Security Check: if ( ! defined( 'ABSPATH' ) ) prevents direct file access
• Class Declaration: Extends \Elementor\Widget_Base
• get_name(): Returns unique identifier collection_products
• get_title(): Returns display name for the widget panel
• get_icon(): Uses Elementor’s products icon
• get_categories(): Places widget in WooCommerce elements category
• get_keywords(): Helps users find the widget via search
• register_controls(): Empty for now, we’ll add controls next
• render(): Simple placeholder output

# Step 2: Create Registration File

Create wp-content/themes/hello-biz-child/widgets/collection-products/collection-products-register.php:

<?php
/**
 * Register Elementor Collection Products Widget
 */

/**
 * Register the widget with Elementor.
 *
 * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
 * @return void
 */
function register_collection_product_widget( $widgets_manager ) {
    require_once( __DIR__ . '/collection-products-widget.php' );
    $widgets_manager->register( new \Collection_Products_Widget() );
}
add_action( 'elementor/widgets/register', 'register_collection_product_widget' );

Code Explanation:

• Function: register_collection_product_widget() handles registration
• require_once: Loads the widget class file
• register(): Registers a new instance of our widget
• Hook: elementor/widgets/register is fired when Elementor loads widgets

# Step 3: Include Registration File in functions.php

Open wp-content/themes/hello-biz-child/functions.php and add at the bottom:

// Include collection products widget registration
require_once get_stylesheet_directory() . '/widgets/collection-products/collection-products-register.php';

Complete functions.php should now look like:

<?php
/**
 * Theme functions and definitions.
 *
 * @package HelloBizChild
 */

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

define( 'HELLO_BIZ_CHILD_VERSION', '1.0.0' );

/**
 * Load child theme scripts & styles.
 *
 * @return void
 */
function hello_biz_child_scripts_styles() {

	wp_enqueue_style(
		'hello-biz-child-style',
		get_stylesheet_directory_uri() . '/style.css',
		[
			'theme',
		],
		HELLO_BIZ_CHILD_VERSION
	);
}

add_action( 'wp_enqueue_scripts', 'hello_biz_child_scripts_styles', 20 );

// Include collection products widget registration
require_once get_stylesheet_directory() . '/widgets/collection-products/collection-products-register.php';

# Step 4: Test Basic Widget

Before adding more features, let’s test that the widget loads correctly.

# 4.1 Clear Cache

1. Clear any WordPress caching plugins
2. Clear browser cache
3. If using object caching, flush it

# 4.2 Test in Elementor

1. Go to Pages → Add New
2. Give the page a title (e.g., “Widget Test”)
3. Click Edit with Elementor
4. In the left panel, search for “Collection Products”
5. Drag the widget onto the page
6. You should see “Collection Products Widget – Coming Soon!”

Collection Products widget in the Elementor editor

Troubleshooting:

If the widget doesn’t appear:

• Check for PHP errors (enable WP_DEBUG in wp-config.php)
• Verify file paths are correct
• Ensure WooCommerce is active
• Check that all files are saved properly

# Step 5: Add Query Controls

Now let’s add controls to configure product queries. Update the register_controls() method in collection-products-widget.php:

protected function register_controls() {

    // Query Section
    $this->start_controls_section(
        'section_query',
        [
            'label' => __( 'Query', 'hello-biz-child' ),
        ]
    );

    $this->add_control(
        'products_per_page',
        [
            'label' => __( 'Products Per Page', 'hello-biz-child' ),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'default' => 9,
            'min' => 3,
            'step' => 3,
            'description' => __( 'Number of products to display', 'hello-biz-child' ),
        ]
    );

    $this->add_control(
        'orderby',
        [
            'label' => __( 'Order By', 'hello-biz-child' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'default' => 'date',
            'options' => [
                'date' => __( 'Date', 'hello-biz-child' ),
                'title' => __( 'Title', 'hello-biz-child' ),
                'price' => __( 'Price', 'hello-biz-child' ),
                'popularity' => __( 'Popularity', 'hello-biz-child' ),
                'rating' => __( 'Rating', 'hello-biz-child' ),
                'rand' => __( 'Random', 'hello-biz-child' ),
                'menu_order' => __( 'Menu Order', 'hello-biz-child' ),
            ],
        ]
    );

    $this->add_control(
        'order',
        [
            'label' => __( 'Order', 'hello-biz-child' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'default' => 'DESC',
            'options' => [
                'DESC' => __( 'Descending', 'hello-biz-child' ),
                'ASC' => __( 'Ascending', 'hello-biz-child' ),
            ],
        ]
    );

    $this->add_control(
        'category',
        [
            'label' => __( 'Category', 'hello-biz-child' ),
            'type' => \Elementor\Controls_Manager::SELECT2,
            'multiple' => true,
            'options' => $this->get_product_categories(),
            'label_block' => true,
            'description' => __( 'Select categories to filter products', 'hello-biz-child' ),
        ]
    );

    $this->add_control(
        'show_filters',
        [
            'label' => __( 'Show Filters', 'hello-biz-child' ),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => __( 'Yes', 'hello-biz-child' ),
            'label_off' => __( 'No', 'hello-biz-child' ),
            'return_value' => 'yes',
            'default' => 'yes',
        ]
    );

    $this->add_control(
        'show_sorting',
        [
            'label' => __( 'Show Sorting', 'hello-biz-child' ),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => __( 'Yes', 'hello-biz-child' ),
            'label_off' => __( 'No', 'hello-biz-child' ),
            'return_value' => 'yes',
            'default' => 'yes',
        ]
    );

    $this->end_controls_section();
}

Code Explanation:

• Products Per Page: Number control with default of 9, minimum 3, step of 3
• Order By: Dropdown with common sorting options
• Order: ASC or DESC
• Category: Multi-select dropdown of product categories
• Show Filters: Toggle to show/hide filter panel
• Show Sorting: Toggle to show/hide sorting dropdown

# Step 6: Add Helper Method for Categories

Add this helper method to the widget class (before or after register_controls()):

/**
 * Get product categories for control options.
 *
 * @return array Categories array.
 */
protected function get_product_categories() {
    $categories = get_terms( 'product_cat', [
        'hide_empty' => false,
    ] );

    $options = [];
    
    if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) {
        foreach ( $categories as $category ) {
            $options[ $category->term_id ] = $category->name;
        }
    }

    return $options;
}

Code Explanation:

• get_terms(): Retrieves WooCommerce product categories
• hide_empty => false: Include categories with no products
• Returns: Array formatted for SELECT2 control

# Step 7: Add Style Controls

After the query section, add a style section:

// Style Section
$this->start_controls_section(
    'section_style',
    [
        'label' => __( 'Style', 'hello-biz-child' ),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_control(
    'gap',
    [
        'label' => __( 'Gap', 'hello-biz-child' ),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => [ 'px' ],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
                'step' => 1,
            ],
        ],
        'default' => [
            'unit' => 'px',
            'size' => 10,
        ],
        'selectors' => [
            '{{WRAPPER}} .collection-products-grid' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

Code Explanation:

• TAB_STYLE: Places this section in the Style tab
• SLIDER: Creates a range slider control
• selectors: Automatically applies CSS when slider changes
• {{WRAPPER}}: Replaced with unique widget selector
• {{SIZE}}{{UNIT}}: Replaced with selected value (e.g., “10px”)

# Step 8: Update Render Method

Update the render() method to display settings:

protected function render() {
    $settings = $this->get_settings_for_display();
    ?>
    <div class="collection-products-wrapper">
        <h3>Collection Products Widget</h3>
        <p><strong>Settings:</strong></p>
        <ul>
            <li>Products per page: <?php echo esc_html( $settings['products_per_page'] ); ?></li>
            <li>Order by: <?php echo esc_html( $settings['orderby'] ); ?></li>
            <li>Order: <?php echo esc_html( $settings['order'] ); ?></li>
            <li>Show filters: <?php echo esc_html( $settings['show_filters'] ); ?></li>
            <li>Show sorting: <?php echo esc_html( $settings['show_sorting'] ); ?></li>
        </ul>
    </div>
    <?php
}

This temporary render method helps us verify that settings are working correctly.

# Step 9: Test the Controls

1. Refresh your Elementor editor page (or edit a new page)
2. Add/re-add the Collection Products widget
3. In the left panel, you should see:
   • Content tab with Query section
   • Style tab with Style section
4. Try changing values:
   • Set “Products Per Page” to 12
   • Change “Order By” to “Price”
   • Toggle “Show Filters” off and on
5. Verify the values appear in the preview

# Complete Widget Code So Far

Here’s what your collection-products-widget.php should look like at this point:

<?php
/**
 * Collection Products Widget for Elementor
 */

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

class Collection_Products_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return __( 'Collection Products', 'hello-biz-child' );
    }

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

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

    public function get_keywords() {
        return [ 'woocommerce', 'shop', 'store', 'products', 'collection' ];
    }

    protected function register_controls() {

        $this->start_controls_section(
            'section_query',
            [
                'label' => __( 'Query', 'hello-biz-child' ),
            ]
        );

        $this->add_control(
            'products_per_page',
            [
                'label' => __( 'Products Per Page', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 9,
                'min' => 3,
                'step' => 3,
            ]
        );

        $this->add_control(
            'orderby',
            [
                'label' => __( 'Order By', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'date',
                'options' => [
                    'date' => __( 'Date', 'hello-biz-child' ),
                    'title' => __( 'Title', 'hello-biz-child' ),
                    'price' => __( 'Price', 'hello-biz-child' ),
                    'popularity' => __( 'Popularity', 'hello-biz-child' ),
                    'rating' => __( 'Rating', 'hello-biz-child' ),
                    'rand' => __( 'Random', 'hello-biz-child' ),
                    'menu_order' => __( 'Menu Order', 'hello-biz-child' ),
                ],
            ]
        );

        $this->add_control(
            'order',
            [
                'label' => __( 'Order', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'DESC',
                'options' => [
                    'DESC' => __( 'Descending', 'hello-biz-child' ),
                    'ASC' => __( 'Ascending', 'hello-biz-child' ),
                ],
            ]
        );

        $this->add_control(
            'category',
            [
                'label' => __( 'Category', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::SELECT2,
                'multiple' => true,
                'options' => $this->get_product_categories(),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'show_filters',
            [
                'label' => __( 'Show Filters', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'hello-biz-child' ),
                'label_off' => __( 'No', 'hello-biz-child' ),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'show_sorting',
            [
                'label' => __( 'Show Sorting', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __( 'Yes', 'hello-biz-child' ),
                'label_off' => __( 'No', 'hello-biz-child' ),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->end_controls_section();

        // Style Section
        $this->start_controls_section(
            'section_style',
            [
                'label' => __( 'Style', 'hello-biz-child' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'gap',
            [
                'label' => __( 'Gap', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'selectors' => [
                    '{{WRAPPER}} .collection-products-grid' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function get_product_categories() {
        $categories = get_terms( 'product_cat', [
            'hide_empty' => false,
        ] );

        $options = [];
        foreach ( $categories as $category ) {
            $options[ $category->term_id ] = $category->name;
        }

        return $options;
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="collection-products-wrapper">
            <h3>Collection Products Widget</h3>
            <p>Settings:</p>
            <ul>
                <li>Products per page: <?php echo esc_html( $settings['products_per_page'] ); ?></li>
                <li>Order by: <?php echo esc_html( $settings['orderby'] ); ?></li>
                <li>Order: <?php echo esc_html( $settings['order'] ); ?></li>
                <li>Show filters: <?php echo esc_html( $settings['show_filters'] ); ?></li>
                <li>Show sorting: <?php echo esc_html( $settings['show_sorting'] ); ?></li>
            </ul>
        </div>
        <?php
    }
}

# Common Issues and Solutions

# Issue 1: Widget Not Appearing in Panel

Solutions:

• Verify get_categories() returns a valid category
• Check that WooCommerce is active (required for ‘woocommerce-elements’ category)
• Clear Elementor cache: Elementor → Tools → Regenerate CSS
• Check PHP error logs

# Issue 2: Controls Not Showing

Solutions:

• Verify register_controls() is called correctly
• Check for PHP syntax errors
• Ensure start_controls_section() is matched with end_controls_section()
• Verify control IDs are unique

# Issue 3: Category Dropdown Empty

Solutions:

• Create some product categories in WooCommerce
• Check get_product_categories() method
• Verify WooCommerce is installed and active

# Issue 4: Settings Not Updating in Preview

Solutions:

• Refresh the Elementor editor
• Check browser console for JavaScript errors
• Verify get_settings_for_display() is used in render()

# Summary

The Collection Products widget now includes:

• Created widget class file
• Created registration file
• Registered widget with Elementor
• Added query controls
• Added style controls
• Tested widget in Elementor editor

Check that the widget appears in Elementor and that its settings update the preview.

# What’s Next?

In Part 4: WooCommerce Product Integration, we’ll:

• Query WooCommerce products using WP_Query
• Access and display product data
• Work with product categories and taxonomies
• Display product prices and images
• Handle product variations
• Create the initial product grid layout

Previous: ← Part 2: Understanding Elementor Widget Architecture
Next: Part 4: WooCommerce Product Integration →

This part explains the Elementor widget base class, required methods and lifecycle. We’ll use these concepts to build the Collection Products widget in the next part.

# Learning Objectives

By the end of this tutorial, you will understand:

• • The structure of an Elementor widget class
  • Required methods and their purposes
  • How widgets are registered with Elementor

• The widget lifecycle from registration to rendering
• Widget controls and how they create the settings panel
• How widgets render content on the frontend
• Best practices for widget development

# The Elementor Widget Base Class

All Elementor widgets extend the \Elementor\Widget_Base abstract class. This base class provides the foundation and structure that Elementor expects from every widget.

# Key Concept: Object-Oriented Programming

Elementor uses Object-Oriented Programming (OOP) principles. Your widget is a PHP class that extends (inherits from) the base widget class.

    class My_Custom_Widget extends \Elementor\Widget_Base {
      // Your widget code here
    }

# Required Methods

Every Elementor widget must implement certain methods. Let’s examine each one:

# 1. get_name()

Purpose: Returns a unique identifier for your widget.

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

Important Points:

• Must be unique across all widgets
• Use lowercase letters, numbers, and underscores only
• No spaces or special characters
• This name is used internally by Elementor

# 2. get_title()

Purpose: Returns the human-readable title shown in the widget panel.

  public function get_title() {
    return __( 'Collection Products', 'hello-biz-child' );
  }

Important Points:

• This is what users see in the Elementor editor
• Use __() for translation support
• Keep it clear and descriptive

# 3. get_icon()

Purpose: Returns the icon class that appears next to the widget name.

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

Important Points:

• Uses Elementor’s icon library
• Format: eicon-{icon-name}
• Browse available icons in Elementor’s icon library
• Common icons: eicon-posts-grid, eicon-products, eicon-gallery-grid

# 4. get_categories()

Purpose: Defines which category panel the widget appears in.

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

Available Categories:

• basic – Basic widgets
• general – General elements
• woocommerce-elements – WooCommerce widgets (we’ll use this)
• theme-elements – Theme-specific widgets
• You can also create custom categories

# 5. register_controls() (Optional but Essential)

Purpose: Defines the widget’s settings panel in the Elementor editor.

  protected function register_controls() {
    // Define control sections and controls here
  }

Important Points:

• This method is protected (not public)
• Controls are settings users can modify in the Elementor panel
• Controls are organized into sections
• This is where you define all user-configurable options

# 6. render()

Purpose: Outputs the HTML for the frontend display.

  protected function render() {
    $settings = $this->get_settings_for_display();

    // Output your HTML here
    echo '

‘; }

Important Points:

• This method is protected
• Use $this->get_settings_for_display() to access user settings
• Output sanitized HTML
• This code runs on the frontend when the page loads

# Widget Lifecycle

Understanding when methods are called helps you structure your code effectively:

1. Widget Registration
   • WordPress loads
   • Elementor initializes
   • Your widget class is registered via elementor/widgets/register hook
2. Editor Load
   • User opens Elementor editor
   • get_name(), get_title(), get_icon(), get_categories() are called
   • Widget appears in the panel
3. Widget Inserted
   • User drags widget onto page
   • register_controls() is called
   • Control panel appears in the editor
4. Settings Changed
   • User modifies controls
   • Widget preview updates in editor
   • render() is called for preview
5. Page Saved
   • Settings are saved to the database
   • Widget configuration is stored
6. Frontend Display
   • Visitor loads the page
   • render() is called
   • HTML is output to the page

# Understanding Controls

Controls are the building blocks of your widget’s settings panel. Let’s break down how they work:

# Control Sections

Controls are organized into sections. A section is a collapsible panel in the editor.

  protected function register_controls() {
    // Start a new section
    $this->start_controls_section(
      'section_content', // Section ID (must be unique within widget)
      [
        'label' => __( 'Content', 'hello-biz-child' ), // Section title
      ]
    );

    // Add controls here

    // End the section
    $this->end_controls_section();
  }

# Adding Controls

Between start_controls_section() and end_controls_section(), you add individual controls:

  $this->add_control(
    'products_per_page', // Control ID (must be unique within widget)
    [
      'label' => __( 'Products Per Page', 'hello-biz-child' ),
      'type' => \Elementor\Controls_Manager::NUMBER,
      'default' => 9,
      'min' => 3,
    ]
  );

# Common Control Types

NUMBER – Numeric input

'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 9,
'min' => 1,
'max' => 100,
'step' => 3,

SELECT – Dropdown menu

'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'date',
'options' => [
    'date' => __( 'Date', 'hello-biz-child' ),
    'title' => __( 'Title', 'hello-biz-child' ),
    'price' => __( 'Price', 'hello-biz-child' ),
],

SELECT2 – Multi-select dropdown

'type' => \Elementor\Controls_Manager::SELECT2,
'multiple' => true,
'options' => $this->get_categories(),
'label_block' => true,

SWITCHER – Toggle switch (yes/no)

'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'hello-biz-child' ),
'label_off' => __( 'No', 'hello-biz-child' ),
'return_value' => 'yes',
'default' => 'yes',

SLIDER – Range slider

'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [
    'px' => [
        'min' => 0,
        'max' => 50,
        'step' => 1,
    ],
],
'default' => [
    'unit' => 'px',
    'size' => 10,
],

TEXT – Text input

'type' => \Elementor\Controls_Manager::TEXT,
'default' => __( 'Default text', 'hello-biz-child' ),
'placeholder' => __( 'Enter text', 'hello-biz-child' ),

# Style Controls

For styling options, use the TAB_STYLE tab:

  $this->start_controls_section(
    'section_style',
    [
      'label' => __( 'Style', 'hello-biz-child' ),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE, // Style tab
    ]
  );

# Using Selectors

Selectors allow controls to directly affect CSS:

$this->add_control(
  'gap',
  [
    'label' => __( 'Gap', 'hello-biz-child' ),
    'type' => \Elementor\Controls_Manager::SLIDER,
    'selectors' => [
      '{{WRAPPER}} .my-grid' => 'gap: {{SIZE}}{{UNIT}};',
    ],
  ]
);

Key Points:

• {{WRAPPER}} is replaced with the widget’s unique wrapper selector
• {{SIZE}} is replaced with the slider value
• {{UNIT}} is replaced with the selected unit (px, %, em, etc.)

# Accessing Settings in render()

To use the settings in your widget:

  protected function render() {
      // Get settings
      $settings = $this->get_settings_for_display();
      
      // Access individual settings
      $products_per_page = $settings['products_per_page'];
      $orderby = $settings['orderby'];
      $show_filters = $settings['show_filters'];
      
      // Use in your code
      if ( $show_filters === 'yes' ) {
          // Display filters
      }
  }

# Widget Registration

To make your widget available in Elementor, you must register it:

function register_my_widget( $widgets_manager ) {
    require_once( __DIR__ . '/my-widget.php' );
    $widgets_manager->register( new \My_Custom_Widget() );
}
add_action( 'elementor/widgets/register', 'register_my_widget' );

Important Points:

• Hook into elementor/widgets/register
• Require/include your widget file
• Instantiate and register your widget class

# Best Practices

# 1. Namespace Your Widget

Avoid naming conflicts by using a unique class name:

// Good
class Collection_Products_Widget extends \Elementor\Widget_Base {

// Better (with namespace)
namespace MyTheme\Widgets;
class Collection_Products extends \Elementor\Widget_Base {

# 2. Translation Ready

Always use translation functions:

// Good
'label' => __( 'Products Per Page', 'hello-biz-child' ),

// Bad
'label' => 'Products Per Page',

# 3. Sanitize Output

Always escape output in render():

// Good
echo '<div class="' . esc_attr( $class ) . '">';
echo esc_html( $title );

// Bad
echo '<div class="' . $class . '">';
echo $title;

# 4. Organize Controls

Group related controls into sections:

// Query settings section
$this->start_controls_section( 'section_query', [...] );

// Display settings section
$this->start_controls_section( 'section_display', [...] );

// Style settings section  
$this->start_controls_section( 'section_style', [...] );

# 5. Provide Defaults

Always provide sensible default values:

'default' => 9,  // Good default for products per page
'default' => 'date',  // Reasonable sort option

# Example: Simple Widget Structure

Here’s a complete example of a minimal widget:

<?php
class Simple_Widget extends \Elementor\Widget_Base {

    // Required: Unique widget name
    public function get_name() {
        return 'simple_widget';
    }

    // Required: Widget title in panel
    public function get_title() {
        return __( 'Simple Widget', 'hello-biz-child' );
    }

    // Required: Widget icon
    public function get_icon() {
        return 'eicon-posts-grid';
    }

    // Required: Widget category
    public function get_categories() {
        return [ 'general' ];
    }

    // Optional: Widget keywords for search
    public function get_keywords() {
        return [ 'simple', 'example' ];
    }

    // Define settings controls
    protected function register_controls() {
        
        // Content Section
        $this->start_controls_section(
            'content_section',
            [
                'label' => __( 'Content', 'hello-biz-child' ),
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => __( 'Title', 'hello-biz-child' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __( 'Hello World', 'hello-biz-child' ),
            ]
        );

        $this->end_controls_section();
    }

    // Render widget output
    // Render widget output
    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
<div class="simple-widget">

<h2><?php echo esc_html( $settings['title'] ); ?></h2>

</div>
<?php }
}

# Understanding the Data Flow

Let’s trace how data flows through a widget:

1. User Interaction: User sets “Products Per Page” to 12 in editor
2. Setting Saved: Value stored as ['products_per_page' => 12]
3. Render Called: render() method executes
4. Settings Retrieved: $settings = $this->get_settings_for_display()
5. Value Accessed: $settings['products_per_page'] returns 12
6. Value Used: Used in WP_Query to limit products

# Common Mistakes to Avoid

# Mistake 1: Forgetting Required Methods

// Bad - Missing required methods
class My_Widget extends \Elementor\Widget_Base {
    protected function render() {
        echo 'Hello';
    }
}

// Good - All required methods present
class My_Widget extends \Elementor\Widget_Base {
    public function get_name() { return 'my_widget'; }
    public function get_title() { return 'My Widget'; }
    public function get_icon() { return 'eicon-posts-grid'; }
    public function get_categories() { return ['general']; }
    protected function render() { echo 'Hello'; }
}

# Mistake 2: Not Escaping Output

// Bad - No escaping
echo '<div class="' . $class . '">' . $content . '</div>';

// Good - Properly escaped
echo '<div class="' . esc_attr( $class ) . '">' . esc_html( $content ) . '</div>';

# Mistake 3: Using echo in register_controls()

// Bad - Don't output in register_controls()
protected function register_controls() {
    echo 'Adding controls';  // Wrong!
    $this->add_control(...);
}

// Good - Only define controls
protected function register_controls() {
    $this->add_control(...);
}

# Testing Your Understanding

To verify you understand these concepts, try answering:

1. What happens if you don’t implement get_name()?
2. Which method outputs HTML to the frontend?
3. Where do you define the widget’s settings panel?
4. How do you access user settings in the render() method?
5. What’s the difference between protected and public methods?

Answers:

1. PHP will throw a fatal error – it’s a required abstract method
2. The render() method
3. In the register_controls() method
4. Using $this->get_settings_for_display()
5. public methods can be called from outside the class, protected only from within the class or child classes

# Summary

You now understand:

• The Elementor widget base class structure
• Required methods and their purposes
• How to define widget controls
• The widget lifecycle
• How settings flow from editor to frontend
• Best practices for widget development

# What’s Next?

In Part 3: Building the Basic Widget Structure, we’ll apply this knowledge to create the foundation of our Collection Products widget. We’ll:

• Create the widget PHP files
• Implement the required methods
• Register the widget with Elementor
• Add basic controls
• Create a simple render method
• Test the widget in Elementor

# Additional Resources

• Elementor Developers – Widget Structure
• Elementor Controls Reference
• PHP Object-Oriented Programming

Previous: ← Part 1: Setting Up the Development Environment
Next: Part 3: Building the Basic Widget Structure →

This first part sets up the local WordPress, WooCommerce and Elementor environment for the Collection Products widget.

# Learning Objectives

By the end of this tutorial, you will:

• Have a working WordPress installation
• Install and configure WooCommerce
• Install and activate Elementor
• Set up Hello Biz theme with a child theme
• Understand the child theme file structure
• Create the basic directory structure for the widget

# Prerequisites

• Local development environment (XAMPP, MAMP, Local by Flywheel, or similar)
• Basic understanding of WordPress installation
• Text editor or IDE (VS Code, PHPStorm, Sublime Text, etc.)
• FTP/SFTP client (optional, for remote development)

# Step 1: WordPress Installation

# 1.1 Install WordPress

If you don’t already have WordPress installed:

1. Download the latest version of WordPress from wordpress.org
2. Create a new MySQL database for your WordPress installation
3. Extract WordPress files to your web server directory
4. Navigate to your site URL in a browser
5. Follow the WordPress installation wizard:
   • Enter database details
   • Create an admin account
   • Complete the installation

# 1.2 Verify Installation

After installation:

1. Log in to your WordPress admin dashboard (usually http://yoursite.com/wp-admin)
2. Check that you can access the dashboard successfully
3. Navigate to Settings → Permalinks and set to “Post name” (recommended)

The WordPress admin dashboard after successful installation

# Step 2: Install Required Plugins

# 2.1 Install WooCommerce

WooCommerce is the e-commerce foundation for our widget.

1. Go to Plugins → Add New
2. Search for “WooCommerce”
3. Click Install Now on the official WooCommerce plugin
4. After installation, click Activate
5. Follow the WooCommerce setup wizard:
   • Choose your store location
   • Select industry and product types
   • Configure business details (you can skip this for development)
   • Select a theme (we’ll install Hello Biz later)
   • Complete the setup

# 2.2 Install Elementor

Elementor is the page builder we’ll extend with our custom widget.

1. Go to Plugins → Add New
2. Search for “Elementor”
3. Click Install Now on the official Elementor plugin
4. After installation, click Activate
5. You may see a welcome screen – you can skip the introduction

Note: The free version of Elementor is sufficient for this tutorial. Elementor Pro is not required.

# 2.3 Verify Plugin Installation

Check that both plugins are active:

1. Go to Plugins → Installed Plugins
2. Verify both WooCommerce and Elementor show as “Active”
3. You should see new menu items for both plugins in the admin sidebar

WooCommerce and Elementor plugins installed and active

# Step 3: Install Hello Biz Theme

# 3.1 Install the Parent Theme

Hello Biz is a lightweight theme optimized for Elementor.

1. Go to Appearance → Themes
2. Click Add New
3. Search for “Hello Biz”
4. Click Install on the Hello Biz theme
5. After installation, click Activate

Alternative: If Hello Biz is not available in the repository, you can use “Hello Elementor” as an alternative parent theme.

# Step 4: Create a Child Theme

Creating a child theme is essential – it allows you to modify and extend the parent theme without losing changes when the parent theme updates.
We can download the Hello Biz theme from the Official Github repository: Hello Biz Child Theme, or you can create it manually.

# 4.1 Create Child Theme Directory

1. Navigate to wp-content/themes/ on your WordPress installation
2. Create a new folder named hello-biz-child

# 4.2 Create style.css

Create a file named style.css in the hello-biz-child folder with the following content:

/*
Theme Name: Hello Biz Child
Description: Child theme for Hello Biz with Collection Products widget
Author: Your Name
Author URI: https://yourwebsite.com
Template: hello-biz
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-biz-child
*/

/* Add your custom styles here */

Important: The Template: line must match the directory name of your parent theme exactly.

# 4.3 Create functions.php

Create a file named functions.php in the hello-biz-child folder:

/**
 * Theme functions and definitions.
 *
 * For additional information on potential customization options,
 * read the developers' documentation:
 *
 * @package HelloBizChild
 */

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

define( 'HELLO_BIZ_CHILD_VERSION', '1.0.0' );

/**
 * Load child theme scripts & styles.
 *
 * @return void
 */
function hello_biz_child_scripts_styles() {

	wp_enqueue_style(
		'hello-biz-child-style',
		get_stylesheet_directory_uri() . '/style.css',
		[
			'theme', // This ensures parent theme styles load first
		],
		HELLO_BIZ_CHILD_VERSION
	);
}

add_action( 'wp_enqueue_scripts', 'hello_biz_child_scripts_styles', 20 );

// We'll add more code here in later tutorials

# 4.4 Activate Child Theme

1. Go to Appearance → Themes in WordPress admin
2. You should see “Hello Biz Child” theme
3. Click Activate on the child theme
4. Your site should now be using the child theme

Hello Biz Child theme activated in WordPress

# Step 5: Create Widget Directory Structure

Now let’s set up the directory structure for our Collection Products widget.

# 5.1 Create Directories

In your hello-biz-child folder, create the following directories:

hello-biz-child/
├── widgets/
│   └── collection-products/
├── js/
└── css/

You can create these via FTP, File Manager, or command line:

Via Command Line:

cd wp-content/themes/hello-biz-child
mkdir -p widgets/collection-products
mkdir js
mkdir css

Via File Manager or FTP:
Simply create each folder manually.

# 5.2 Verify Directory Structure

Your child theme should now have this structure:

hello-biz-child/
├── functions.php
├── style.css
├── widgets/
│   └── collection-products/
├── js/
└── css/

# Step 6: Add Sample WooCommerce Products (Optional but Recommended)

To test our widget properly, let’s add some sample products.

# 6.1 Install WooCommerce Sample Data

1. Go to WooCommerce → Status → Tools
2. Click on “Create default WooCommerce pages” (if not already created)
3. For sample products, you can:
   • Install the “WooCommerce Sample Data” plugin, OR
   • Manually create a few products

# 6.2 Create Sample Products Manually

If creating manually:

1. Go to Products → Add New
2. Create at least 9 products (to test the grid layout)
3. For each product:
   • Add a title and description
   • Set a price
   • Add a featured image
   • Assign to a category
   • Publish the product

# 6.3 Add Product Variations (for Color Swatches)

For testing color swatches:

1. Create a Variable Product
2. Add an attribute named “Color” (make it global attribute)
3. Add color terms (e.g., “Black”, “White”, “Blue”)
4. Create variations for each color
5. Save the product

# Step 7: Test Your Setup

# 7.1 Verify WordPress

1. Visit your site frontend
2. Confirm the site loads without errors
3. Check that the Hello Biz Child theme is active

# 7.2 Verify WooCommerce

1. Go to Products → All Products
2. Verify your sample products are listed
3. Visit the Shop page on the frontend
4. Confirm products display correctly

# 7.3 Verify Elementor

1. Create a new page or edit an existing one
2. Click “Edit with Elementor”
3. Verify Elementor editor loads
4. Check the widgets panel on the left
5. You should see various Elementor widgets

# Common Issues and Solutions

# Issue 1: Child Theme Not Showing

Solution:

• Check that style.css has the correct Template: header matching the parent theme folder name
• Verify both style.css and functions.php exist in the child theme folder
• Clear browser cache and WordPress cache

# Issue 2: Parent Theme Styles Not Loading

Solution:

• Ensure the parent theme handle in wp_enqueue_style() is correct
• Some themes use ‘theme-style’ or ‘hello-elementor’ – check your parent theme’s functions.php
• Adjust the dependency array accordingly

# Issue 3: WooCommerce Not Showing Products

Solution:

• Ensure products are published (not drafts)
• Check permalink settings (Settings → Permalinks, click Save)
• Verify WooCommerce pages were created (WooCommerce → Status)

# Issue 4: Elementor Editor Not Loading

Solution:

• Deactivate all plugins except Elementor and WooCommerce
• Switch to a default WordPress theme temporarily to isolate the issue
• Check browser console for JavaScript errors
• Clear WordPress cache and browser cache

# Testing Your Environment

To ensure everything is set up correctly, perform these checks:

# Checklist

• [ ] WordPress is installed and accessible
• [ ] You can log in to WordPress admin
• [ ] WooCommerce is active and configured
• [ ] Elementor is active
• [ ] Hello Biz parent theme is installed
• [ ] Hello Biz Child theme is active and working
• [ ] Directory structure is created (widgets/, js/, css/)
• [ ] Sample products are created in WooCommerce
• [ ] You can edit pages with Elementor
• [ ] WooCommerce shop page displays products

# Summary

The development environment now includes:

• WordPress installed and configured
• WooCommerce plugin activated with sample products
• Elementor plugin activated
• Hello Biz child theme created and activated
• Directory structure ready for widget development

# What’s Next?

In Part 2: Understanding Elementor Widget Architecture, we’ll examine the widget base class, required methods and lifecycle before building our widget.

# Additional Resources

• WordPress Child Themes Documentation
• WooCommerce Documentation
• Elementor Developers Documentation
• Local WordPress Development

Next: Part 2: Understanding Elementor Widget Architecture →

This series builds a Collection Products widget for WooCommerce. It displays products in a Pinterest-style grid with collection images, filters and sorting controls.

# What You’ll Build

By the end of this tutorial series, you’ll have created a fully functional Elementor widget that:

• • Displays WooCommerce products in a responsive 2-column grid layout

• Supports custom “collection” images separate from product featured images
• Shows featured images on hover (for portrait products)
• Includes client-side filtering by colors and sizes
• Provides sorting options (price low to high, high to low)
• Features a slide-in filter panel
• Displays product color swatches
• Adapts the layout to desktop, tablet and phone screens

The Elementor WooCommerce Collection Widget

# Prerequisites

Before starting this tutorial series, you should have:

• Basic understanding of PHP (WordPress/WooCommerce development)
• Familiarity with JavaScript and jQuery
• Understanding of HTML and CSS
• Basic knowledge of WordPress hooks and filters
• WordPress installation with admin access
• WooCommerce plugin installed and activated
• Elementor plugin installed and activated
• Hello Biz theme with Hello Biz Child theme set up

# Tutorial Series Structure

Part 1: Setting Up the Development Environment

Learn how to set up your WordPress development environment, install necessary plugins, and create the child theme structure for the widget.

Part 2: Understanding Elementor Widget Architecture

Dive into the fundamentals of Elementor widget development, understanding the base class, required methods, and the widget lifecycle.

Part 3: Building the Basic Widget Structure

Create the foundation of your widget by implementing the widget class, registering it with Elementor, and adding basic controls.

Part 4: WooCommerce Product Integration

Learn how to query WooCommerce products, access product data, work with product taxonomies, and display product information.

Part 5: Implementing Custom Product Meta Fields

Add custom meta fields to WooCommerce products including a collection image uploader using the WordPress media library and product orientation settings.

Part 6: Creating the Frontend Rendering

Build the grid layout using CSS Grid, implement the product rendering logic, add color swatches, and create responsive designs.

Part 7: Adding Sorting and Filtering Functionality

Implement client-side JavaScript filtering and sorting, create the filter panel UI, and add touch-friendly interactions.

# Key Concepts Covered

Throughout this series, you’ll learn:

1. Elementor Widget Development
   • Extending \Elementor\Widget_Base
   • Implementing required methods
   • Adding widget controls
   • Rendering frontend output
2. WooCommerce Integration
   • Querying products with WP_Query
   • Working with product data
   • Handling product variations
   • Displaying product meta
3. WordPress Development Best Practices
   • Using WordPress hooks and filters
   • Sanitizing and escaping data
   • Enqueuing scripts and styles
   • Following WordPress coding standards
4. Modern Frontend Development
   • CSS Grid layouts
   • Responsive design with media queries
   • JavaScript DOM manipulation
   • Client-side filtering without AJAX
5. WordPress Media Library
   • Integrating wp.media() API
   • Creating custom media uploaders
   • Handling image selection

# File Structure

By the end of this series, your child theme will have the following structure:

wp-content/themes/hello-biz-child/
├── functions.php                                    # Main theme functions
├── style.css                                        # Child theme styles
├── widgets/
│   └── collection-products/
│       ├── collection-products-register.php         # Widget registration & helpers
│       └── collection-products-widget.php           # Main widget class
├── js/
│   ├── collection-image-uploader.js                # Admin media uploader
│   └── collection-filters.js                       # Frontend filtering & sorting
└── css/
    └── collection.css                              # Widget styles

# Tutorial Format

Each tutorial part includes:

• Clear objectives – What you’ll accomplish in that part
• Step-by-step instructions – Detailed implementation steps
• Code snippets with comments – Well-documented code examples
• Explanations – Understanding of what the code does and why
• Common issues and solutions – Troubleshooting tips
• Testing instructions – How to verify your implementation
• Summary – Key takeaways and what’s next

# Additional Resources

• Elementor Developers Documentation
• WooCommerce Developer Documentation
• WordPress Developer Resources
• WordPress Coding Standards

# Getting Started

Ready to begin? Start with Part 1: Setting Up the Development Environment!

# Support and Feedback

If you encounter any issues or have questions while following this tutorial series, please:

1. Review the troubleshooting sections in each part
2. Check the code examples in the repository
3. Consult the WordPress and Elementor documentation
4. Search for similar issues in WordPress/Elementor forums

Happy coding! Let’s build an amazing WooCommerce widget together!