Kadence Pro Tutorial: Customize Woocommerce Single Product Page with Gutenberg Editor

Kadence Pro Tutorial: Customize Woocommerce Single Product Page with Gutenberg Editor

Jack Cao

3 года назад

21,567 Просмотров

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-product-page

🔔 Subscribe for more WordPress Related Content: https://jackcao.com/subscribe​​

📺 Activate Gutenberg Block Editor on Woocommerce Single Product Page:
✔ Adam & John from WP Crafter: https://youtu.be/SaPdeKlqf1o
✔ Paul from WPTuts: https://youtu.be/xJnhrmjqhTA


⌚ 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: https://youtu.be/p_kdgKpv_js​
✅ Will Multiple Gutenberg Blocks Slow Down WordPress Site: https://youtu.be/dPaXh0CLimc
✅ Site Speed Case Study: https://youtu.be/INvxYNH9gKk​​​
✅ Build a Fast Loading Home Page: https://youtu.be/j8-cmbH7n14​​​
✅ Improve Site Speed (9 tips): https://youtu.be/TBWeflLPuJQ​​
✅ Build a Lead Capture Page with Gutenberg Blocks: https://youtu.be/n2Hqlea0RMo

__________________________________________________________________________

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​​

Тэги:

#woocommerce_product_page #woocommerce_custom_product_page #woocommerce_product_page_template #customize_woocommerce_product_page #woocommerce_single_product_page_customizer #woocommerce_tutorial #woocommerce_gutenberg_editor #woocommerce_gutenberg_products_block #wordpress_gutenberg_woocommerce #woocommerce_gutenberg_block #woocommerce_gutenberg_theme #woocommerce_tutorial_2021 #woocommerce_single_product_page #how_to_create_custom_product_page_in_woocommerce
Ссылки и html тэги не поддерживаются


Комментарии:

@user-hp6iu4ol2i
@user-hp6iu4ol2i - 22.10.2023 03:36

Thank you Jack this is just what I have been looking for! It’s taken me months to find it though!. I shall subscribe!!

Ответить
@ahmedali-bu8ms
@ahmedali-bu8ms - 26.08.2023 15:21

you are MASTER !

Ответить
@ajayalath
@ajayalath - 30.05.2023 03:43

wow excellent ... thank you very much . Your english is very clear 💙👍🙏

Ответить
@honeywp765
@honeywp765 - 02.03.2023 15:34

how to disable kadence search modal. when clicking to search product the open a one modal box please make the tutorial thanks

Ответить
@benatiamarketing476
@benatiamarketing476 - 29.01.2023 16:52

Hi thanks for the video, where is the option for the sticky add to cart button ? I don't find it ?
Thanks

Ответить
@mymariemarie33
@mymariemarie33 - 06.12.2022 04:04

Thank you! You are good!

Ответить
@michaelvaughan2888
@michaelvaughan2888 - 20.08.2022 23:48

so glad I found you! this is so much better than the generic elementor tutorials which slow down your site

Ответить
@ivanevsukov558
@ivanevsukov558 - 19.07.2022 02:03

😊😊😊

Ответить
@jorgeyanez2142
@jorgeyanez2142 - 03.06.2022 01:01

Amazing video. How do I make the product display box (block) smaller? Not the image per se, but the display.?

Ответить
@user-uk3yp5mc5v
@user-uk3yp5mc5v - 01.05.2022 16:24

Hi Jack, where are you from?

Ответить
@lisaerez
@lisaerez - 17.03.2022 13:17

Great tutorial

Ответить
@jayplatt8798
@jayplatt8798 - 28.01.2022 23:25

Can you tell woocommerce to not display a photo of the product.?

Ответить
@alishehryar302
@alishehryar302 - 20.11.2021 12:37

hey jack, appreciate your content. brother, why you stopped after 2 woocommerce videos?

Ответить
@LuccaPonce
@LuccaPonce - 15.11.2021 04:57

Amazing amazing amazing

Ответить
@kisarobert2
@kisarobert2 - 13.11.2021 05:25

Hi Jack could this kadence theme be used for a multivendor woocomerce platform?

Ответить
@chrisgx2788
@chrisgx2788 - 10.11.2021 17:37

It is sure that the display is fast but it is very basic for a store. Very far from the standards of a site of 2021.
Attracting people to a site is not everything, it's the customer experience that makes them convert.
With Gutenberg, we're still far from what we can get with a builder

Ответить
@pellekarlsson152
@pellekarlsson152 - 05.11.2021 00:16

Great video Jack! please can you do a tutorial how to build a woocomerce website from scratch with kadence block or any other free gutenberg page builder?

Ответить
@Nathan-mx8zx
@Nathan-mx8zx - 16.10.2021 12:44

Does it also work with the neve Theme ? And is there a way to make a template for product page so you don't have to make it every time ?

Ответить
@serpantinthewild
@serpantinthewild - 14.10.2021 09:33

Can you make a tut about customizing the shop page with Gutenberg?

Ответить
@tjain90
@tjain90 - 17.09.2021 11:19

Thanks Jack. Also, kadence do not have ajax search, which is the best free or paid plugin you suggest for ajax search. Which will be fast enough and won't impact Gutenberg performance

Ответить
@allanknudsen2616
@allanknudsen2616 - 14.09.2021 21:12

Man, I've been so busy setting up my shop that I haven't had the time to watch your new YT stuff. I wish I had done it the other way around. Great Stuff!

Ответить
@soymikedelgado
@soymikedelgado - 03.09.2021 10:18

