Dynamic Content and Templating with WooCommerce: Introducing Kadence Shop Kit 2.0

5:30PM May 18, 2022

Speakers:

Nathan Ingram

Ben Ritner

Keywords:

woocommerce

product

block

template

question

dynamic content

page

building

add

layout

kit

shop

tabs

category

pull

backpack

assign

gallery

settings

apply

Welcome everybody to another live AI iThemes Training event. My name is Nathan Ingram. I'm the host here at AI iThemes Training and I'm joined today by Ben written are the founder of Kadence Ben is going to be talking to us about the new almost released nearly released Kadence Shotcut 2.0 Welcome to iThemes Training Ben how's things going in Kadence land?

Good? Yeah, I'm excited to be here and excited to talk about this this. This project keeps growing and growing. So yeah, I'm ready to get some people looking at it.

Indeed. So tell us a little bit about the Kadence Shotcut 2.0. What prompted you to start the project and what are your goals in this update?

Yeah, there's it's been a while since I've gotten to like really dig into like what are the needs for WooCommerce and how do I improve our shop kit and just overall like had been wanting to get templating into into WooCommerce. Like, to me it's still a major hole in that you can't really design a product page. And that kind of extends throughout WooCommerce. So the main the main thing was to come in and say okay, we knew we needed to refactor a lot of code, just in terms of like we needed to get off of an old settings, data like infrastructure, we need to get on to a new react based admin panel. But we also wanted to get like the templating figured out in Gutenberg which ends up being a lot trickier than I anticipated. To pull off and lead me down like, you know, another rewrite about a month ago or it was like okay, everything I'd planned on doing is not working like I want it to so yeah. So that's the big thing is I think people want to be able to control their product pages. But then more than that, it was like little things that I had wanted to do. You know, if you've listened to our podcasts, you know, I my brother and I run a little freeze dried food company and so I have a WooCommerce store that like all of this stuff applies to and and it's that kind of thing was like, oh, it'd be nice if it did this and it'd be nice if it did that. So that that'd be some things we talked about today.

Very good. And so Ben, you actually said when we were chatting earlier that you've touched probably every single file in the WooCommerce shop get plugged in.

And yeah, this is this is a really big update. There's a lot of internal changes. I don't think I mean, you know, one obviously like a new admin panel meats a lot, but I think in general, it's not going to feel such like such a big update to the user because we're only adding really one module and that's the the templating all the other modules are there we've tweaked some settings throughout them improved. The gallery is massively improved that that was a total rewrite and new JavaScript for that loads faster. Yeah, really excited about that.

For sure deal. So a few housekeeping details before I turn it over to Ben. If you are just joining us in zoom, welcome. Glad you are here for this webinar all about Kadence Shopkick 2.0. Ben is going to do a good bit of live demo here over the next 30 to 40 minutes. We do want to leave plenty of time for q&a. And if this is your first webinar with us on iThemes Training I know some of you said this was your first Welcome. Glad you're here. If this is your first since we've moved to zoom, just a reminder, for years we used our own chat room on the webpage i think.com/chat. We are now using of course the Zoom chat. And the place to ask questions is no longer in the chat area. It's in the q&a. So click the q&a button and ask your questions there because that gives us the ability to do up voting. So you'll see under every question in the q&a area is a thumbs up icon. And if you have that same question, click the thumbs up and that way we'll get those questions uploaded so we can answer them in order of priority when we get to our time of q&a. A couple of things that have dropped in the chat and I'll drop them in again in just a minute. The replay link is there that will give you the replay page that has this video. It will also have the full transcript of the chat area as well as the live transcript that's happening right now. You should see that on your screen. We'll have the full transcript of the webinar audio as well. All right there on the replay page. It takes about an hour after we finish for all of those things to get where they're supposed to be. Also, there's a great deal right now if you do not have a Kadence bundle license. There is a coupon code shop kit 25 sh O P kit to five that'll give you 25% off the full Kadence bundle through Friday and the reason it's just on the Kadence bundle is you really want the full bundle to take all the advantage of shop kit to get the dynamic modules and so forth that come with Kadence Pro. So that is shop kit. 25 25% off the four Kadence bundle through Friday. And last of all, there's a great link there for the Kadence podcast. I'll drop all those in the chat again as well because they've kind of scrolled on past. But with that, then I'm gonna turn it over to you. Let's get started.

