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

Рет қаралды 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

Пікірлер: 127

@JackCao 3 жыл бұрын

If you wish to change the background image for every single product page, please add this css code to your "Additional CSS" in the Kadence Theme customizer: .single-product.postid-12 .site { background-image: url(yourimageurl) !important; } The "12" from the above "postid-12" is specific to my site. Read this to find out the post id you are working on: pagely.com/blog/find-post-id-wordpress/ Remember to only change the "Number" not the "postid". Hope this helps! Jack

@camposjoao28 3 жыл бұрын

Jack thanks for this tutorial. I've followed along and everything looks fine except for the sticky add to cart button it inherited the element next to the add to cart button as well which makes it impossible to use. Other than that it's real amazing! Thanks

@JackCao 2 жыл бұрын

@@realmranshuman Maybe you want to use an optimization tool, like WP Rocket?

@akindia8519 2 жыл бұрын

@@JackCao hey thanks for the amazing vid. I have numerous product pages on my site, can I have completely different structure for every product page(completely different from one another)... I use elementor but it'd allow changes only on basis of category and not to extend of the exact product itself

@JackCao 2 жыл бұрын

@@akindia8519 Yes, you can. To create multiple product designs, you can create multiple custom hooks and hook them to the specific product page as you desire.

@allanknudsen2616 2 жыл бұрын

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!

@JackCao 2 жыл бұрын

Thanks for popping back to watch my stuff! 😊 Have you watched this too? I turned this Single Product page into a template to be used for other products: kzfaq.info/get/bejne/hst8idhinMmYfXU.html

@dipakshah3778 3 жыл бұрын

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.😊😊😊

@JackCao 2 жыл бұрын

Thank you for your kind words! 😊 You are awesome!

@mereramkrishna Жыл бұрын

Are you sure to call someone God? It could be master

@user-hp6iu4ol2i 10 ай бұрын

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

@GregoryKohlhof 3 жыл бұрын

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

@ajayalath Жыл бұрын

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

@michaelvaughan2888 2 жыл бұрын

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

@freekrider803 3 жыл бұрын

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

@mymariemarie33 Жыл бұрын

Thank you! You are good!

@chrismaddox3d 3 жыл бұрын

This adds so much more to using Kadence Pro which I have owned since last summer and never used these features yet, will try this on some of my product pages soon, great video keep them coming, Thanks

@JackCao 3 жыл бұрын

Let me know the outcome 😊 Remember "Priority 9" that's the key.

@lisaerez 2 жыл бұрын

Great tutorial

@joietan7983 3 жыл бұрын

Amazing! This is a great way to implement complementary products using hooked element

@JackCao 3 жыл бұрын

Never thought of that, but absolutely!

@soymikedelgado 3 жыл бұрын

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

@JackCao 2 жыл бұрын

Awesome! Hope you had the chance to try it by now. Apologies for my late response. 😊

@luiscarlodino2466 3 жыл бұрын

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 🇵🇭

@ahmedali-bu8ms 11 ай бұрын

you are MASTER !

@faithnomore101 3 жыл бұрын

I learned 90% of what i know about WP from you and its astonishing how good your content ist for a small youtuber with just 8k follower. You are in the same league as some 1m+ youtubers. If you nail it at the big WP update next month your channel could skyrocket.

@JackCao 3 жыл бұрын

This means a lot to me! I sincerely want to thank you for your kind words and suggestion! I will keep a look out for the next WP update.

@coremarket976 3 жыл бұрын

Hey speed junkie 😉, I have been struggling with speed optimization and am glad i found your videos. I implemented what i learnt, although took me time cos i'm use to page builder so i had to learn gutenberg in 3 days and redesign the website and i have 95 for mobile and 100 for desktop. Thanks to you. If you can make a more complex tutorials cos most of my website using dynamic contents, I will appreciate it

@JackCao 3 жыл бұрын

Glad that my content helped, and congrats for moving over to Gutenberg and achieving great results on Page Speed. You ask just at the right time! I am working on dynamic content. Can I ask what would you like to see in dynamic content? Like creating templates to be distributed to the entire site or do you have something else in mind?

@alanvo4037 3 жыл бұрын

I drink a shot every time he went HAEDER!

@MichaelFidelis 3 жыл бұрын

nice work Jack!

@DavidStavegard 3 жыл бұрын

you’re a rock star! Thabk you for yet another fantastic video!

@JackCao 3 жыл бұрын

You are welcome! Hope you are doing great with your channel 😊

@thesachinbhatt 3 жыл бұрын

Very Helpfull

@MohamedElSayed-vd7dc 3 жыл бұрын

you deserve million like

@LuccaPonce 2 жыл бұрын

Amazing amazing amazing

@imdurgeshpratap 3 жыл бұрын

Brilliant tutorial and Beautiful design.. As always 👍🏻👍🏻 Does woocommerce affect page load speed? Read this on blogs and If so, how to boost page load speed using woocomerce? Any idea

