Practical eCommerce Development with WordPress & WooCommerce

Name: Practical eCommerce Development with WordPress & WooCommerce
Rating: 4.5 (26 reviews)

Practical WordPress Course: CI/CD with GitHub Actions, Full Site Editing, and WooCommerce Blocks Development

Created byAlexandr Sochirca

Last updated 2/2025

English

English [Auto],

What you'll learn

Set up a modern WordPress development environment with Docker
Develop a custom Full Site Editing (FSE) theme for an online store
Build custom Gutenberg blocks for advanced site functionality
Extend WooCommerce features with custom plugins and taxonomies
Implement filtering, sorting, and dynamic blocks for product listings
Develop a secure and optimized checkout process
Automate deployments with GitHub Actions CI/CD workflows
Improve performance with best practices in WordPress and WooCommerce optimization

Course content

5 sections • 79 lectures • 30h 57m total length

Required Software for the Course and Design Layout Overview10:38
Develop practical eCommerce with WordPress and WooCommerce by installing Docker, Visual Studio Code, Git, GitHub, and Figma, overview layouts, and build full-site editing blocks with HTML, CSS, PHP, and JavaScript.
Installing WSL 2 on Windows 10/11 for Docker1:44
Running WordPress with Docker19:47
Launch and run WordPress with Docker using a docker-compose workflow, configuring MySQL, PHP, and phpMyAdmin, setting up volumes, ports, and an initial WordPress installation.
Setting Up a Local WordPress Development Environment with Docker Compose0:32
Creating a Starter FSE Theme for the Project17:26
Create a starter WordPress full-site-editing theme and plugins structure in a single repository, using docker, gitignore, and GitHub, while configuring wp content paths and activating templates.
Creating MU / Core / Blocks Plugins for the Project24:55
Implementing CI/CD for the Project with GitHub Actions46:25

