How to Create Custom Product Layouts in Woocommerce With Gutenberg?
Vložit
- čas přidán 30. 07. 2024
- In this video I’m going to show you how to create custom product layouts in Woocommerce with Gutenberg. For it I’m going to use Kadence Shop Kit plugin.
Get Kadence Shop Kit with 10% discount: wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Get Kadence Blocks Pro with 10% discount: wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
RELATED VIDEO: Kadence Shop Kit review: • Kadence Shop Kit 2.0 F...
Blocksy and Kadence are currently two of the best WordPress themes. So, if you’re interested, then you can grab:
🅱️ Blocksy theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
✅ If you want to be the first to be notified about the new tutorials then please subscribe to this channel. / @wpsimplehacks
✅ BEST WORDPRESS THEMES:
Blocksy theme: wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Kadence Theme: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: wpsimplehacks.com/astra
GeneratePress: wpsimplehacks.com/generatepress
OceanWP: wpsimplehacks.com/oceanwp (SAVE 10% Coupon WPSH10)
✅ MY FAVOURITE WEBHOSTING PROVIDERS:
Verpex Hosting wpsimplehacks.com/verpex (SAVE 22% Coupon WPSH22)
A2 hosting wpsimplehacks.com/a2-hosting
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox wpsimplehacks.com/wpcodebox (SAVE 20% Coupon WPSH20)
WooLentor Elementor/Gutenberg add-on wpsimplehacks.com/woolentor (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon - Kadence Blocks wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
WP Social Ninja wpsimplehacks.com/socialninja (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
Best for creating tables - Ninja Tables wpsimplehacks.com/ninjatables (SAVE 20% Coupon: WPSH20)
Best events calendar and ticket selling plugin - WP Eventin wpsimplehacks.com/wp-eventin (SAVE 20% Coupon: WPSH20)
Best Wordpress LMS - Tutor LMS wpsimplehacks.com/tutorlms (SAVE 20% Coupon thmwelcome20)
Best Wordpress SEO plugin - SEOPress wpsimplehacks.com/seopress
Image Map Pro - wpsimplehacks.com/imagemap
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence Shop Kit wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Advanced Dynamic Pricing Pro wpsimplehacks.com/dynamic-pri... (SAVE 20% Coupon: WPSH20)
Phone orders For Woocommerce Pro wpsimplehacks.com/phone-order... (SAVE 20% coupon: WPSH20)
Advanced Orders Export Pro wpsimplehacks.com/export-orde... (SAVE 20% coupon: WPSH20)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks.com/cartinone - Jak na to + styl
![[New Kadence Tutorial] How to Create Custom WooCommerce Product Pages With Kadence Shop Kit](http://i.ytimg.com/vi/KT0P9v0Fv-c/mqdefault.jpg)
Get Kadence Shop Kit with 10% discount: wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Get Kadence Blocks Pro with 10% discount: wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Great Video, Thank you !!
However, there seems a slight Glitch in this video - czcams.com/video/e0rH9dPxg-0/video.html
I encountered this while I tried implementing this on my site.
1). I found that, when we use an Input field option - "display Woocommerce product badge with custom text" (the last option in your Blog post), it works correctly. Everything seems working fine initially. But the moment we Add our custom Text and Save it at Backend (Product options), then I found that I CANNOT remove that custom text (if at all I want to, for some reason). It seems, that it gets Saved permanently and can ONLY be Changed but NOT removed.
That is, when I tried to remove (empty that custom text field), and Save the product page, it still shows that Custom text afterwards (in the backend as well as frontend). Not sure, why ??
What actually works is, if we change or replace our Custom text, then it works perfectly again. Means, it is changing or updating the Custom text, but not completely removing (emptying) it. When we already saved it, once.
mCan you please try to replicate at your end. Means by first adding custom text and saving it and seeing at frontend. Then, at backend, try to remove that custom text (making field empty), and Re-saving it. If that is working or not
Please suggest me how to resolve this issue.
Regards
Thanks! I like how you took the time to test it out with different themes. 👍
Glad you like it!
You are very good! Thank you!
Thank you too!
Wow its wonderful, Thanks for the tutorial, greetings from Colombia 💪😁
Glad you liked it!
great!
Thanks
Can you please teach us how to make a custom archive wocommerce page with Kadence shop Kit ?
Maybe in the future when this feature is matured.
Great video! I was just about to buy the full bundle with the 10% code.
I just have a question for an e-commerce site, is it possible to customize a category page with the products in the same way?
I have trouble understanding how it could be done, it's a topic for a video maybe?
In any case thank you!
Yes, you can build custom archive pages with it. See how Ben (the Kadence developer) shows it here czcams.com/video/wQQ8FBi7oqk/video.html
Maybe this clears it a bit. The logic is that you’ll create a loop, use product archive blocks in it and then set up display rules for it.
@@wpsimplehacks Thank you so much, this is exactly what I was looking for and it looks easy enough to make!
Today I also made a full review of the Kadence Shop Kit. See here czcams.com/video/Nk6VXAzRRFQ/video.html
Great tutorial! is it possible to create tabs for sizes? for example one tab for men's sizes and another for women's sizes?
Yes, you can do that with Shop Kit
@@wpsimplehacks Ok just curious to know how that is possible if the product attributes are included in the add to cart block?
Now I'm confused :) Could you explain a bit?
Shop kit allows you to add tabs based on categories and for specific products. You can't add it based on attributes because attributs are the child products of the main product (that as tabs).
Also, see my Shop kit review here. Maybe this gives you some additional answers Kadence Shop Kit 2.0 Full Review - Is It Worth Your Money?
czcams.com/video/Nk6VXAzRRFQ/video.html
@@wpsimplehacks For example if you create a size attribute with the terms "US 3.5" for men and another term "US 5" for women, can you display them in a tabs, eg Mens size tab and womens size tab?
Which theme did you use for this video ?
Kadence Pro, but as you see in the video, Kadence Shop kit works well with other themes.
Great video! Great tutorial (as always!) but not impressed with Kadence Shop Kit... this plugin is adding nice options to build product pages, but it's really a early stage of features...
Do you have any alternative plugin to mention that I should know about?
If you have used paid plugins in your video, it is better to mention this in the title and description of the video. Otherwise, you will mislead the viewers.
Hi,
In order to make an overview of what is the video is about I have to describe it as clearly as I can with the video title. Now, pay attention, that CZcams has a title length limit of 100 characters, and it displays as a preview 50 characters or fewer. So, it would not be reasonable for me to use this area to describe every plugin that I have used in my video or tell whether they are paid or not.
Therefore, if you take a look at the video description there is clearly said that Kadence Shop Kit plugin and there is even a discount coupon for it. Kadence Blocks Pro I use in the video is optional, and you don’t have to use it and this is mentioned a couple of times in the video.
Nevertheless, thank you for you suggestion and in the future I’ll try to add this information in the video description.
Take care :)
There was no mis-leading as he clearly states in the first lines of the description what plugin he is using.
@@kellybethco He corrected the video description later.