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.jsonResources
- 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:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