Awesome. Awesome. Let me just hop in the admin real quick before we start looking at product pages. And just to show you this is the new settings panel. Nothing special about this Settings panel. The main thing is it is built in react so it'll it'll move a little bit quicker. And then there's also like just a few more controls in different places. For example, like when you're choosing a gallery layout, now you can like custom define it for tablet and mobile. Whereas previously, like whatever you chose is what you had. What's nice about this is like if you want the thumbnails along the side, but then on mobile, you actually want the thumbnails to drop below the main image. You can do that. And like, along with this major gallery rewrite, we also added in the ability to do variation based galleries, which I'll show you in a second but this is kind of where it starts and so you know we have all of our settings, I'm going to actually just run through, disable a bunch of this stuff, so that you can get an idea of like where we're starting from, and then we'll kind of like enable things as we go that way. Yeah, you get a feel for it. So I'm primarily going to be building a product today that I've already built, but I'm going to build a template for it. And

Ben, can I jump in on it? Would you mind zooming in your browser window just a bit for folks that are on smaller screens?

How is that

maybe one or one or two more bumps? Or can you do? Are you constrained?

That's better than it was everything that I that's fine.

Let's just go with that.

Let before i i Just when you zoom in the browser, you can break layouts and I don't want to break a layout but okay, yeah, if that's not enough, I can probably rearrange some things. Now. Here's the basic product page. This is, you know, primarily what you get as a default this button sizes the Kadence theme, you can change that. If you don't like that button size. Tabs, you've got kind of options for tabs in the Kadence theme but essentially what you're dealing with when you're building a product is you've got a short description here, your your kind of your details, your Add to Cart, a gallery, and then tabs and then instead of tabs you can have additional information and reviews and so what you know this Gregory backpack by the way, it's great backpack, not a sponsor, but what we're going to do is kind of I looked at the Gregory site was like I'm going to kind of play around with some of what they're doing to kind of just show you how you can make like just a much more interesting product page. And so just let's just start with I'm gonna hop into Shopkin and turn on the gallery and so here you have, there's some new controls, thumbnail width is a new control. So like I can change how wide I want this when I'm determining if it's a vertical or I can if it's if I'm setting it up like where the thumbnails are below I can change the columns. So I am just going to save that. And we're just going to look at what that does real quickly to the gallery here. So now thumbnails are along the side. Another thing that is in Kadence is this ability to do a video. So you can assign a URL to a product image and then have a video pop up so it's a cool way to do like videos in your gallery. But here, we now have a product gallery images on the side. And then what you can do is like if I change it to red, now all of these images can change. And that is like want it super fast, which is sweet but that's like just an real like added to the user experience so they don't have any confusion about what they're getting. And so I should open up some more tabs so I can navigate around and show this inside of my backpack here if you go into variations, you now have this variation image gallery. And so in it you can you know, rearrange how you want the photos to show up. And then you can add and remove images and that can be each variation. So when that variation selected you you get this nice feel. Whereas like if I go back to Blue images, jump right back to blue. So that's new and that's like super exciting for me because that's been something I've wanted to do for a while and the way that it works is super slick. Just from you know, back end standpoint, it's super, super fast. So another thing that you want to do a lot with a thing like this is to be able to have a size chart. And with Shopkick we have size charts, I'm going to turn this on. I'm going to go ahead and jump into that size chart show up under WooCommerce products and I've got this backpacking size chart already created. So basically what I've done in here is just create the table, pretty standard. And then you've got these placement settings. And so I've not done this as a new setting but previously, you would do something like before the product, short description. And you can change this as I've got you can change colors and everything for the button, assign it to categories. So I'm just going to update that. And we'll look at where this size chart shows up should be right here. So there's my size chart. I can open that and see. But what's nice is now there's actually a setting to do after attribute selection. And then here you select which attribute you want that to be assigned to so like I want that to be assigned to the size.

And so now it's going to show up right here, right along with like where I'm choosing my size, I can now view a size chart. Next I want to jump in and enable swatches