Connecting Google Fonts, CSS, JavaScript22:31
Learn to connect Google Fonts, CSS, and JavaScript within a WordPress block theme by building the header block, loading fonts dynamically via PHP, and enqueuing assets for Gutenberg.
Developing the Site Header Block27:20
Working with SVG and CSS Styles for the Header34:40
Enable WordPress SVG support, load header SVGs and logo, and style the header with CSS variables for light and dark themes, including a reset CSS.
Implementing Dark Mode Toggle and Dropdown Navigation27:47
Implement a dark mode toggle in the header and add a desktop and mobile dropdown navigation for WordPress, using local storage to preserve the theme with css and js.
Mobile Version for the Header Block42:28
Finish the header by highlighting the current page and making navigation responsive for mobile, using variables, dynamic WordPress classes, and breakpoint-driven styles.
Organizing Git Branching Workflow22:36
Developing the Structure of the Hero Block42:55
Develop the hero block for a WordPress Gutenberg workflow, enabling video background, title and description attributes, media uploads, and a flexible repeater for logo slides.
Working with save.js for the Hero Block30:01
Learn to implement and save a WordPress hero block with save.js, using block props, content keys, admin panel fields, and front-end layout, plus rich text handling and responsive styling.
Finalizing the Hero Block59:37
Finalize the hero block styling with a gradient mask and responsive typography for light and dark themes. Implement a Swiper slider and register assets in WordPress.
Developing the Dynamic Games Line Block43:53
Develop a dynamic games line block for WordPress and WooCommerce, fetching games from WooCommerce and rendering them in a swiper slider with a configurable count from the admin panel.
Implementing the Recent News Block24:51
Implement a dynamic recent news block in WordPress by creating a news post type, admin fields for title and description, a background image, and registering a Gutenberg block.
Developing the Recent News Block38:20
Develop a dynamic recent news block for WordPress and Gutenberg that displays post data with a title, description, background image, and dual blurred images, using server-side render for admin preview.
Loading Global Styles and Fonts in Gutenberg Pages22:23
Learn to centralize global WordPress Gutenberg styles and fonts by creating a dedicated editor style file, loading Google fonts, and overriding typography for admin and front end consistency.
Implementing a Popup Search Container29:23
Implement a header popup search container in WordPress and WooCommerce that opens on click. Show placeholder animations during server requests and display dynamic results, with handling when nothing is returned.
Sending a Server Request for Game Search35:48
Finalizing the Game Search Option33:56
Finalize the game search interface by styling a six-column grid with pulsating placeholders, truncation, and layout blocks; implement live search with WooCommerce pricing, currency, and discounts, plus dynamic server requests.
Working with the Subscribe Block and MailChimp22:33
Develop a semi-dynamic, semi-static subscribe block in Gutenberg using a shortcode. Integrate Mailchimp via a plugin, configuring title, description, image, and shortcode.
Styling and Finalizing the Subscribe Block25:05
Style the subscribe block for a WordPress WooCommerce site by setting a dynamic min-height, applying a mask with a pseudo-element, centering content via flexbox, and tuning typography and forms.
Adding Meta Fields for Games28:11
Learn to add a game store meta tab to WooCommerce product data, register fields like publisher and platforms, and save them with product meta via hooks and meta boxes.
Implementing the Featured Games Block41:08
Create and register a dynamic featured games block for WordPress with WooCommerce, using title, description, and a six-item count, loaded via server-side rendering.
Developing a Static Call to Action Block35:21
Develop a static call to action block for a wordpress gutenberg site by creating a new block with a links repeater, background images, and inspector controls, then style and finalize.
Implementing the FAQ Block (Accordion) – Admin Panel27:51
Implement a dynamic faq accordion block in the admin panel for a WordPress and WooCommerce course, using a starter template, json configuration, and a margins toggle.
Finalizing the FAQ Block16:25
Finalize the faq block by styling with container, title, and description, applying flexbox and precise margins, and implementing an interactive accordion with show and open classes via JavaScript.
Developing the Footer Block51:00
Develop a WordPress Gutenberg footer block using inner blocks, logo and link repeaters, and copyright fields. Follow a branch workflow to register the block and test on servers.

Working on the Single News Page30:23
Build a dedicated single news page in WordPress by creating a single post template, registering a dynamic single news block, and wiring the header, footer, and social share.
Optimizing WordPress + Docker Performance21:13
Optimize WordPress and Docker performance by moving WordPress files to a Linux volume, reducing plugin synchronization, and accelerating local development on Windows with WSL.
Finalizing the Single News Block28:23
Finalize the single news block by adjusting light and dark themes, gradients, image handling, and variables, then apply css in the block and integrate with WordPress templates.
Adding an Icon Upload Meta Field19:03
Learn to add an icon upload meta field for terms of a custom taxonomy in a WordPress post type, using meta fields and the media uploader.
Implementing the News Header Block26:11
Finalizing the News Archive Page37:45
Finalize the news archive page by creating a category taxonomy template, registering the taxonomy, and implementing a dynamic news block with a query loop and pagination.