@JackCao 3 жыл бұрын

If you use Woocommerce Gutenberg Blocks, it may affect site speed as it draws information from your database using javascripts. But woocommerce pages, by itself, do not slow down your site. I will be creating this website into a full blown ecommerce store, and after that, I will talk about the speed optimization. Technically, the page speed problem I have for this page currently (on Google page speed insights) is the "serve next gen image format" which is easy to optimize (using Imagify).

@m_reis 3 жыл бұрын

uau! thank you jack! always so valuable content! keep up the good work!

@JackCao 3 жыл бұрын

My pleasure! 😊

@PilatesinSacramento 3 жыл бұрын

Fantastic, Jack! I agree. I saw the very good video on wpcrafter and wondered why WooCommerce doesn’t just have this functionality and when it would be added. Thank you for once again reading my mind!

@JackCao 3 жыл бұрын

This is the how many times I read your mind? 5, 6? Haha! I'll keep increasing that number 😉

@PilatesinSacramento 3 жыл бұрын

@@JackCao yeah. Something like that! I’ve always thought it was strange that the woo product page is pretty much fixed. Apparently, you did too. Love your channel!

@jorgeyanez2142 2 жыл бұрын

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

@TiagoDezan 3 жыл бұрын

Excellent video Jack!! Your tutorials have helped a lot in the project I'm doing.

@JackCao 3 жыл бұрын

Great to hear! Hope your project will come to fruition. 😊

@pellekarlsson152 2 жыл бұрын

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?

@freekrider803 3 жыл бұрын

hi jack i want to know and learn about mobile responsive gutenberg complete website tutorial and i searched in youtube also there is a lots of confusion can u pls make it complete full westie with mobile customizing video for us, because you doing great job in gutenberg editor

@benatiamarketing476 Жыл бұрын

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

@dots560 3 жыл бұрын

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?

@dougbeggs3832 3 жыл бұрын

So the black textured background image that you used in this product would have to be the same background in any other single product pages in the web site?

@JackCao 3 жыл бұрын

Hi Doug, sorry for my late response. You can change the background image for specific single product page. Please add this css code to your "Additional CSS" in the Kadence Theme customizer: .single-product.postid-12 .site { background-image: url(yourimageurl) !important; } The "12" from the above "postid-12" is specific to my site. Read this to find out the post id you are working on: pagely.com/blog/find-post-id-wordpress/ Remember to only change the "Number" not the "postid". Hope this helps! Jack

@dougbeggs3832 3 жыл бұрын

@@JackCao Brilliant! Thanks so much ;o)

@serpantinthewild 2 жыл бұрын

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

@shaolin60 3 жыл бұрын

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

@hashimnaushahi 3 жыл бұрын

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?

@honeywp765 Жыл бұрын

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

@AV-jz6wr 3 жыл бұрын

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! :)

@TFGourmet 3 жыл бұрын

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

@tjain90 2 жыл бұрын

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

@JackCao 2 жыл бұрын

Have you checked this: jackcao.com/postx

@tjain90 2 жыл бұрын

@@JackCao thanks Jack. But again this is highly paid plugin and most of the features are already in kadence pro theme and block. I have already purchased them. Can you suggest any free plugin or paid at nominal cost for ajax search and faq block on product page.

@JackCao 2 жыл бұрын

@@tjain90 I haven't tried this but there are a lot of good reviews. Can you try ot and let me know if it is good? wordpress.org/plugins/ajax-search-lite/

@kisarobert2 2 жыл бұрын

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

@Spyze 3 жыл бұрын

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

@freekrider803 3 жыл бұрын

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

@alishehryar302 2 жыл бұрын

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

@JackCao 2 жыл бұрын

I was busy with the hosting videos. Any particular area in woocommerce you wanna see? Category pages?

@victoitor 3 жыл бұрын

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 3 жыл бұрын

can i using this tutorial using blocksy pro theme

@JackCao 3 жыл бұрын

Of course you can. Just use the "content blocks". Works the same as Kadence's hooks.

@jayplatt8798 2 жыл бұрын

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

@AteekSheikh 3 жыл бұрын

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?

@user-uk3yp5mc5v 2 жыл бұрын

Hi Jack, where are you from?

@videoeventjakarta 3 жыл бұрын

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.

@JackCao 3 жыл бұрын

The tutorial for this will be published in a couple of hours 😊

@videoeventjakarta 3 жыл бұрын

@@JackCao Thank you!! What's the title?

@JackCao 3 жыл бұрын

@@videoeventjakarta Here you go: kzfaq.info/get/bejne/hst8idhinMmYfXU.html

@videoeventjakarta 3 жыл бұрын

@@JackCao Thank you Jack

@Nathan-mx8zx 2 жыл бұрын

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 ?

@JackCao 2 жыл бұрын

It should work on the Neve theme, but you will need Kadence Blocks Pro to get the dynamic content. To make the template, check this out. Just replace the section with "Hooked Elements" with what the Neve theme has: kzfaq.info/get/bejne/hst8idhinMmYfXU.html

