Kadence Pro Tutorial: Customize Woocommerce Single Product Page with Gutenberg Editor
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: https://jackcao.com/kadence (10% OFF: JCSAVE10)
👉 Generatepress: https://jackcao.com/generatepress
👉 Astra WP: https://jackcao.com/astra
👉 Blocksy: https://jackcao.com/blocksy (10% OFF: JCBLOCKSY)
🔗 Download Images Used in Tutorial: https://jackcao.com/download/woo-prod...
🔔 Subscribe for more WordPress Related Content: https://jackcao.com/subscribe
📺 Activate Gutenberg Block Editor on Woocommerce Single Product Page:
✔ Adam & John from WP Crafter: • How To Design Awesome Product Pages W...
✔ Paul from WPTuts: • WooCommerce Product Page Design with ...
⌚ 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 Plugins That W...
✅ Will Multiple Gutenberg Blocks Slow Down WordPress Site: • Will Multiple Gutenberg Blocks Slow D...
✅ Site Speed Case Study: • Case Study: Speed Up WordPress Websit...
✅ Build a Fast Loading Home Page: • Build a Fast Loading Home Page from S...
✅ Improve Site Speed (9 tips): • How to Speed Up Your WordPress Websit...
✅ Build a Lead Capture Page with Gutenberg Blocks: • How to Create a Lead Capture Page in ...
__________________________________________________________________________
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
Смотрите видео Kadence Pro Tutorial: Customize Woocommerce Single Product Page with Gutenberg Editor онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Jack Cao 02 Июнь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 22,38 раз и оно понравилось 66 людям.