this is another thing that goes a long way in just giving that better user experience. So now when you're choosing a color you've got like a visual representation and then size you can quickly see what options are available as well as jump right into that site strap that's right there. So these are just some of the like the basics like tweaks that have just come in, not really headlining but I think worth like talking about like this goes a long way. You know little things like you can now choose your global colors right from in here. But we're gonna get into templates because that's what this whole thing is about. So I'm gonna go ahead and make sure I turn everything on. Templates show up under products. So you've got two templates. And I've got some drafts here. I'm just going to show you well, we'll just build from scratch. Let's we'll do the reveal at the end essentially this is still being worked on. This is familiar. If you're working with elements, you're going to choose the type for a single product. what will eventually happen is you'll be able to choose some pre built templates at the next step that's coming but at this point, you have a completely blank canvas. You can do whatever you want. You'll be able to pick prebuilt in the future, but essentially you can assign this to a group or individual product. So let's just sign it to our backpack and publish. And now if we jump into this backpack, you're gonna see that nothing shows. And so from here, it's all about building whatever you want and then pulling in the like dynamic content from your product. So initially, you know, one of the first things you might want to do is, let's put back the product breadcrumbs. And with all of these blocks, there's alignment settings, so like I can change where I want this to be. You're going to find styles so I could change the colors. This is your base color, your link color, your hover color, you've got link styles, you can change typography, all to customize it specific to this template

and so again that was in the wrong wrong thing. Okay. If we want to go look at just how basic This is. Now we have our breadcrumbs. So I am going to align that and actually add

okay I'm going to build few things here and added the gallery

and by the way, this preview, it's pulling in from this product here, which just happens to be the latest product. You can choose which one so like if you're like building a custom template for one specific product, you'll probably want to preview with that product. So in general, you can pick that here and then to like depending on how you've got things set up. Whether you're using a different theme or whatever this editor with can give you like just a preview of like to give you a good idea of like what actual what it's actually going to look like what the size is gonna look like. So, product gallery, and then we're going to start adding in things like

product title. Oops, let's see. Price.

And all of this stuff gets pulled in the data gets pulled in dynamically through the REST API

rating my cart

so you can see pretty quickly I can start putting together like the foundation for everything that I need back on this product page to start building it out, kind of how I want where you've got controls, to change things like if I wanted this to have a specific font or if I wanted the price to have a specific font or all of it like padding, you've got controls and all of these blocks to change. You know, the button styling and the spacing and all of that but kind of more even than just like some of that basic stuff has to get into be like how are we going to change like the whole layout and get away from some of this like just product information and then tabs. And so one thing that's cool in this is the ability to pull in things like so. Let's do product short description, traditionally that goes up here. I'm going to add it down below here. Center, align it

change the font and

I'm going to give the background color

change that padding and put in some dividers.

I want to take everybody's time watching me build out everything but I think it's important to kind of see just how you can come in and start thinking about your product layout a little bit differently in terms of like just

what your styles are. I am actually going to cheat just for time

okay. So this is something I've obviously pre built, but just a way to pull in. You know some more interesting information into this page. Next I want to

and then little highlight section. So,

with this, I'm going to cheat rather than building this whole thing. I'm going to cheat again. Mostly because I want to get into other things but what's cool is inside of my product here, I've used advanced custom fields to add in some highlight information. This is something I saw that Gregory was doing, I thought it'd be really easy to do just to put in some areas inside of your you think because essentially the idea is that like I'm making five or six backpack products like this, where I might want to show different highlight stuff and then in my template, I can grab

all of that. Pull up where I'm at here.

And drop that in. And this is all just like that's a dynamic image. This is using the dynamic HTML where I'm pulling in post field so like this stuff, all relates to this content. So that way if I have another product it can all be different and still populate the template. So let's just look at where we're at right now with our product page. So here we've we've moved our short description into here. We've got these columns and we're starting to get just kind of a totally different field and that traditional like jump right into tabs feel. But now I want to we need to we need to add some of that information and so like the product description

is a whole bunch of like it's a big list right? And kind of boring but we can do some things too. Definitely make this better than just living inside of a tab

and then here is where we're going to actually add our product taps. This is fun. If you've ever so here's our basic tabs. And obviously like this layout is is fine for a lot of purposes but in in a column setup. What's cool is inside the block settings you can now set them up to be an accordion and then because I already have my description, I'm showing that here as features. You can disable tabs so like I don't want my description to show up in that tab setting. And in fact, I don't really want my reviews to show up here either it's going to be pretty cramped. I could leave them in that tab. But for now I'm actually going to hide them. I'm going to add some tabs to this in a second but you can also change priority in here and everything like that. But then you can style all of this so like if I want to change the color of this area. Like I can change colors. I can this is for like hover. This is the active state so I can make the background on you know the active state dark if I want to. There's a lot of like really cool functionality here and then too because the additional information is kind of this funky like stuff. I've even added specific settings for this so that way like you can come in and say you know my table background I want the odd to be let's just say gray and the Eve even to be even darker, right like I can change the whole way that this table feels.

