How to Create Custom Product Layouts in Woocommerce With Gutenberg?

30 thoughts on “How to Create Custom Product Layouts in Woocommerce With Gutenberg?”

1. great!

   1. Thanks

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

   1. 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 Youtube 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 🙂

   2. There was no mis-leading as he clearly states in the first lines of the description what plugin he is using.

   3. @Kelly Dollinger He corrected the video description later.

3. Get Kadence Shop Kit with 10% discount: https://wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
   Get Kadence Blocks Pro with 10% discount: https://wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)

   1. Great Video, Thank you !!
      However, there seems a slight Glitch in this video – https://www.youtube.com/watch?v=e0rH9dPxg-0
      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

4. 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!

   1. Yes, you can build custom archive pages with it. See how Ben (the Kadence developer) shows it here https://youtu.be/wQQ8FBi7oqk?t=1689
      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.

   2. @WP Simple Hacks – WordPress tips and tricks Thank you so much, this is exactly what I was looking for and it looks easy enough to make!

   3. Today I also made a full review of the Kadence Shop Kit. See here https://youtu.be/Nk6VXAzRRFQ

5. Thanks! I like how you took the time to test it out with different themes. 👍

   1. Glad you like it!

6. Great Video, Thank you !!
   However, there seems a slight Glitch in this video – https://www.youtube.com/watch?v=e0rH9dPxg-0
   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

7. Which theme did you use for this video ?

   1. Kadence Pro, but as you see in the video, Kadence Shop kit works well with other themes.

8. Wow its wonderful, Thanks for the tutorial, greetings from Colombia 💪😁

   1. Glad you liked it!

9. Great tutorial! is it possible to create tabs for sizes? for example one tab for men’s sizes and another for women’s sizes?

   1. Yes, you can do that with Shop Kit

   2. @WP Simple Hacks – WordPress tips and tricks Ok just curious to know how that is possible if the product attributes are included in the add to cart block?

   3. 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).

   4. 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?
      https://youtu.be/Nk6VXAzRRFQ

   5. @WP Simple Hacks – WordPress tips and tricks 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?

10. What is the preview app you used in the tutorial? Thanks!

    1. Do you mean for different responsive views? It’s Sizzy https://sizzy.co

    2. @WP Simple Hacks – WordPress tips and tricks Yes, thanks!

11. 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…

    1. Do you have any alternative plugin to mention that I should know about?

Comments are closed.