@Nathan-mx8zx 2 жыл бұрын

@@JackCao alright i will take a look. thank you for the quick response, much appreciated!

@JackCao 2 жыл бұрын

@@Nathan-mx8zx You are most welcome!

@kevinschmidt2210 3 жыл бұрын

How do I add the hooks in Astra Pro? Thanks

@JackCao 3 жыл бұрын

Here you go: wpastra.com/docs/custom-layout-hooks/ 😁

@kevinschmidt2210 3 жыл бұрын

@@JackCao That was fast. Thanks!

@Xris1910 3 жыл бұрын

Hello, that hooks have any impact on site performance?

@JackCao 3 жыл бұрын

Not at all! The site performance (if you check it on Google Page Speed Insights) comes from the images. Needa serve webp format.

@Xris1910 3 жыл бұрын

@@JackCao Thanks for ur reply!

@Xris1910 3 жыл бұрын

@@JackCao is there a better way to create that type of advanced product page with gutenberg? I turned on gutenberg editor on woocommerce product page and it changed my life 😁

@ravindug 3 жыл бұрын

Any free theme support this?

@JackCao 3 жыл бұрын

Unfortunately, I don't see any themes that offer "Hooked Elements" for free.

@shaolin60 3 жыл бұрын

25:20 Russia in first line :D

@TFGourmet 3 жыл бұрын

do I need to have the pro versio and can it be done with the free version of woocommerce?

@JackCao 3 жыл бұрын

Woocommerce is free, but if you want to use the method I've mentioned (hooked elements), you would need the Kadence Pro Theme. I haven't seen any themes that provides the "Hooked" elements for free. If you want the free method, you can try the method taught by Adam and John from WP Crafter (link in description). It requires you to add some codes to your PHP file.

@TFGourmet 3 жыл бұрын

@@JackCao thanks for the reply, been following you for quite a time now, and really like your tutorials, everything is so simple and easy to follow

@TFGourmet 3 жыл бұрын

@@JackCao Ok Im scared because I purchased the Kadence pro but... it is showing me a yellow message "The Gutenberg plugin is not recommended for use in a production site. Many things may be broken by using this plugin. Please deactivate." whats that now? :S

@JackCao 3 жыл бұрын

@@TFGourmet Are you using a page builder? Can you send a support ticket to Kadence and request them to take a look at your site? www.kadencewp.com/premium-support-tickets/

@TFGourmet 3 жыл бұрын

@@JackCao to be honest I just ignored the message and thats it, but if something happens then I will contact them

@ivanevsukov558 2 жыл бұрын

😊😊😊

@vwtourandtransportbali6555 3 жыл бұрын

i just have the free version for kadence

@pomade34 3 жыл бұрын

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

@JackCao 3 жыл бұрын

As I said, you can use Blocksy, Generatepress or any themes that has a hook element function.

@pixa2788 2 жыл бұрын

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

@JackCao 2 жыл бұрын

Please share with me a product page design with the UX you've mentioned, and I'll try to recreate it with Gutenberg.

@WPSoul 3 жыл бұрын

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

@eineririarte3211 3 жыл бұрын

Very good morning, excellent content, sorry I have a big question, today I make my website with guteber and astras, but I would like to be able to take the design that I have created to another website or to be able to distribute that website so that it can be installed on other servers with the content already included, do you know any effective method? to be able to distribute that theme already installed with its sample content? thanks for your answer

@JackCao 3 жыл бұрын

This is going to be the next video on my channel. I need this to functionality too, so its time for me to do some research. Stay tuned 😀

@hermj 3 жыл бұрын

@@JackCao @Jack Cao It looks like this may be a good candidate for the Kadence Cloud plugin -- your channel is 1st rate, by the way.

@eineririarte3211 3 жыл бұрын

@@JackCao Thank you very much for your answer, I will tell you about my experiences, if you do not mind, initially I got the all in one plugins, but it must be installed in the other wordpress to be able to export all the content of the site including the theme, elements if it allows exporting with their layout, but the ideal would be to see a way to distribute your content and theme in a zip, which can only be uploaded and that's all, well that's what I think, but it's excellent that you can investigate and see what results you get, Thanks Jack

@JackCao 3 жыл бұрын

Thank you for your kind comment! Great suggestion on Kadence Cloud! I think I should upload all the templates I've created and share them. I will do so soon.

@JackCao 3 жыл бұрын

Hi Einer, I've watched a couple of videos about site migration and I think the challenge with migrating a site with a zip file is the differeny structure and file manager setup of each web host. If all web host are using cPanel, it makes life much easier, but some hosts don't. Plus, the default PHP version of each server may differ, and if you use the FTP method, there is no telling if the versions match, that's until you see the final product. Can I ask if there are difficulties using the All-in-one migrator? I haven't used it myself, but it seems to be really easy to use. It is just installing the same plugin on both domains and they will work.