And then to I can come in and mess with like the label with so like, let's just say I want that to be aligned left and like this. So you get a lot of controls that you would never get inside of just like whether it would be a theme or whatever else when you're just dealing with specific things like this. But then what's cool, here we're gonna hop out and go and add some tabs because obviously like what's the point in having an accordion if there's only one item? One thing to know is that you can just add additional information without it being part of the

without it being part of the tabs so like this can just be its own thing. It doesn't have to be a tab or anything else. But if I hop out here to my product tabs, these are global tabs you can enable within shop kit. I'm just I just made some placeholder ones just so we would have some content to look at.

But I'm going to update that.

And let's just take a look at our front end and see how this is coming together. So now you can see we've got additional information in that styling that we applied is plying here because we now have these aligned left and then we've added in returns and exchanges and shipping details right into this like area. So we've, you know, able to get a bunch of information into this section without it becoming just like super overwhelming and boring. And then now like we need some reviews right? So

we can drop in the reviews again without having to deal with it being part of the tab structure. And then

you get this

layout and by the way, you can switch it to single column or two column. And I should probably add some spacing here. Actually, I threw that in without a row.

So hopefully this starts to like make sense how you can just get a much more interesting layout where you still aren't like scaring the customer away. You know, you get on some product pages and you're like I don't even know where the add to cart is like but you're gonna have control and you're gonna have the ability to like, change the layout and this can happen. You know, you can apply these templates on a per product basis or on you know, every product and category or every product in your website. And then you get that nice ability to add more content into your pages in a much more interesting way using dynamic content and using things like advanced custom fields. So you can drop in stuff to just make it a lot more interesting. And so like, you know, if you're like well what about related products or upsell products like there's there's blocked for those. So product related, you know, you can drop all this stuff in and still continue with kind of everything you have, and I haven't reloaded this page why we're not seeing the extra ones there. So I'll reload this, but this is you know the power of templates and as far as like, you know how far you want to go from here. There's a lot of cool things you could do. If you just wanted to start playing around with things like if you want your gallery

section to have a background maybe

where you start playing with I mean, especially if you have like cut out stuff, you could really do some fun things with just even the front the top of your page to create some like really interesting looking layouts. And you know you can like break the mold and, you know, move things around. I've seen Yeah, in prep for this. I was looking around at different designs. And I think in general like this is really safe because it's what we all expect, but there's a lot of little things you can do. Just to make things a little bit more like standing out. I mean, if you wanted to do like a full background image at the top, where you changed all this text to white, you can do that. And that's like one of the cool things. The other thing I wanted to just like mention here, I don't want to get too lost in the weeds on all of this other stuff is like you can now do. So you do single product. You can do the catalog loop item and then you can do archive. So really quickly. We'll just show this. So let's say like, I want my my backpack category to have a custom page where I'm like featuring some backpacks. And then like, you know, maybe I've seen this on websites too, where it's like find your backpack and you want to have this section here that's like you're not sure what to do and then maybe further down you want to listen more products, or you want to put out your product categories or just like create unique layouts. You can do whatever you want to and then apply these to a specific, like product category backpacks. And now if I go to the backpacks page, I don't know if I publish this. I didn't

publish

you've got this custom layout here. And so, you know, I've seen a lot of NIV and recommended this as an option. It's like when you want to have that really cool looking category page. You do like a redirect or something like that. But this allows you to actually control that page, and then load content into it and again, you can use advanced custom fields, you can use dynamic content from the category itself. So you can populate it with specific things or text areas or information or just apply it to a specific category and everything can be static. I mean, there's like so many ways at which you can design cool, like main archive pages for your website that is going to be just way more engaging than products. And then the last thing

what's hop out and look at the loop item

so yeah, this is simple. In it's like showing like just an image and you know, the title and description, short description, you're gonna be able to do a lot more stuff in here again with dynamic content or whatever else but you can think you can put in things like the price, the add to cart, all of that. Or if you just want like super, super simple, you can remove, you know, and just have the product in the image and you're wanting people to click into the thing. And the same thing here. You can still apply it. And so in this case, if we go out to our backpacks category, I've already removed that template. Now you've got this simple layout where you're just looking at image and title. And, you know with each thing can turn on the link and things like that. So your your control goes and with that, like you can do funky things like let's say I want to add

