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
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 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
@@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.
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!
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: ruclips.net/video/PeLVu17c4MA/видео.html
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
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 🇵🇭
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.
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
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?
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?
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 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!
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
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).
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
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 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.
@@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/
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
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?
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
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?
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! :)
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?
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.
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: ruclips.net/video/PeLVu17c4MA/видео.html
@@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 😁
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.
@@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
@@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/
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?
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
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
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
@@realmranshuman Maybe you want to use an optimization tool, like WP Rocket?
@@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
@@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.
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!
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: ruclips.net/video/PeLVu17c4MA/видео.html
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.😊😊😊
Thank you for your kind words! 😊 You are awesome!
Are you sure to call someone God?
It could be master
I starts to learn gutenberg by seeing your videos. Its really good
This video was very helpful. Looking forward to your other woocommerce videos with gutenberg & the kadence theme.
so glad I found you! this is so much better than the generic elementor tutorials which slow down your site
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
Let me know the outcome 😊 Remember "Priority 9" that's the key.
wow excellent ... thank you very much . Your english is very clear 💙👍🙏
Thank you Jack this is just what I have been looking for! It’s taken me months to find it though!. I shall subscribe!!
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 🇵🇭
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.
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.
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
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?
Amazing! This is a great way to implement complementary products using hooked element
Never thought of that, but absolutely!
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?
This is crazy! Thanks for such an amazing review, I cant wait to try it!
Awesome! Hope you had the chance to try it by now. Apologies for my late response. 😊
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!
This is the how many times I read your mind? 5, 6? Haha! I'll keep increasing that number 😉
@@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!
Hi thanks for the video, where is the option for the sticky add to cart button ? I don't find it ?
Thanks
Amazing video. How do I make the product display box (block) smaller? Not the image per se, but the display.?
nice work Jack!
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
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).
I drink a shot every time he went HAEDER!
uau! thank you jack! always so valuable content! keep up the good work!
My pleasure! 😊
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
Great tutorial
you deserve million like
Thank you! You are good!
you’re a rock star! Thabk you for yet another fantastic video!
You are welcome! Hope you are doing great with your channel 😊
Can you make a tut about customizing the shop page with Gutenberg?
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?
you are MASTER !
Excellent video Jack!! Your tutorials have helped a lot in the project I'm doing.
Great to hear! Hope your project will come to fruition. 😊
Very Helpfull
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
Have you checked this: jackcao.com/postx
@@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.
@@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/
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
how to disable kadence search modal. when clicking to search product the open a one modal box please make the tutorial thanks
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?
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
@@JackCao Brilliant! Thanks so much ;o)
I already solved the issue I was having with my page, it seems like it was another woocommerce extension
Hi Jack could this kadence theme be used for a multivendor woocomerce platform?
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?
Amazing amazing amazing
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! :)
can i using this tutorial using blocksy pro theme
Of course you can. Just use the "content blocks". Works the same as Kadence's hooks.
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?
hey jack, appreciate your content. brother, why you stopped after 2 woocommerce videos?
I was busy with the hosting videos. Any particular area in woocommerce you wanna see? Category pages?
Can you tell woocommerce to not display a photo of the product.?
Hi Jack, where are you from?
just give us one complete how to customize in mobile view version for a whole websites..
Thank you
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.
The tutorial for this will be published in a couple of hours 😊
@@JackCao Thank you!! What's the title?
@@jejakmaknawi Here you go: ruclips.net/video/PeLVu17c4MA/видео.html
@@JackCao Thank you Jack
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 ?
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: ruclips.net/video/PeLVu17c4MA/видео.html
@@JackCao alright i will take a look. thank you for the quick response, much appreciated!
@@Nathan-mx8zx You are most welcome!
How do I add the hooks in Astra Pro? Thanks
Here you go: wpastra.com/docs/custom-layout-hooks/ 😁
@@JackCao That was fast. Thanks!
Please bro close this „Thanks for choosing the Kadence Theme!” info box!! 😭😭
My eyes are bleeding
Hello, that hooks have any impact on site performance?
Not at all! The site performance (if you check it on Google Page Speed Insights) comes from the images. Needa serve webp format.
@@JackCao Thanks for ur reply!
@@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 😁
do I need to have the pro versio and can it be done with the free version of woocommerce?
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.
@@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
@@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
@@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/
@@JackCao to be honest I just ignored the message and thats it, but if something happens then I will contact them
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?
Any free theme support this?
Unfortunately, I don't see any themes that offer "Hooked Elements" for free.
25:20 Russia in first line :D
😊😊😊
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
Please share with me a product page design with the UX you've mentioned, and I'll try to recreate it with Gutenberg.
i just have the free version for kadence
No Codes/No Plugins but a specific theme.....
As I said, you can use Blocksy, Generatepress or any themes that has a hook element function.
No code/No plugins - ok, you need to install Kadense theme, Kadense PRO plugins, Kadense blocks…