[New Tutorial] How to Customize the WooCommerce Product Loop With Kadence Shop Kit
HTML-код
- Опубликовано: 31 май 2024
- In this tutorial video, I’ll show you how to customize the WooCommerce Product Catalog Loop using Kadence Shop Kit. If you have always wanted to create your own Product Loop listing in your woocommerce shop, this is the tutorial for you. You’ll learn how to add content to the loop, style it and even modify its behavior. Kadence Shop Kit is a premium plugin from Kadence, the makers of the Kadence Theme and Kadence Blocks. To follow along with this tutorial you will need the Pro-Addon Kadence Bundle which includes all the plugins from Kadence or the standalone Kadence Shop Kit premium plugin.
By the end of this video, you'll have the skills and knowledge necessary to create a fully customized and visually stunning product catalog for your online store using the Kadence Shop Kit plugin. Whether you're a beginner or an experienced WooCommerce user, this tutorial is an invaluable resource for anyone looking to take their online store to the next level. So what are you waiting for? Let's jump right into it!
Timestamps and resources are below!
Enjoy!
Timestamps:
0:00 Intro: How to Customize the WooCommerce Product Loop with Kadence Shop Kit
00:47 Overview of the product loop and WordPress Loop
06:19 Getting Started: Installing Kadence Theme, Kadence Blocks, Kadence Starter Template 08:33 Where to download Kadence Pro Theme Addon and Kadence Shop Kit Plugin
10:58 How to install Kadence Pro Theme Addon and Kadence Shop Kit Plugin
12:24 How to import an E-Commerce Kadence Starter Templates
15:18 How to change the layout of the product loop with Kadence Shop Kit’s Woo Templates
19:28 How to add a button product button link to the product loop
28:16 How to duplicate the Custom Product Loop
28:33 How to create a product link only product loop layout
33:50 How to assign different custom product loops to different categories
36:16 Thank you and conclusion
🙏SUPPORT & THANK YOUS?
✅ Buy me a Coffee - www.buymeacoffee.com/cliftonw...
✅ Leave a Super Thanks in RUclips Comments
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Kadence Shop Kit Addon - cliftonwp.com/kadence
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅Custom Post Types UI
✅Advanced Custom Fields FREE
🧰PRO VERSION OF TOOLS I USE
✅GiveWP Pro Addons - cliftonwp.com/give
✅ 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
✅GiveWP Pro Addons - cliftonwp.com/give
✅ 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 #kadenceshopkit #kadence #kadencetutorials
![[New Kadence Tutorial] How to Create Custom WooCommerce Product Pages With Kadence Shop Kit](http://i.ytimg.com/vi/KT0P9v0Fv-c/mqdefault.jpg)
![🔥[NEW!] The Ultimate Kadence FREE & PRO Deep Dive Guide for Beginners [Updated for 2023!]🔥](/img/1.gif)
No matter if I think I know how to do something in Kadence, I ALWAYS learn something new and useful by watching your videos! Thanks so much for your efforts!
Thank you so much Peter! I appreciate you!
Thank you for this Clifton, you actually inspired my journey with Kadence. Kindly consider showing tutorials on how to use ACF with Kadence. I would like to have a section at the bottom of every blog post where the author can fill in his notes and resource links. Thank you and keep doing what you do best!
Thank you! I appreciate you watching and stay tuned for more videos!
I have never seen such a calm and organised person haha
Good vibes! I don't usually go to other channels to learn kadence.
Thank you Clara! I appreciate that and I appreciate you!
good evening Clifton, it is always a joy for me to follow you. I have a huge debt to you and I confess that I could never pay it. not because I can't or don't want to, but simply that no amount of money will be enough for the service you give to all of us. thanks to your tutorials I was able to set up an e-commerce site. you're a great character. it would be cool if we could contact you privately. thank you for everything.
Wow thank you so much Make! I really appreciate that and I appreciate your support! Thank you!
Thank you again. You make things simple to follow and easy to do. Can't stop thanking you, Clifton.
You are very welcome Charlie! I appreciate you!
You did great work here! Thank you!
Great guide. I love your movies. I'm learning Kadence and Wordpress from your videos. Thank you
finally, the kadence shop kit woos product loop tutorial comes out, thanks CliftonWP, I've been waiting for this tutorial for a long time. It is the first video to explain in detail💯
You're very welcome! Thank you for watching!
Another winner - thanks Clifton! I had no clue this was called a product loop, but it was on my list of things to figure out. Now for a tutorial on making a quick view of the products, but I don't think Shopkit's there yet.
Thanks for covering shop kit, Clifton! I need to dig into shop kit more. As always, great video!
Any time! Thank you David!
so good good good! thank you! you are the best! :)
Thank you so much! I appreciate you!
Thanks! How can we combine the loop with a carousel to add it on the homeoage?
Thank you, Clifton! #kadenceGOAT
Clifton as usual a fantastic video. Big fan of your tutorials. However just a small query from my end. If I want to make a loop item with just the product image and the title and detail button only shows up when you hover on the image. Can this be done?
CLIFTON YOU ARE PSYCHIC........that is exactly what I needed
Awesome!! Glad I could help 🙂. I appreciate you!
Clifton, thank you for the wonderful tutorials! How do I add a file to Contact Form? I want my clients to be able to attach a file to the Contact Form and send it to me. But unfortunately I can't find this function in any way.
thank you for your thorough and thoughtful tutorials. I'm new to kadence and trying to build a woocommerce store with lots of custom attributes, color swatches, and subcategories. how can we easily use kadence to create side bar filters by attribute by category, or do we have to use gutenberg blocks within elements?
I’m wondering why the images I use doesn’t have the zoom affect when I put my cursor over the image?
Teşekkürler 👍
Your tutorial's are well structured and very instructive. I have a question on another topic, my webpage should be bilingual, do I necessarily need a plugin? I use the free version of K
Hi! How do I change the type of product category cards? For example, on the "Shop" /shop page/ I use product category display, not product display. And I can't find how to customize product Category cards in any way. Thanks!
What if you have different sized titles? Somehow your website has simple one word titles and every product loop is the same size on the archive page. I'm retrofitting a ecommerce site that has varying sizes of product titles and I can't for the life of me, figure out how to make them all uniform like the default archive template does.
Does Kadence have an image hover effect? such as flipbox,zoom in (and have focus setion?)
Kadence Pro has the image overlay block, however there isn't a flipbox ability out of the box.
Excelente! Thank youm Clfton! Waiting fore more videos about Kadence and Ecommerce websites. Could you make a website for cofe \ cafeteria\ coffeshop ?
Great suggestion! I'll see what I can do. Thank you for watching!
@@CliftonWP And I remind you about your old promiss - to make a video for beginning freelancers or solo entrepreneurs. How to find first clients. How to gather essential information about the future site, etc. 1) How to get clients, 2) how to fullfill the first job for them, 3) any useful info concerning the money - the cost, the payment methods, how to invoice them, how to get good reviews, recommendations, etc
@@CliftonWP BTW, what kind of microphone do you use? I like the sound of your voie. Many YT bloggers doesn't care about the sound quality. They don't pay much attention to how their voice sounds. And that is a very important thing.
bro,How to set the transparent header only take effect on the homepage, If I set disable on page, homepage will disable too
Hey Thank you TimTop! Go to the Customizer, Select Header, Scroll down and access the Transparent header settings. next, configure and design your transparent header to your liking. Once you are done. Toggle the Transparent Header to OFF. Then access your home page edit screen, select the Kadence Page setting and enable the transparent header for that page only. The Transparent header will only be applied on the home page. Hope that helps. :-)
@@CliftonWP that is ok, thanks