the product title.

But in my background here I want it to be

dynamically set to the post featured image which is not loading let's see what that is.

This is going to show up below where again, you've got this background image being applied. And so like you could get really creative with how you set up your products to like put a background image content below in front of it. You can put it in a background overlay on your text so that way it's like visible and then again change all of your settings and things like that

okay, so there's the the main things what we're basically looking at is a bunch of new blocks in and they apply to the route templates, you're not going to find those blocks anywhere else. So just load in the route templates area. So you're not cluttering up the rest of your stuff. And then they pull in the dynamic content through the REST API so you can get that like preview in the back end. That's pretty much realistic and not like just a bunch of placeholder things and start like building out really creative layouts.

That you can then apply to products and that is what I had to show you today.

So this is excellent Ben, and I'm just going to quote Melanie in the chat a few minutes ago who may have given you the best compliment that I've seen recently on an iThemes Training webinar, which is and I quote, this makes me actually want to try the block editor. So coming knowing that only comes from a page builder stack right now and so that's that is high praise, I think.

Nice. Awesome. All

right, so bunch of questions stacked up here in the q&a. If you've not been watching the questions throughout this webinar, I would invite you to pop open the q&a and in that window, kind of scroll through those questions, and any that you would like to see answered. Just press the thumbs up button and it will upvote those and we'll take them now in order of ranking so early on, Ben Anderson had this question. Any news related to product filtering when it comes to customizing our WooCommerce loops?

I'm assuming you're talking like you know where you've got like an AJAX filter or something like that. I know there's a lot of plugins out there it is like it is something I'm considering as part of like the Kadence suite but it's it's gonna be it's gonna have to be its own plugin. Like it's not an it's probably not going to just apply to products. I mean, the ones out there that I think of that do this really, really well do a lot of indexing and caching of those things so that the filters actually run pretty smooth. So outside of like, you know what, the basic sort kind of things that you can find in like Kadence blocks, a more like a really robust solution for that is going to be probably in another product and probably not something that comes into like something specific to shop kit. But as a more broader, like we're gonna create a filtering product that allows you to create custom grids and advanced filtering. But we'll see like where I find that it's something that I've recently been like a really want to spend some time mapping out what kind of deadlift that would take, and if that's something we can pursue in the near future not.

So yeah, I'd like to do it.

Very good. And so they can go to the Kadence product, the feature request page, right and dropping a feature suggestion or one that's there.

Yeah, absolutely. Yeah. And it's, you know, it's one like, there's like, multiple layers like inside of Kadence blocks pro you have, you know, the post grid carousel block that allows filtering and there's even like, the plan to like change that filtering to not just be static, rearranging things on the page and hiding things but actually add an eject element to it. So it does both. And like things like that is simple, but when you're wanting like I want to be able to filter based on all of that like brand, colors, all the different attributes stuff like that. That's going to be I think something a little bit bigger.

Yeah, yeah, for sure. And really, I just missed that a note to ask this question first, which is, when does it launch Ben when can people download the new Kadence Shotcut

um, I'm gonna push out a Betta

there's just

I mean yeah, I'm gonna push out a Betta probably either tonight or tomorrow after we record our podcast. Even in prepping for this, there's a couple things I'm like now kind of want to tweak that. It's hard for me to let something go and then once it's out there, it's like it's, you know, harder to change. But but I'm gonna get better out in the like the next you know, 24 or 48 hours. And then I think from there based on like feedback and how I feel about it as I'm finishing out my testing, we're probably looking at, you know, two weeks before it actually gets pushed up in shows up as an update for those who are using Shotcut.

So when you talk about the beta that is downloadable from the member panel,

yeah, it'll be downloadable. Just it'll like be right below shop kit and be like shapcott beta.

There you go. And so if you there was a question earlier about if I have a lifetime Kadence license, do I get Shopkin? And that's Yes, right.

Yeah, there's just to clarify, if you purchase back in 2014 and you have like a virtue lifetime license, you don't get shot kit. But if you have a lifetime license to membership or full bundle, then yeah, you get shotgun.

Great. All

right. And by the way, I think toolkit members also have access to shop kit. Yeah, okay. bunch of questions remain. This one is from Janek. Is there a way to customize archive pages cart and checkout and thank you pages or will that be added in the future? We saw archive pages just a moment ago. How about the other

