[New Kadence Tutorial] How to Create Custom WooCommerce Product Pages With Kadence Shop Kit
Vložit
- čas přidán 30. 07. 2024
- Resources included! In this video, you will learn how to create custom WooCommerce product pages with Kadence and Kadence Shop Kit. Kadence Shop Kit is a pro plugin in the KadenceWP suite of products that allows you to extend your WooCommerce WordPress e-commerce website with 15 powerful modules with varying functionalities. This in-depth tutorial will cover ways to customize your product pages, create completely custom product pages, add more style to your variable products and much more.
You can add Kadence Shop Kit to any Kadence plus WooCommerce website. I have included a link to my earlier tutorial that shows how to create a custom e-commerce website with Kadence. I use this website to illustrate the capabilities of Kadence and Kadence Shop kit. That being said, you can follow along using your own Kadence website or a Starter Template if you like.
I have also included download links to the images I used in the tutorial in the event you want to replicate what I have done.
Timestamps and resources are below!
Enjoy!
Tutorial Resources
Dress Images: cliftonwp.com/dress-images
[Video] Kadence Tutorial: How to Create an E-commerce Website in WordPress with Kadence.
• Kadence Tutorial: How ...
Want to customize the WooCommerce Product Category Pages?
Watch this: • [Kadence Tutorial] How...
Timestamps:
0:00 Intro: How to Create Custom WooCommerce Product Pages with Kadence Shop Kit
01:25 Overview: Getting Started
02:18 Where to get Kadence Shop Kit
05:04 Custom product pages with Kadence Shop Kit Overview
08:56 How to create simple products in WooCommerce with galleries
14:37 How to create a variable product in WooCommerce
21:48 How to install Kadence Shop Kit
22:43 How to enable variation swatches in Kadence Shop Kit
24:36 How to enable product galleries in Kadence Shop Kit
27:03 How to enable Woo Templates in Kadence Shop Kit
32:14 How to create a custom WooCommerce Template with Kadence Shop Kit
36:16 How to build a custom product page template from scratch using Woo Templates in Kadence Shop Kit
1:27:18 How to add video to your product galleries
1:28:54 Conclusion and Thank you
🙏SUPPORT & THANK YOUS?
✅ Buy me a Coffee - www.buymeacoffee.com/cliftonw...
✅ Leave a Super Thanks in CZcams Comments
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Kadence Shop Kit - cliftonwp.com/kadence
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadence #kadenceshopkit #kadencepro #kadencetutorials
![🔥[NEW!] The Ultimate Kadence FREE & PRO Deep Dive Guide for Beginners [Updated for 2023!]🔥](http://i.ytimg.com/vi/ZWavuOtC5Yw/mqdefault.jpg)
![🔥[NEW!] The Ultimate Kadence FREE & PRO Deep Dive Guide for Beginners [Updated for 2023!]🔥](/img/tr.png)
![[Kadence Tutorial] How to Customize WooCommerce Product Category Pages with Kadence](/img/n.gif)
Thank you for coming back again. Been missing the precious rich content materials, the voice and the man behind that. Thanks for giving us something new and interesting to learn in a simplified form and approach. You are the Greatest & the Best!
Thank you Charlie! I appreciate you! I'm working on several Kadence tutorials that you will enjoy. I look forward to teaching some more awesome tutorials and uploading more frequently. Thank you so much for watching!
@@CliftonWP Thank you for the assurance and hope that you are always there for us and will always be. Looking forward to what's coming next, and next, and next ...!!! Always enjoying your materials. Thanks Sir.
Boom! Just like that. 🎉😊 An updated YT vid would be awesome. Also, one thing that I think could be covered is product filtering in categories because that is something that lots of ppl need and I beleive is a benefit of Shop Kit. (I don't think you went over it in the other video on categories).
Our man is back. I have been missing your tutorials. Best teacher ever and thank you for the content you make. It reinforces my love for Kadence. I have a suggestion. Could you make a tutorial using the same design and convert it to a multivendor WooCommerce platform. There are no tutorials on how to use blocks (Kadence) to create a multivendor platform. If you could make one, that would be great. God bless
Wow, thanks! I''ll look into the multivendor combo with Kadence.
You are an A-M-A-ZING teacher. Thank you Clifton.
Thank you Cindy! I really appreciate you watching the video!
i love your tutorials! best professor ever!
Thank you so much Naya! I appreciate you!
You're such a good teacher! Very clear instruction. Thanks so much for this.
Thank you so much Beth! I appreciate you watching!
Clifton, congrats on getting featured in the Kadence newsletter that came out onThursday!!!
Thank you Marian! That was a pleasant surprise! I am honored and humbled. 🙂
@@CliftonWP Good content deserves to be shared. Thanks for doing such a great dive into Shop Kit!
@@KadenceWP Thank you, Thank you, Thank you so much!!!🙏🙏🙏
we need more of your magic again. I think there's a 2.0 version out.
Great tutorial. I have watched many videos including the one made by the Kedence team but I could not appreciate or like Kedence. Watching your tutorial made me know what kedence and Gutenberg are. Really great step-by-step tutorial with no assumptions.
Thank you very much! I appreciate you watching and glad you found it helpful!
Thank you! Lots of value in this video.
Thank you Marcos! Glad you got value from the video! More to come!
Excellent, thank you so much for this. It's been really hard to find info on what exactly we can do to customize the product pages in WooCommerce. This helps a lot!
You're very welcome! I appreciate you watching!
I love your tutorial so much!
Thank you so much! I appreciate you watching!
Great video and well explained. I have a couple of questions. I assume that the option on single product page where the 'add to cart' is sticky is only available when you create a template from scratch? I'm not sure I need to customise a standard look that much but would like the sticky option.
Thank you very much. This is a great lesson! I learned and understood a lot.
Thank you!
Thank you, Clifton!!!
You are very welcome! Thank you Steve!
Excellent tutorial!
Thank you!
Thanks for a great tutorial. Much appreciated.
Thank you! I appreciate you watching!
@@CliftonWP your tutorials are soo good. I'm building my website now with kadence by following along with your tutorials. My site is starting to look good and it wouldn't be anywhere as pro looking without these tutorials. Your tutorials have been invaluable+++. You should seriously consider making a Udemy course. Thanks again Clifton.
hi Clifton! Your videos really helped me to start working with kadence. I just customized a single product page but I am missing the DOKAN OTHER SELLERS module that appears on the default single product page and I can't find anywhere how to manually put it there.. any ideas? Thanks
Hey Clifton. I notice that WooTemplates doesn't have the standard hooks, therefore only the "sale" badge appears. Is there a work around so I can use other badges like "SOLD OUT" etc. This is very important to me! I'm asking you this because your knowledge of shopkit is excellent. I must say your teaching style is fab.
Hi Clifton thank you very much for the video tutorial, could you make a tutorial on how to edit product catalog loop item please. Thank you very much, greetings from Colombia.
Truly amazing tutorial. I like the part where you made the right section sticky. I created similar template only the left side (gallery) sticky. It looks fine and how I want it on desktop and tablet. In mobile view the gallery is also sticky which I don’t want it to be. How did you manage to make the right section sticky only for desktop only?
Your elaborating is much appreciated
Thank you! You can disable the sticky feature for mobile in the settings.
can these templates be universal? Automatic added to all product in woocommerce
Great tutorial and just what I needed! I noticed that when paypal is integerated on a website it shows on nomal product pages but it doesnt when you create a custom page, is there a workaround this?
Thank you Andy! I appreciate you watching. 🙂I am not sure I understand what you mean. Are you saying that the paypal icon is not showing on your custom product page? If you include a link, I can check it out. Thanks again!
@@CliftonWP My site is still in development mode so cant provide the link yet but basically I have enabled the paypal button in woocommerce to show on single product page and it shows on single product pages that are not custom made but it doesnt show on custom made single product pages. Hope that makes sense? Thanks again for your wonderful tutorial 😊
Hi Clifton. Question: Any idea on how to style the background and font color for the Cart and Checkout page title area? Was able to do this for the Shop page but not seeing a template option for the others. Thanks!!!!!!
Hi Steve! Typically, the Cart and Checkout page will adopt any styling that you have for the Page Titles within the customizer. However you can create specific Title areas for the Cart and Checkout page directly by doing directly in the pages. I'll most likely do a tutorial on this method this week. :-)
Thank you!
Hi, do you know of a way to have variation images under the main product image in the product catalogue?
I dont think the kadence theme or shop kit has this feature, but it is in some themes like flatsome, would it be possible to use shop kit with other themes like flatsome?
Thank you Brian! Very interesting question. This feature is currently not in Kadence and can be achieved with some custom coding.
@@CliftonWP Do you know how to code it? I don't :)
Can I use that kit to just create affiliate posts and clickable links? I am not a fan of woo-commerce.
Can This Kadence Shop Kit also let you make a customized Shop Page or Categories Page to find, filter, and search for products?
Thank you David! Yes it does! I cover how in this video: czcams.com/video/ZMAGYsPdr-k/video.html
Shopkit 2.0 looks great as you build and demo it on desktop, but how does it hold up on mobile? 80 percent of shoppers tend to be on mobile these days...
I'm using Shop kit as well. In combination with the Kadence theme, you can easily adjust everything for mobile viewport. Cheers
Thank you David! Shop kit 2.0 looks great on mobile devices!
@@CliftonWP Fantastic, I'm playing with it on staging now... please keep up the great work on your Kadence videos! they are very much needed from your fans!
@@davidscott2841 Thank you so much and I appreciate your support!
Nice tutorial, rather than adding HTML isn't it better and simpler just to add the "safe checkout" section as an image? It will also be on the same line on mobile... Just a thought
Thank you Shai-li! Yes, you are right! It may be simpler to do it with an image. I just prefer to use HTML because it appears more crisp and clean on the page regardless of device. It's slightly more work than using an image and much cleaner when viewed. I appreciate you watching!
Hi! Thanks a lot for the video. Pleace I'm stuck with something. I want to show my 6 categories (products categories) in my home page. There is no way to do that???
Thank you Markito! There are a variety of way to do this. You can add each category manually or you can do it with a query and fynamic content is using Kadence Pro and Kadence Blocks Pro.
@@CliftonWP COuld tou tell me the name of the block please? :)
Or how to do it. I'm new on kadence and gutenberg ...
@@markito4803 Totally understand. There isn't a specific block per se as categories can be linked from the home page or anywhere. Perhaps, I may put together a tutorial on the multiple ways of doing this. That being said, check out my tutorial on e-commerce website building with Kadence. The homepage has the categories added in multiple ways and formats. Enjoy! czcams.com/video/fC8Zn01fESM/video.html
@@CliftonWP Thanks a lot I'll check taht!!!
Take care!!
Please please tell me there is a way to make a custom product archive page with Kadence pro and Shop kit........please !!!
Yes there is!
@@CliftonWP ..if you have the time and inclination please do a Tyrian about that. If you can’t can you point me to one ?
Hello Clifton, I tried looking-up for your contact info or website. Do you provide website design services for clients, I would like to discuss a project with you.
Please advise
Thank you David. Yes, I do run a separate agency that designs and develops websites professionally. Send me an email to clifton@cliftonwp.com and I will send you over through our intake process. 🙂
@@CliftonWP Thanks, I just sent the request 👏