This is crazy! Thanks for such an amazing review, I cant wait to try it!

Ответить
@dipakshah3778
@dipakshah3778 - 01.09.2021 19:06

You are the God of Gutenberg tutorials. I don't have any words to describe this awesome tutorial. Please keep on doing this kind of superb video.😊😊😊

Ответить
@dots560
@dots560 - 21.08.2021 09:34

Wow. Amazing stuff. Thank you for sharing.

Is there a way to link specifications to perhaps a custom field so it's automated across all products?

Ответить
@WPSoul
@WPSoul - 17.08.2021 11:14

No code/No plugins - ok, you need to install Kadense theme, Kadense PRO plugins, Kadense blocks…

Ответить
@AteekSheikh
@AteekSheikh - 12.08.2021 09:34

Hello Jack!
Question: Do we've to customize each product page if we've more than a single product?
And
Can we customize some products pages which are selling better and keep the others as default woocommerce?

Ответить
@MohamedElSayed-vd7dc
@MohamedElSayed-vd7dc - 10.08.2021 19:46

you deserve million like

Ответить
@vwtourandtransportbali6555
@vwtourandtransportbali6555 - 06.08.2021 14:40

i just have the free version for kadence

Ответить
@Spyze
@Spyze - 05.08.2021 16:50

Please bro close this „Thanks for choosing the Kadence Theme!” info box!! 😭😭

My eyes are bleeding

Ответить
@alanvo4037
@alanvo4037 - 04.08.2021 13:36

I drink a shot every time he went HAEDER!

Ответить
@pomade34
@pomade34 - 02.08.2021 22:08

No Codes/No Plugins but a specific theme.....

Ответить
@shaolin60
@shaolin60 - 01.08.2021 00:37

Hi Jack, did you ever used Kadence woocommerce siteorigin builder?

Ответить
@luiscarlodino2466
@luiscarlodino2466 - 28.07.2021 16:07

Hello, Jack! Thank you for this tutorial; it is extremely helpful. I am looking forward to your next tutorial on how to use woocommerce with multiple product using Gutenberg. Kudos, From Philippines 🇵🇭

Ответить
@videoeventjakarta
@videoeventjakarta - 28.07.2021 14:32

Hey thank you for this tutorial video.

If I have 10 different items.

Can I create a template of the layout of the single product page? So I can just change the necessary information such as product info, specifications, dimensions etc for other product

and how?

Thanks again.

Ответить
@kevinschmidt2210
@kevinschmidt2210 - 28.07.2021 06:35

How do I add the hooks in Astra Pro? Thanks

Ответить
@rainbowsunshinekitty3953
@rainbowsunshinekitty3953 - 27.07.2021 21:50

Wow! Excellent job! I use Blocksy with Gutenberg but this info is priceless! Thank you!

Ответить
@indobo3678
@indobo3678 - 23.07.2021 04:52

Yu say No Plugin but yu using extra plugin LOL

FUKK YUR TITLE VIDEO 😅🤣

Ответить
@victoitor
@victoitor - 20.07.2021 03:59

What about client product customization? Things like having the client uploading a custom image file or sending a custom text for product customization. How would you do this? What is the most efficient way of doing this?

Ответить
@farhanzakyme
@farhanzakyme - 19.07.2021 15:56

can i using this tutorial using blocksy pro theme

Ответить
@pavelgrishin
@pavelgrishin - 18.07.2021 02:20

This is crazily valuable info!!! Without you, I would give up on Gutenberg!! Thank you a lot !!!

Ответить
@shaolin60
@shaolin60 - 20.06.2021 10:06

Good day Jack!

How you would update new design for existing website, in case you want to change all frontend to give fresh breath but want inherit database (woo products, links etc).
From clean installation by export import products or staging installation? Do you have such an experience?

I think about make staging copy on existing website,
delete every old plugins and themes
install for instance kadence
Customize new look for old shop

Ответить
@TFGourmet
@TFGourmet - 20.06.2021 01:38

I already solved the issue I was having with my page, it seems like it was another woocommerce extension

Ответить
@MichaelFidelis
@MichaelFidelis - 19.06.2021 05:06

nice work Jack!

Ответить
@hashimnaushahi
@hashimnaushahi - 14.06.2021 18:32

Great video! I learned a lot from and you've got a great way of teaching. I subscribed to your channel and will keep following your stuff.
One quick question...
Is it possible to create an element for the accordions that will be shown on all products of a webshop with the same headings for all products and have the content per heading dynamically filled in from data that's in the product settings?

Ответить
@GregoryKohlhof
@GregoryKohlhof - 14.06.2021 16:56

This video was very helpful. Looking forward to your other woocommerce videos with gutenberg & the kadence theme.

Ответить
@AV-jz6wr
@AV-jz6wr - 10.06.2021 16:42

Hi Jack, thank you for the great videos! Would you please make a video on making your website multilingual? Because I have been reading on this topic and there are no free options for Gutenberg blocs and only paid. But I would love to know from you if there are any free ones and which paid ones are the most optimized and fastest. Plus I think it would be a great video for viewers and I would be happy to use your affiliate link if there is one! Let me know what you think! :)

Ответить
@freekrider803
@freekrider803 - 09.06.2021 21:18

just give us one complete how to customize in mobile view version for a whole websites..
Thank you

Ответить
@freekrider803
@freekrider803 - 09.06.2021 21:17

I starts to learn gutenberg by seeing your videos. Its really good

Ответить