Raddy Website Design & Development Tutorials

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

By Raddy in WooCommerce / WordPress ·

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

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:

Leave a Reply

Your email address will not be published. Required fields are marked *