Analyzing the Product Template and Gutenberg Support for Products13:59
Learn how to customize the WooCommerce single product template using a block theme, replace the classic editor with Gutenberg, and build both local and global blocks for product data.
Adding Additional Fields and Taxonomies for Products28:39
Learn to add product meta fields and taxonomies in WordPress and WooCommerce, including languages, platforms, and genres, with image galleries and robust save handling via meta boxes.
Implementing the Single Game Block45:00
Implement a dynamic single game blog block by duplicating the single news template, wiring metadata and taxonomies, and rendering content with PHP for the admin panel and single product pages.
Finalizing the Single Game Block51:04
Finalize the single game block by styling with CSS, implementing a responsive flex layout, sticky sidebar image, metadata and links, and dark mode tweaks, in a WordPress and WooCommerce setup.
Implementing the Slider Block36:00
Implementing the Similar Games Block47:29
Implement a dynamic similar games block in WordPress and WooCommerce by extending a template, wiring admin fields, and querying by genres to display a tailored slider.
Developing Blocks for the Store Archive Page27:51
Develop a store archive header block for the shop archive page, register its callback, and configure it with background image and title, ensuring consistent product header naming in the theme.
Developing the Filter and Game Archive39:31
Develop the filter and game archive by building a dynamic WordPress block that fetches products or post types, uses Ajax, and presents language, genre, year, and publisher filters.
Implementing Filtering Functions46:19
Implement an ajax-powered filter that updates results on change or load more, with page handling, reset, and server-side WordPress PHP handler supporting languages, genres, and publishers for games.
Adding Sorting for the Games Block32:23
Add a sorting form to the games block with options for latest, price (low to high and high to low), and popularity, wired to ajax for dynamic updates.
Working with Blocks for the Cart Page20:09
Master building and styling the WooCommerce cart page with WordPress blocks, handling two states (with and without products), and customizing headers, call-to-action blocks, and responsive layouts.
Developing the Cart Blocks – Part 230:12
Finalizing the Cart Page Blocks18:54
Extend the cart experience by finalizing the slider and best seller blocks, adding a product type trigger to switch content per page and wiring cross sell logic in WooCommerce.
Implementing the Checkout Page42:15
Explore how to customize the checkout page using blocks, replace headers and footers, adjust fields, apply styles, and extend with hooks for WordPress and WooCommerce.

What are GitHub Actions?8:07
An introduction to the purpose, capabilities, and key features of GitHub Actions.
Syntax for Writing Workflows in GitHub Actions9:59
Learn the foundational syntax and structure required to define a GitHub Actions workflow.
Writing Your First Workflow to Execute Simple Commands13:38
Create a basic workflow that runs commands, both single-line and multi-line scripts.
Disabling Workflows and Job Execution Order12:28
Understand how to disable workflows and control the sequence of jobs within a workflow.
Using Pre-Built Actions in Workflows13:24
Explore how to integrate pre-built actions into your workflows to enhance functionality.
Conditional Workflow Execution10:03
Set up workflows to execute sequentially or based on specific conditions.
Trigger Types (Events) that Launch Workflows11:09
Learn about various events that can trigger workflows, such as pushes, pull requests, and more.
Event Filters for Workflow Triggers (Branches, Tags, Paths)10:57
Customize workflow triggers using filters for branches, tags, and file paths.
Scheduled Workflow Execution (Schedule Trigger)7:04
Automate workflows with scheduled triggers to run at predefined times.
Manual Workflow Execution (workflow_dispatch) and Input Parameters8:15
Trigger workflows manually and pass parameters using the inputs field.
Manual Trigger (workflow_dispatch) and REST API5:49
Use the REST API to execute workflows triggered manually.
Triggering Workflows with repository_dispatch8:33
Learn how to trigger workflows using the repository_dispatch event.
The if Operator, Expressions, and Contexts in GitHub Actions10:50
Control workflow logic with the if operator, using expressions and contextual data.
Variables in GitHub Actions12:38
Define and utilize variables to store reusable data within workflows.
Secrets in GitHub Actions8:45
Safeguard sensitive information using encrypted secrets in workflows.
Functions in GitHub Actions14:05
Use built-in functions to manipulate data and enhance workflow capabilities.
Caches in GitHub Actions19:57
Reduce execution time and improve efficiency with caching mechanisms.
Artifacts in GitHub Actions12:11
Store, retrieve, and share files generated during workflow execution.
Using a Matrix Strategy in GitHub Actions12:58
Run workflows in parallel for multiple environments or configurations using matrices.
Interaction Between Workflows in GitHub Actions19:28
Coordinate and communicate between different workflows within a repository.
Introduction to Docker for GitHub Actions3:39
Get a basic understanding of Docker and its role in enhancing GitHub Actions workflows.
Running Jobs in a Docker Container8:40
Execute workflow jobs in isolated Docker environments for greater flexibility.
Types of Actions and Why Create Custom Actions?6:31
Learn about different action types and the advantages of building your own actions.
Creating a Local Custom Composite Action10:47
Build a reusable custom composite action locally for your workflows.
Displaying a Workflow Status Badge in README3:39
Add a dynamic badge to your repository's README to showcase workflow statuses.
Limiting Workflow Execution Time5:09
Enforce time constraints to prevent workflows from running indefinitely.
Limiting Concurrent Workflow Runs to One6:12
Restrict simultaneous workflow executions to avoid resource conflicts.
Implementing CI/CD for a Project in Practice32:20
Develop a fully functional Continuous Integration/Continuous Deployment (CI/CD) pipeline.

