←- Back

How to Create Custom eCommerce Theme with WordPress (FSE) and WooCommerce

Today we will create an eCommerce store from scratch, using the Full Site Editing in WordPress, WooCommerce and Guttenberg blocks.

I will go thru the entire process of installing WordPress locally, installing necessary plugins, setting up the theme and creating a couple of pages. Throughout the process, you will see some of the bugs, drawbacks and overall possibilities.

I need to mention that I did use a little bit of CSS to achieve things that I couldn’t do with the FSE editor and Guttenberg.

What is FSE (Full Site Editing)

FSE represents a significant shift in the way that WordPress websites can be created. It is a tool with WordPress 5.9 and above that allows you to build fully working websites based on drag-and-drop blocks. It’s an excellent way to make quick edits to your site without going through the hassle of manually changing code.

Video Tutorial

Video Includes:

• [x] Laragon Setup, PHP version
• [x] Install WordPress
• [x] Setup WP_Debug to true
• [x] Setup Home Page
• [x] Create Demo Page
• [x] Setup WooCommerce
• [x] WooCommerce Categories + Products
• [x] Create a Theme
• [x] Create Functions PHP file
• [x] Show UI – Block Inserter, Patterns, Page Settings, Blocks,
• [x] Settings
• [x] Colours
• [x] Typography
• [x] Links
• [x] Buttons
• [x] Custom Variables
• [x] Root Padding
• [x] Custom Block Theme.json
• [x] Parts – Header + Custom CSS
• [x] Parts – Footer
• [x] Cover
• [x] WooCommerce Blocks
• [x] Pages
• [x] WooCommerce CSS Mods
• [x] Section Lock
• [x] Extra Theme Styles
• [x] Details Feature

Project Structure

assets (dir)
      - images (dir)
      - fonts (dir)
parts (dir)
      - footer.html
      - header.html
templates(dir)
      - 404.html
      - archive.html
      - index.html
      - page.html
      - single.html
      - search.html
functions.php
index.php
README.txt
screenshot.png
style.css
theme.json

Resources

• Official Block Theme Setup Documentation
• https://developer.wordpress.org/themes/block-themes/creating-new-themes-using-the-site-editor/
• https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

Credit:

Photos from Unsplash

https://unsplash.com/photos/dZ3YRMco4XU
https://unsplash.com/photos/f-uCfgb73ew
https://unsplash.com/photos/nz08m1BF8Io
https://unsplash.com/photos/bwsTJMnhcwE
https://unsplash.com/photos/e3Fxq_BdCBE
https://unsplash.com/photos/DBXzXY6h5rM
https://unsplash.com/photos/-pLhzVIKgVA

More Resources:

• How to Create a Custom eCommerce Theme on WordPress / WooCommerce – Local, Underscores & Bootstrap
• How to make a custom WordPress Theme from scratch
• Create A Fully Responsive GYM Website using Editor X Platform – Video
• TheMinimalist Theme is now Open Source – Free Download
• How To Design a Simple GYM Website In Adobe XD For Beginners – Mobile, Tablet & Desktop