Yeah, so the others I think are like, for me Phase One was largely like let's get this product page figured out and getting these things to like set to separate and still function. So much of what WooCommerce and the strength of WooCommerce is in its ability to be editable from other developers. So like, when you pull all this stuff apart, it's not as simple as it like would seem to make sure that everything works like it's supposed to, especially when you're using like third party plugins. So like, if you're using something we don't want it to break when you build the template. And so that's been the primary goal is to focus on the product. And I think the the big thing with Checkout I'm not sure yet. I I'm waiting in part to see where WooCommerce checkout goes. They're built they built a block. It's very unexplainable right now. But it is cool and like the layout, and you know, because we have the ability to add fields to the checkout, but as far as like building a custom page. You know, if WooCommerce is blocked, checkout becomes a thing, then that essentially would be the way to do it. You would just go into your checkout page, do whatever you want, and add the checkout block and that would be like where you'd find controls. So we'll see um, thank you page is definitely on the list. Like I feel like that's a pretty easy win. And the My Account section is also on my list, but again, figuring out how to pull all of these pieces out to be something blocking edible, and then still allow everything took into it is a trick so I don't have a timeline for that.

Yeah. So that leads us into our next question from Nico and it's something that we actually talked about yesterday in my WordPress news roundup. WooCommerce is parenthesis. Finally, moving forward with some full site editing aware blocks for archive pages and so forth. How does the work you've done with shop kit work into where WooCommerce is headed with some of the core blocks?

Sure. Um, I am not convinced that we will all be doing full site editing in the near future. I'm pretty like convinced we won't. So while it's cool that they're finally like, determining like, hey, we need to figure this out. I still think we're a ways off between like before, I'm even like, Hey, if you're building a new site, you might want to do full site editing. And we are an infinitely long ways out from like, Hey, you should go and update your site to full site editing. I don't know that that's ever going to be a thing. Honestly. There isn't any speed benefit or anything like that. So it's just about like user experience. So at some point, we'll probably say like, Hey, you should consider full site editing when you're building a project, like starting a new project. In which case, then you're doing the full site editing thing. And so like, the way that you build templates in here can still apply because you're still hooking into the template system. But in full site editing, the template system is the system and it's the WooCommerce template system. And so, you'll have the ability to do like a lot of stuff just not conditionally. So you won't, for example, like

be able to

as easily apply templates to select products. You'll have to do it through certain things like either within the product themselves, go in and assign that template. Like so. Again, the full set editing system using the the WordPress templating system is just confusing and not as like, flexible or easy to like quickly assigned to multiple products. So I think it's good but I also think like there's never not going to be a place for this kind of stuff where you can be much more conditional and much more like

change how you control stuff.

Great answer. I couldn't agree more. So Alberto has a question here and it relates to another question someone asked a little bit later and the question is, is it possible to create Category and Subcategory templates and assign them to corresponding categories now, you showed how to build archive pages a few minutes ago? There's another question down the road of can you build a template and assign it to a certain product? So could you maybe just look at the display settings and show folks how they can apply something they create to either a single product or to a particular category or subcategory?

Yeah, so I mean, this is the mood template we created right and inside of the settings, I got my display. So right now I've selected it to only show on this particular product and of course, like I could choose multiples or I can assign it by group. So I can say assign that to all products that have the category backpacks. Essentially, you could even do it by tags, you can do it, you know, you can kind of do it. You can even do it by author or all single products. So you've got like that kind of very specific control. And then you also have exclude settings. So just as much as you can like control what it applies to. You could say well, I want it to apply to all categories in backpacks, except on this one product here. Then so now I've kind of done the reverse of like, you know, so you've got a lot of controls and then like I can keep adding rules to both what you show it on and what you don't show it on. So lots of options for how you do that. And that's the same with the archive templates in the the loop items. The loop items are kind of weird. Because the way, the way that WooCommerce and just the way that even things work is like you apply it based on like the overarching page and not based on like that products category. So let me give you an example of that. Let's say on your homepage, you are showing backpack products in a product loop that you're either using a Kadence block for like the Kadence carousel block, whatever. Like the template doesn't know to show up there based on whether or not the backpack category is showing in that product loop. It's it's going to be based on like the overarching placement. And so I'm testing this might come out right at the end of betta would be a way to assign product loops based on the ending category that's showing up versus that which means that you could potentially have a shop page where you'd have like, one template for your backpack and another template for a different category, which could get really weird, but also could be pretty like cool in that you could like show specific things based on the product type. So experimenting with that, but right now it's based on the overarching main query of the page. Interesting.