Requirements

Basic understanding of WordPress and PHP.
Familiarity with HTML, CSS, and JavaScript.
No prior experience with Full Site Editing, WooCommerce Blocks, or GitHub Actions is required—everything will be explained from scratch!

Description

Master WordPress Development with Modern Techniques: Build, Automate, and Optimize Your WooCommerce Store

Are you looking to take your WordPress development skills to the next level? Do you want to build a fully functional eCommerce store with WooCommerce, leverage the power of Full Site Editing (FSE), and implement Continuous Integration/Continuous Deployment (CI/CD) using GitHub Actions?

This hands-on, practical course will guide you through every step of building a professional eCommerce website using the latest WordPress development techniques. You will learn how to create custom blocks, extend WooCommerce functionality, optimize performance with Docker, and automate deployment workflows using GitHub Actions.

By the end of this course, you'll have a complete WordPress-based eCommerce project with advanced customization, dynamic blocks, and a streamlined deployment process.

Course Curriculum Breakdown

Setup & Development Environment
1. Installing required software and setting up Docker
2. Creating a custom Full Site Editing (FSE) theme
3. Developing must-use (MU) plugins and WooCommerce extensions
Frontend Development with Gutenberg Blocks
1. Building a custom header block with SVG and CSS
2. Implementing dark mode and responsive navigation
3. Creating dynamic sections like Hero, Featured Products, and Recent News
WooCommerce & eCommerce Functionality
1. Customizing product pages and templates
2. Adding meta fields and taxonomies for products
3. Developing an optimized cart and checkout process
Automation & CI/CD with GitHub Actions
1. Understanding GitHub Actions and writing custom workflows
2. Automating deployments and testing for WordPress projects
3. Using Docker for GitHub Actions to streamline development

Why Take This Course?

Real-World Project – You'll build a fully customized WooCommerce store from scratch.
Cutting-Edge WordPress Development – Learn Full Site Editing (FSE), custom block development, and advanced Gutenberg techniques.
Master WooCommerce Blocks – Develop custom WooCommerce blocks and extend product functionality.
Automate with GitHub Actions – Implement CI/CD workflows for automated testing and deployment.
Optimize with Docker – Run WordPress in a Dockerized environment for improved performance.
SEO-Optimized Development – Improve site performance and search engine visibility.

Who this course is for:

WordPress Developers looking to advance their skills in Full Site Editing (FSE) and WooCommerce.
Web Developers who want to build and customize eCommerce stores efficiently.
Freelancers & Agency Developers aiming to create high-quality WordPress projects with modern development practices.
Anyone Interested in CI/CD & Automation who wants to integrate GitHub Actions into their workflow

Practical eCommerce Development with WordPress & WooCommerce

What you'll learn

Explore related topics

Course content

Project Organization: Figma, Docker, FSE Gutenberg, CI/CD, and More7 lectures • 2hr 1min

Gutenberg Block Development (Static and Dynamic Pages)24 lectures • 13hr 6min

News Section Pages6 lectures • 2hr 43min

WooCommerce Online Store Section14 lectures • 8hr

Mastering GitHub Actions: From Basics to Advanced CI/CD28 lectures • 5hr 7min

Requirements

Description

Who this course is for: