---
title: "Elementor Widget Part 1: Setting Up the Development Environment"
description: "# Introduction This first part sets up the local WordPress, WooCommerce and Elementor environment for the Collection Products widget. # Learning…"
url: "https://sajdoko.com/blog/elementor-widget-part-1-setting-up-the-development-environment/"
language: "en"
content_signal: "ai-train=no, search=yes, ai-input=yes"
---
# Elementor Widget Part 1: Setting Up the Development Environment

 9 November 2025·7 minutes read·[Development](https://sajdoko.com/blog/category/development/)     

## [#](#introduction) Introduction

 

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

 

## [#](#learning-objectives) 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) 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%3A-wordpress-installation) Step 1: WordPress Installation

 

### [#](#1.1-install-wordpress) 1.1 Install WordPress

 

If you don’t already have WordPress installed:

 

1. Download the latest version of WordPress from [wordpress.org](https://wordpress.org/download/)
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) 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%3A-install-required-plugins) Step 2: Install Required Plugins

 

### [#](#2.1-install-woocommerce) 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) 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) 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%3A-install-hello-biz-theme) Step 3: Install Hello Biz Theme

 

### [#](#3.1-install-the-parent-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%3A-create-a-child-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](https://github.com/elementor/hello-theme-child), or you can create it manually.

 

### [#](#4.1-create-child-theme-directory) 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) 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) 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) 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%3A-create-widget-directory-structure) Step 5: Create Widget Directory Structure

 

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

 

### [#](#5.1-create-directories) 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) 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%3A-add-sample-woocommerce-products-(optional-but-recommended)) 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) 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) 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)) 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%3A-test-your-setup) Step 7: Test Your Setup

 

### [#](#7.1-verify-wordpress) 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) 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) 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) Common Issues and Solutions

 

### [#](#issue-1%3A-child-theme-not-showing) 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%3A-parent-theme-styles-not-loading) 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%3A-woocommerce-not-showing-products) 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%3A-elementor-editor-not-loading) 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) Testing Your Environment

 

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

 

### [#](#checklist) 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) 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%E2%80%99s-next%3F) What’s Next?

 

In [Part 2: Understanding Elementor Widget Architecture](https://sajdoko.com/blog/elementor-widget-part-2-understanding-elementor-widget-architecture/), we’ll examine the widget base class, required methods and lifecycle before building our widget.

 

## [#](#additional-resources) Additional Resources

 

- [WordPress Child Themes Documentation](https://developer.wordpress.org/themes/advanced-topics/child-themes/)
- [WooCommerce Documentation](https://woocommerce.com/documentation/)
- [Elementor Developers Documentation](https://developers.elementor.com/)
- [Local WordPress Development](https://sajdoko.com/blog/how-to-install-wordpress-on-localhost-using-xampp-step-by-step-guide/)

 

---

 

**Next:** [Part 2: Understanding Elementor Widget Architecture →](https://sajdoko.com/blog/elementor-widget-part-2-understanding-elementor-widget-architecture/)

  

- [Code](https://sajdoko.com/blog/category/wordpress/code/)
- [Development](https://sajdoko.com/blog/category/development/)
- [Elementor](https://sajdoko.com/blog/category/wordpress/elementor/)
- [WooCommerce](https://sajdoko.com/blog/category/wordpress/woocommerce/)
- [WordPress](https://sajdoko.com/blog/category/wordpress/)
- [Elementor Widget](https://sajdoko.com/blog/tag/elementor-widget/)

   

## Have a project in mind?

 

Write to us and we come back with a concrete estimate within one working day.

  [Contact us →](https://sajdoko.com/contact/)     

## Leave a comment [Cancel](https://sajdoko.com/blog/elementor-widget-part-1-setting-up-the-development-environment/?format=markdown#respond)

      

## Recent Posts

- [Web and Software Development Costs in Albania: The International Buyer’s Strategic Guide](https://sajdoko.com/blog/website-costs-in-albania-international-perspective/)
- [Scaling WooCommerce Performance: Eliminating High-Traffic Checkout Bottlenecks](https://sajdoko.com/blog/scaling-woocommerce-performance-checkout-bottlenecks/)
- [The Hidden Cost of Cheap or “Free” Websites: Why €100 Web Design Costs €3,000 Later](https://sajdoko.com/blog/the-hidden-cost-of-cheap-or-free-websites/)
- [Building High-Concurrency Tour Booking Engines: Architecture Beyond Generic Plugins](https://sajdoko.com/blog/building-high-concurrency-tour-booking-engines/)
- [WordPress Malware Removal and Security Hardening: The Complete Emergency Recovery Guide](https://sajdoko.com/blog/wordpress-malware-removal-and-security-hardening/)

## Recent Comments

1. Alvaro on [Optimizing and Extending the Livewire Product Filter – Part 4](https://sajdoko.com/blog/optimizing-and-extending-the-livewire-product-filter/#comment-4)
2. [sajdoko](https://sajdoko.com) on [How to Set Up WordPress on localhost Using XAMPP: A Step-by-Step Guide](https://sajdoko.com/blog/how-to-install-wordpress-on-localhost-using-xampp-step-by-step-guide/#comment-3)
3. Roshni on [How to Set Up WordPress on localhost Using XAMPP: A Step-by-Step Guide](https://sajdoko.com/blog/how-to-install-wordpress-on-localhost-using-xampp-step-by-step-guide/#comment-2)