bunch of questions still stacked up here. I think we have 44 open questions. So we're not going to get to all the questions today. We will get to the ones that have the most up votes. So if you haven't voted for your favorite question, do that right now. Question from Ben Anderson. Can you make the main image switch on hover like Amazon does?

Yeah, you can do that in Kadence. And there so Kadence does that has that option? Switch on however you're talking about on the archive, I'm assuming Kadence already has that option if you've got a product gallery and you'll that like that will apply because we're essentially loading that part of the WooCommerce template in the block itself. So it may not live in the block settings. But in Kadence, you can do that. And maybe that's something that we just put in the block settings is to be like, do you want to override the template and apply our own like, products image swap? But yeah,

and he's asking specifically on the single product page I think he's like when you when you mouse over the thumbnail it will change the main image

I guess I haven't seen that.

Oh, over here you're talking about you wanted to live flip

I always hate that.

I don't know if I'm unable. I don't know. I I always find that to be very frustrating.

But I'll look into it.

Maybe that's an option I can enable. Yeah, as long

as it doesn't delay the release of Kadence Shotcut 2.0.

Yeah. I get it now when you're hovering over the thumbnail. Oh, man. That could be something we do. I mean, it's just JavaScript but man, I I find that to be a usability nightmare.

Okay, so let's tap the hive mind in the chat right now. Is it a yes or no? Do you like the hover and change image? I mean, let's take let's make use of our audience here. Give me a yes or no in the chat. Yeah, Ben, you may lose this one man. Okay, the other been the other band. No, no, you're the been that asked the question. Yeah, that's it. This is like it almost. I'd say 8020. No, so yeah, people agree with you, Ben. But not the other Ben. Okay. All right. Well, yeah,

it's something that we can look at. It's I mean, people like different things and I like making options for people. I want to I want to be a tool, even if they're wrong, I want to be designed tool. No, you're not wrong. Obviously. Like if Amazon frankly if Amazon does that, which I don't really remember Amazon doing that. But if they do that, and it's not a bigger leader out there. That's true.

All right. Janek has another question here. Will there be a way to display variation swatches on archive pages?

That's something I want to do. Yeah, it's on my list. It's on my roadmap. i It's not going to be part of this update. But yeah, I think that would be fun.

Cool. So Richard has a question about the custom fields does the shop kit support NetBox custom fields? And another related question was, what did you use to create those custom fields that showed up on the product?

I use advanced custom fields but you could use meta box Yeah, does it? It's that's using Kadence blocks Pro to pull in all that dynamic content, like any. So like whoo, the shop kit has a whole bunch of dynamic blocks. So there's like the block for the product title and everything else. But if I want to pull in custom fields, I'm using blocks from Kadence blocks Pro or Kadence blocks with Kadence blocks Pro, where I'm pulling in that dynamic content based on and so yeah, you could use mailbox or

advanced custom fields.

Very good. Kelly would like to know if there are any upsell or down sell. That's what a down sell is upsell or cross sell product blocks.

There is an upsell block, cross sell would be on your cart Yeah. upsell is on the product page. Then there's an upsell block so that will it'll work just like the the reviews. I don't have any upsells in this product assigned or maybe I do product upsell no I don't have any um but if you went into my, the editor of the product you could. Under linked products, you can add upsell products. cross sells show up on the cart, so that wouldn't be a block unless we decide to do something with the cart at checkout. Interesting.

Okay, Chris would like to know if there's a way to add rich content on category pages like in the category description. Ideally using the block editor is that possible?

You can add it right into your template

like and apply that template to a specific category. Then you can do rich content. Or if by rich content you mean like just like a like classic editor WYSIWYG, you could. You can do that by using advanced custom fields and assigning it to the category and then you'd have that input area and then you could use the Kadence dynamic HTML block to output that onto your template.

A lot the once that dynamic content block came out, that just opens up all sorts of possibilities. And we did just do a webinar on that a couple of weeks ago. During the next answer, I will go find the URL for that webinar replay to share. So if you missed that webinar on the Kadence dynamic content, it was really cool and I'll have that out for you in just a second. Next question up from Scott I need product personalization input from the customer like words to engrave on the front content to laser on the side, etc. And then also, is there a way to do two choices like pay now or pay after we send a proof? What would you recommend for that?

