Рет қаралды 22,002
Here's how to customize woocommerce single product page with Gutenberg Block Editor without adding any codes or unneccessary plugins. The only thing you need is a WordPress theme that provides the Hooked Element Feature. Here are the themes that have this Hooked Element Feature (For this tutorial, I am using the Kadence Pro Theme):
👉 Kadence: jackcao.com/ka... (10% OFF: JCSAVE10)
👉 Generatepress: jackcao.com/ge...
👉 Astra WP: jackcao.com/astra
👉 Blocksy: jackcao.com/bl... (10% OFF: JCBLOCKSY)
🔗 Download Images Used in Tutorial: jackcao.com/do...
🔔 Subscribe for more WordPress Related Content: jackcao.com/su...
📺 Activate Gutenberg Block Editor on Woocommerce Single Product Page:
✔ Adam & John from WP Crafter: • How To Design Awesome ...
✔ Paul from WPTuts: • WooCommerce Product Pa...
⌚ Chapters (Time Stamps):
0:00 Introduction
0:58 Woocommerce Single Product Page we are going to build
2:56 Installing the Kadence Theme, Required Plugins & Woocommerce
3:22 Installing the WordPress Theme
3:49 Installing and setting up the necessary WordPress plugins
4:51 Install and set up the Woocommerce store
5:56 Adding a Woocommerce Product from Scratch
6:53 Adding Product Attributes & Variations
9:31 Adding Product Images
10:05 Adding Stock Quantity
10:42 Customizing the Header Section of the Single Product Page
10:53 Setting the Global Color Palette (Kadence Theme)
12:54 Adding a Logo on the Kadence Theme
13:32 The Importance of Changing the Site Title and Tag Line
14:10 Shifting and adding elements of the Header
14:36 Adding a Menu
18:28 Customizing Woocommerce Options from the Kadence Pro Theme
21:49 Adding a Product Accordion
27:34 Customize Single Product Page with Gutenberg Blocks using Hooked Elements
41:34 Optimizing the Single Product Page for Mobile Users
44:56 Adding and Removing the Woocommerce Product Tabs on Demand
47:27 Outro
📽 More Helpful Videos:
✅ 11 Gutenberg Block Plugins: • Top 11 Gutenberg Block...
✅ Will Multiple Gutenberg Blocks Slow Down WordPress Site: • Will Multiple Gutenber...
✅ Site Speed Case Study: • Case Study: Speed Up W...
✅ Build a Fast Loading Home Page: • Build a Fast Loading H...
✅ Improve Site Speed (9 tips): • How to Speed Up Your W...
✅ Build a Lead Capture Page with Gutenberg Blocks: • How to Create a Lead C...
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#woocommerce #woocommercetutorial #customproductpage #jackcao #woocommercegutenberg #kadencetutorial #gutenberg #gutenbergtutorial #kadenceprotheme #wordpress