How to Create Custom eCommerce Theme with WordPress Block Theme and WooCommerce

💰 20% Referral Hosting Discount: www.hostg.xyz/SHEiZ
Create an eCommerce store from scratch, using Full Site Editing (Block Theme) in WordPress, WooCommerce and Guttenberg blocks - Block Theme
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
Download: bit.ly/3UTvHLH
View Design System + Layout: bit.ly/3tUr3RN
Cart and Checkout Page: bit.ly/3Ezr0zH
Additional Details: bit.ly/3XoYDgi
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ Elementor: be.elementor.com/visit/?bta=2...
Chapters:
◾ 0:00 Introduction:
◾ 0:25 What is FSE
◾ 0:50 Install WordPress Locally
◾ 3:15 Development Setup
◾ 6:25 Installing WooCommerce
◾ 7:46 Adding Categories and Products
◾ 10:21 Creating Theme Files
◾ 21:38 FSE Walkaround
◾ 21:38 FSE Walkaround
◾ 27:14 Demo Page
◾ 28:42 Theme.json
◾ 1:08:33 Header
◾ 1:31:40 Footer
◾ 1:37:35 Home Page
◾ 1:53:14 Single Product
◾ 1:55:27 All Products
◾ 1:56:32 How to save Parts
◾ 1:58:18 Global Veriables
◾ 2:00:32 Theme Styles
◾ 2:02:57 End
Recording Equipment:
◾ Microphone: amzn.to/3uX0yvP
◾ Shotgun Mic: amzn.to/3aRsSJb
◾ Camera: amzn.to/3IMumkx
◾ Lens: amzn.to/3ARxvh8
◾ Lighting: amzn.to/3PBetj2
Computer Gear:
◾ Keyboard: amzn.to/3RCXRcC
◾ Headphones: amzn.to/3aIvskX
◾ Mouse: amzn.to/3AXykVu
Credit:
Photos from Unsplash
unsplash.com/photos/dZ3YRMco4XU
unsplash.com/photos/f-uCfgb73ew
unsplash.com/photos/nz08m1BF8Io
unsplash.com/photos/bwsTJMnhcwE
unsplash.com/photos/e3Fxq_BdCBE
unsplash.com/photos/DBXzXY6h5rM
unsplash.com/photos/-pLhzVIKgVA
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter

[@silakweb]

Excellent tutorial. I followed it without knowing English and it helped me much more than others in Spanish. Using the translator to write this to you and thank you. Greetings from Argentina

[@RahmadSetiaBudi]

This is what I searching for, thanks raddy

[@tokomob-mobi]

Thank you for tutorial. I think FSE Theme is the future and this year i want to develop my first FSE Theme and sell it.

[@tee-hee9553]

thank you Mister Raddy

[@RaddyDev]

Anything specific you’d like me to cover next time? Totally forgot to include the look of the Cart and Checkout page. I've included screenshots in the description 😊

[@user-gi4me5nj4l]

The payment page, with own plugin for this theme👍🏻

[@RaddyDev]

@@user-gi4me5nj4l I totally forgot to show the other pages. Edit: included in the description as screenshots

[@lightningRatPack]

Product customization but more high-end or more interesting then the available Apps.

[@neemaps5898]

Hi ,how can i make a different header for the front page only.

[@jamkoti3088]

Excellent video. Thank you. When you edit the templates via backend (WordPress dashboard), is it editing the WooCommerce raw template files? Also, I would like to see how the single product block can be customized or accessed for customization.

[@RaddyDev]

Thank you. There is not much you can do on the single product block at the moment. I wish I showed that on the video... I am hoping that WooCommerce will make the blocks a lot more customizable in near future. I am not sure if I understand your template question. The FSE only edits the display pages, so you can do pretty much anything you like to them. It doesen't do much in terms of editing WooCommerce stuff. I think that most pages just use the standard WooCommerce shortcodes.

[@xxxxxx-pb3oj]

I hope some day someone will upload full theme development (without page builders) woocommerce website. There is no tutorial here, only simple stores, we need to know how to show custom style attributes (no default select) , how to add to cart with ajax in single product page without plugins with attributes and variations, how to filter products by attributes, categories, all custom.

[@RaddyDev]

Thanks, I appreciate the suggestion

[@sororbudwiser]

Totally agree! That would be awesome

[@Adrenaline_nocopyrightmusic]

There is a new plugin "Create Block Theme" can you please do a tutorial on that .... I am trying your coding as snippets and plugin as a base - it works awesome. I am not a developer, learned everything from you till now

[@RaddyDev]

That's a great suggestion. I am on it 👊😎

[@jeremybiggs8413]

Hi Raddy, working through this and it looks like they’ve changed the behaviour of group blocks. First, when you enter a group, the behaviour is not the same as shown. It now asks you to select a layout with the text “gather blocks together in a container. Under settings the width and height of a block are missing with a message saying other settings can now be found under the styles tab…. Except there’s no styles tab! Any help with this?

[@RaddyDev]

Hey Jeremy, it has changed a little bit. The styles tab is right next to the Cog icon. It's a black and white circle. There are literally two tabs under "Block" - Settings and Styles. It should be there

[@leonardiux345]

😊

[@miraazulpiyal]

Please make a full wordpress theme development series.🙏🙏

[@RaddyDev]

I have started working on a new video. Do you have anything in mind?

[@sororbudwiser]

@@RaddyDev I would love to see a video on your methods and practices on developing a custom classic wordpress theme from scratch, especially programmatically in wordpress, without resorting to implementing the use of page builders and plugins (ACF free version would be the only plugin I would want/need). Hope this helps. This video is very helpful and informative for FSE.

[@sororbudwiser]

True true

[@hunghoang2278]

Nice! But the ads are a bit too much

[@RaddyDev]

I am with you, they can be a lot. KZbin places them automatically and the longer the video is the more they add. It's probably part of their strategy of pushing their premium subscriptions.