So both of those would be kind of like totally new modules inside. It wouldn't be like you wouldn't add that through a block it would need to be a module because it needs to work in the whole system. Like the can't remember WooCommerce has products. They have plugins for these WooCommerce product add ons, I think will do the engraving thing and then pay after a proof. I think there is I think there's a plugin for that. But yeah, both of those. You know, one thing we're currently working so I'm getting this live and I'm getting Kadence blocks 2.5 Live, which is I'm really excited about as like bettas and pushing to live. And then we'll be redoing the Kadence website which has been a product we project we keep like pushing off pushing up pushing off but one of the things with that as a new shop kit landing page and there will be like a place to do feature requests specific to shop kit. And so you will also kind of publish some of our roadmap, but that would be like feature request for a whole new module on shop kit and I'm I'm not sure that that'll be something we do in the near future just based on like what I know is in our current roadmap. All right. Very

good. Question from Robin when and several other people when Will White Label be released?

Yeah, I knew that was coming. So that is, I mean, yeah, it's a struggle to pick what to work on every day because there's so much to do, but right now, white label is something is on the top five things on my to do list like major things, white labels there. And it's just a matter of you know, getting through some of these hurdles right now. Kadence blocks 2.5 We did a massive, massive refractor of all the codebase the new row layout block update is awesome using grid CSS and the ability to like, move columns around fluidly and create grids that all that whole thing has to get pushed into better and then I will probably push out white label.

All right, I have two questions. One from Kathy in the back channel is asking, Is Shotcut beta going to be available only to bundle customers or is it to anyone?

If you have a license just for Shotcut so let's say you just bought shop kit, then that'll show up in your account too, but otherwise, the kind of the two ways to have Shopkin is full bundle or what was previously called membership or having a direct license to Shotcut. So in both of those, you're going to just see an option for the betta right below it when I push that lat

very good. I think everybody has seen the benefit of just I don't think you want to just buy shop kit, you want the full bundle because that gives you all the dynamic content blocks and so forth. And again, there's that discount code shop kit 25 to get 25% off the full Kadence bundle through the end of this week. So take advantage of that if you're not currently a license holder. Let me ask one more question and we'll wrap things up from Jay What about pulling in content from other plugins like the Yes, whistling wishlist or other WooCommerce plugins that, you know they drop in their content on a WooCommerce page? How's that handled in the templating?

Yeah, I've been thinking about that. One thing I might do is create like a block that basically just like puts in all of the common hooks that they use. So you can just be like, this is your standard block. It doesn't have any controls but it like will pull it in. A lot of those hook into places that I'm already using because again, it's like I'm using the templating system in WooCommerce. Trying to be very careful to use that. So wish list I would assume would show because I would assume they're going to hook that in right at the add to cart but there's a chance it doesn't in which case like that would be one that I would probably add into like this like we'll call it a catch all block like where you add in like you choose like which hook or you like literally input a custom hook to say load this content. So yeah, that that's the trick is like a lot of that stuff won't preview inside of Gutenberg just because they don't even load their code in the back end. But like there will be some some way to hook that stuff in and to like the popular ones might just deserve a block. Anyway.

Very good. Yeah. Jay says that they usually hook into the worst possible placement. Oh, gosh.

Yeah, okay. Yeah, well, that and that might be like something because all of them have a function that you could probably call to hook it in. I'll look at wishlist specifically. I know that's a really popular plugin. Yeah,

definitely. Alright then. Thanks. It's been a great preview here. We've covered a lot of information gotten a lot of our questions answered. Sorry, if we couldn't get to you're still a lot of open questions as we're wrapping up here. We could literally be here the rest of the afternoon, I think getting through all these questions. But then any final words as we're wrapping up today?

No, I think just thanks for sticking with Kadence and I'm pretty I'm really excited about just some of the like big foundational stuff that's happening with this and with Kadence blocks right now as we move forward.

Absolutely. All right, folks. So the replay of today's event along with the log of the chat, and the live transcript will be available in about an hour at the link that I just dropped in the chat one final time. Again, don't forget the DL Kadence. The Kadence full bundle is 25% off through Friday using the code shop kit 25. So if you don't have a license, that's a great deal. And I would strongly recommend you take advantage of that. That's going to do it for us today. I am back for office hours tomorrow here on iThemes Training for our members. Hope everybody has a great rest of the week and we'll see you here on iThemes Training for the next webinar where we go further together.