WooCommerce – WS Form Webinar Series, Episode 5

[00:00:00] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain. SSL and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place. Invoice clients and get 30% off new purchases. Find out more at go.me/WPBuilds.

Ah, and relax, how are you doing, mark? I'm good. How are you? Yeah, good. Thank you. We're back in our normal. Continents of the world. Yeah. I've stayed in Europe The entire time you are back. Did you have a safe journey in your enjoy work camp

[00:00:55] Mark Westguard: Europe? I loved work Camp Europe. It was great.

Got to meet lots and lots of people. Lost my voice, which is always the way. Went to lots of events after events. Yeah, very many late mornings. So early mornings.

[00:01:09] Nathan Wrigley: It was great. It was a fabulous event though. Mark and I did quite a lot of hanging out actually as it we did. And it turns out he's quite a good swimmer.

That's all I'm gonna say. You're quite good at snorkeling. Yeah. Thank you. Thank you for that. We're here. We're gonna do the fifth of sixth of the WS form demos. As I've said in the past. We're just here. If you happen to be here, we're on a new platform. I'm not entirely sure how the whole chat thing works.

Hopefully it is working. But if you want to just drop us a message in If you are here, that's great. We'll try to add that question onto the stream if nobody shows up, so be it. We'll treat it as a piece of live recording content and we'll put it on the WP Builds website. We've done quite a few of these episodes already.

This is, am I right in saying this is the fifth one, right? This is the fifth in our series. Yes. This is the fifth one. So we're getting slightly more complicated each time. The first one was form building basics. You can find all of [email protected]. If you go to the archives menu and then click demos, you'll see them all there.

And then we moved on to building interactive forms. Then step three, if you like, was preventing form spam, deliverability and form efficiency. Last time we met step four custom field plugin integration, and now we're onto. WooCommerce, what we can do with WS form and WooCommerce, you're

[00:02:29] Mark Westguard: all set. I'm all set.

Let's take it away. We share this screen. Let's take it away.

[00:02:34] Nathan Wrigley: Let me share the screen. Ooh,

[00:02:37] Mark Westguard: you got slides? Yeah. This one, we're not, haven't got many slides on this one. This is gonna be a lot of hands on stuff, I think. Okay. But let's just do a quick reminder of the special we do with WP Builds. So if you go to WP Builds com.

Slash link this one

and then use coupon code WP Build You will get 20% off. Any addition pop up on your screen when you do that.

Yay.

[00:03:07] Mark Westguard: Basically our WooCommerce integration enables you to put a form on a WooCommerce product and lets you then build a customizable product and you can. Any of the Ws form fields on that product.

So we're gonna run through a few things today. First of all, how to assign a form to a product and how to do that properly. Just very quickly, how to edit the form and manipulate that form. Customizing product pricing. So you can actually use the e-commerce fields in WS form to manipulate product pricing in in WooCommerce choosing which fields appear in the cart.

So you can actually choose which of the custom fields you have on the product actually appear in the cart when it's added to the cart. We're gonna talk about data grid column mapping very briefly. We'll come onto that later on. Running actions. We went through actions in the previous episodes, but things like sending an email or maybe pushing something to Salesforce or running a WordPress hook.

That can actually all be controlled by WooCommerce order statuses. So we'll go onto that. And then there's some variables as well that you can use in your email templates or other integrations. Things like the maybe the billing address or the order amount can be used as variables in other parts of the system.

A lot of what we're talking about today is gonna be available at this address here, so WooCommerce. That's the main site that we have where we've got some demos, we've got links off to the actual product itself. So the WooCommerce add-on for WS four is actually a WooCommerce extension in the WooCommerce marketplace.

That's where you get that so we'll will get that PowerPoint out of the way. And I'll just show you very quickly. So this is the WooCommerce ws forum com site. And on this site, you've actually got some demo products that you can have a look at. We'll have a look at some of those in a moment.

You've also got a link to get Ws form Pro. You've got the link to the actual extension itself the documentation for it as well. This is the page on the WooCommerce site itself. And this, there's a nice little video on here if you want to have a look at it about and learn more about the functionality of that extension.

You can see that in this YouTube video. And this just gives you an overview of everything that extension does and some of the stuff that we'll be going through today. Now they do have documentation link on here. It's a little bit hidden away, but there's a support accordion here. And if you click on view documentation, that will take you to this page.

And this is where all the juicy stuff is. So if you get stuck with anything on the WooCommerce integration, it's all documented here. We're not gonna go through all that right now. Okay? So let's just have a look at some of the demos of what it can actually do, and then I'll show you how some of that stuff's done.

So we'll start with some basic stuff first. So maybe a donate. Product first. So this is a very simple example of putting a Ws form on a product. So everything here is all standard WooCommerce product page, right? And then below that, this is actually. A Ws form here, the the amount and indeed actually the add to cart button as well.

So the nice thing about the WCO extension is it enables you to control where the quantity and the add to cart button actually is on that product page. In fact, you can put more than one on the page if you want to. Nice. So if you have your add to cart down here and you actually wanna move it, then you can actually do that with the extension.

This is a very simple form. We've just got a price field on here. And whatever's entered into that price fill becomes the price that's added to the car. So you can use it for a, a donate product. Let's have a look at something that's a little bit more complicated. Let's go to a multi tab form. We, when we spoke about tabs and some of the previous sessions that we did but this then shows you actually putting a multi-step form into a product.

Again, you know this part here is your WooCommerce product. This one actually has the regular add to cart button from WooCommerce at the bottom, but everything else is a WS form. So you see we can actually tab through within the product itself. Nice. If I fill this up, we've got a product bar went up.

I wonder where test actually is.

So you can work your way through. You've got select options, you've got dropdowns. Now you'll notice at the bottom we've actually got a total options and subtotal. So the subtotal is actually the product price. We've got that set to zero on this one. Options is whatever we've selected on the form. So you'll notice when I drag this up, that option amount changes.

And then the total is the amount that would actually get added to the cart. And then we can actually put a signature on there as well if you want. Anything you want. Now you'll notice now that I've actually filled out all those fill where we've got a progress bar of a hundred percent. The add to cart partners now come alive.

Nice. By clear that signature, you can't actually click on it. So you get the add to cart button is enabled or disabled based upon whether that form is actually fully validated or not. Just prevents people from clicking and adding it to the cart before they fill out everything that you want from them.

You could do. That's really great.

[00:08:28] Nathan Wrigley: Just little things. Little things.

[00:08:30] Mark Westguard: That's great. Just little things. Yeah. Yeah. Conditional logic can be used as well. So this is an example of showing some fields when we choose certain options. So if I do spouse or child, we'll see, we get different information. So this is using the The video where we talked about making forms dynamic using conditional logic.

So we're actually using that within a product itself, and that makes the product dynamic as well. And again, we've obviously gotta fill out everything on form to get that. Then you can do some more advanced stuff as well. And we've actually got, we have a tutorial for this on the site and maybe we'll talk about that later.

But this is an example of a T-shirt and being able to actually dynamically adjust the t-shirt on the left hand side here. So this is actually an S V G. And then SVG is a format that enables you to work with both graphics and. Vector graphics as well. And again, so from here to here, we are looking at a regular WooCommerce form and I can choose a variation.

So it does work with variant products as well as simple products. And then below that, we then got the form. And what we can do, we can actually use a, this is actually a radio here with different colors. When I click on that's changing. Svg and that's actually done with a little bit of JavaScript.

Maybe later on we'll show you how that's done, but it's actually changing a screen layer over a picture of a white t-shirt. You can even choose what you want on the t-shirt, so you could even do like custom text. Type whatever you want My t-shirt?

[00:10:07] Nathan Wrigley: Oh, no. Yeah. Yay

[00:10:12] Mark Westguard: at that. There you go. Yeah.

Yeah. So you can do whatever you want with it. This is a very basic example. Yeah. But you can see how the form can be used to interact with that. We're actually using the conditional logic on this as well. If you look at the word commerce on that T-shirt, when it gets dark, it's dark changing.

It's going white. When it goes dark, it goes white. Yeah. So you can use all the conditional logic and all the features of Ws form to interact with whatever you've got. Again, I can put a signature on there to approve that and then hit add to cart. When you

[00:10:38] Nathan Wrigley: say the conditional logic for that word, commerce.

So we can see at the moment word commerce is a black collar. Yeah. Are you taking some sort of hu You doing a measurement against the hue of the background color in on the svg. In this case it's a pale purple and at some point it flips over and says, okay, that's now, I don't know. We've reached saturation point.

Yeah, change it to the other

[00:10:59] Mark Westguard: logo. Okay. Yeah. I think it does it on 50% lightness. 50 50%, or something like that, right? Yeah. Yeah. And yeah, I can show you that quickly. So if we actually add a form, go back to our familiar layout editor. I'll just show you quickly how that's done. On that particular one, we've just got a, basically a color field, right?

And then maybe we could add a text field just to demonstrate how this works. If we go into conditional logic we'll add a condition. So we go if color, and then we can do lightness greater than 50%. Then you do something which X yeah. So we could just do a very simple, 50, less than 50.

Now what we're actually doing on that particular product page is we're running some JavaScript to modify that particular element in the svg. But that's all explained in the In the tutorial for that and we'll show that later on. So let's have a look and see how you actually create a product with a form on it.

So I've got a page here where we're adding a new product in WooCommerce, and we'll just,

[00:12:09] Nathan Wrigley: it was just in plain old woo here, right? Free version of Woo

[00:12:13] Mark Westguard: work. Yep. Yep. So we just do test product in here. You can put a base product price in if you want. So we'll put $5 in there. You don't have to, we default to zero.

If you didn't put something in there, but you'll notice now we've got a WS form tab under the product data section. When we click on that, because we don't have a form assigned to it currently, it gives us a bunch of templates that we can work with. These are just some sample forms that we can work with.

You can either choose this or you can opt with a completely blank form and build whatever you want on that product. But on this one, let's just go ahead and we'll choose a multi tab form. And what that's now doing is that's gonna create the form in Ws form. It's gonna publish it and it's now assigned it to that particular product.

So what we'll do is we'll publish that

and let's preview that, hopefully new window. And there you go. So there's the multita form on that product. So it's that simple to, to add a product sorry, a form to a product. Now you're probably gonna want to edit that. So if you go back into that WS form tab and we click on edit form. What it's now gonna do is gonna take you to the layout editor in WS form.

And we can now modify there. Yeah. So we can modify that anyway that we want. As I wanna show you a few things that are slightly different in the layout editor now that we're actually coming in from a WooCommerce product. So you'll notice at the top we've got a link here to the product that enables us to bounce back to that product while we're editing so we can.

Basically bounce between the two things. So we'll just click on edit to go back again. Now the way that a form is assigned to a product that's actually done under form settings, and then we go to Woo here. You'll notice it has automatically assigned it to that test product. Now, you may have a form that you want to assign to many products.

You might just not wanna send it to that particular one product we've added. So you can actually assign products to categories and to tags or individual products. So to do that, you just click on add here. You just choose the category and then off you go. So it's very simple to assign products to multiple different products.

You can also exclude as well, so if you wanted to assign a form to everything, but then you can use these exclude settings here as well. Below that, we've got some other settings for how this form is presented on that product. First of all, on the actual catalog pages, that's where it's listing all of the products.

So if we have a look let's get back to here and we'll go back to the homepage. So the button that you actually click on here to get to that product, you, you'll see this one's got the word donated. Yeah. As opposed to select options. So that is actually set up here on the button label, so you can modify that by just changing that setting.

In terms of the price, you can actually hide the price if you want. So that's the default WooCommerce price that's shown at the top of a product page. Or you can just leave that and it'll just show it. You can actually put prefixes and suffixes around that price. These are some of the features that when you're building a WooCommerce site that you would sometimes have to install an add-on for yeah.

To get to do it. So we've built this all into it, and then you'll see we've got some hide options here. Now what that does is by default, we have it on auto, and what that means is if you add an add to cart button to your form, then it will automatically hide the WooCommerce one so that you don't get two of them on the page.

Got it. Or you can override that. You can just say hide or show. But usually you just wanna leave that on auto. Then WS form will automatically adjust the layout for you. Same with quantity and same with variation price. And just now we spoke about the add to cart button being disabled when the form is not valid.

There's actually a couple of ways that you can do that. So by default, if the form is not valid, we will disable the add to cart button. So that's the behavior that we saw on that page. Yep. But you can also do showing valid feedback. So what that will do is if I click on that and I were to click on the add cart button, rather than adding it to the cart, it will then highlight all the invalid fields.

Just like a normal field. Yeah, first name is required, last name is required, so you've got a couple of different options there. That's

[00:16:41] Nathan Wrigley: a nice option. I like that. Yep.

[00:16:43] Mark Westguard: Yeah, that's good. When you got quite a complex form, maybe with some calculations and stuff, and. They haven't entered a number in somewhere.

And if you have a multi-step form, it will all, it will actually move to the tab where that error is and focus on that field to make it super easy for the user. This one you probably just wanna leave enabled the clear hidden field. And what that does is when the form is submitted if a field has been hidden, maybe with some conditional logic, we clear those fields before they're added to the car.

Just in case someone fills something out, it's then hidden and then when the it's submitted to the car, we don't wanna see that anymore. Got it. So the clear hidden fields, we'll just clear everything and keep everything neat and tidy for you. Below that, we've got some cart options and you can actually make a item editable.

So what we mean by that is let's say you filled out your name on product. You've added it to a cart you can then actually click on the item in the cart and it'll take you back to the product and you can actually edit what you've put in there. So it makes it editable so you can make changes to it, basically after you've added it to the cart.

That's neat. We also have the option to allow negative value. Not a lot of people use this, but you could, for example, Have a checkbox, which would take $10 off the price of the product if you wanted to. So that's what this allow negative does. We disable that by default, just for security reasons and to stop people, trying to get a negative value on a product.

But if you do wanna adjust prices in a negative way, you can enable that feature. And then at the bottom here we've got run WS form actions. And we'll probably come onto that in a little bit. But on forms you may recall, we have an action section. And the actions, anything that runs with it, whenever the form is saved or submitted.

Now in WooCommerce that's a bit different cuz we don't want those to run until the customer's paid and an order's been placed, right? So when you're creating an action, let's just say for example, we wanted to add it to Google Sheets. So we want to copy everything that's on the form. We're gonna put that into a Google sheet.

You'll notice at the bottom of the action, we can now configure because we've got the WooCommerce add-on installed. We can choose when the action's gonna run. So when an order goes through on WooCommerce, typically it will be in, pending payment or processing or something like that. Yep. So I could say I only want it to be pushed to Google Sheets once the order status goes to complete it.

So it gives you really granular control over Nice. When those actions actually run. Yep. And that could, that can stop people sometimes cuz they think the actions are just gonna run when you add it to the car, but it actually runs when you actually place the order and it goes through. So those are the WooCommerce options that we have.

So let's talk now about how you adjust prices on a product. It's fairly straightforward, so let's go to let's add another product.

And we'll put another, no, we've got lots of test products today. Yes.

[00:19:48] Nathan Wrigley: Easy to find at least

[00:19:49] Mark Westguard: and delete later. Yeah. We'll use this calculation template here. Hopefully this will add properly. Yep. Here we go. And what we're gonna do on that, let's just put a base price on that of say a hundred dollars and we'll publish that product

and then we'll view that product. Okay, so what we've got here is a subtotal, and that's the base pro price that I just put on that product. We've got the option price here, which is everything on that form, all of these price fields. And then we've got the total. So anything I add here is gonna get added to the options at the bottom.

And we've also got price range slider there. And you can see that these prices are adjusting. Yeah. And then when I click on add cart, it would then add that amount. So let's have a look and see how that's done. So we're going to WS form here and we'll edit that form. It's pretty straightforward. So what it does is it uses our standard e-commerce bills that we have.

So if you were just to build a form, maybe to charge someone $10 for a t-shirt and you had a strip checkout feature on there. Then you're actually using our e-commerce fields there. When it's applied to a WooCommerce product, the total price of the fields on that form gets added to the regular price of the product or the sale price of the product.

Whatever, sure. You're using, so the fields that we're using here, we've got a, just a regular price field. And the settings on this are things like, you can set a default value. You're gonna change the alignment, the style, and everything else on that. All the usual stuff you expect to see on our sidebar price check boxes.

They're much like a regular checkbox except that they have a price column on them. So you can just put the price in there choose the name of the product and then that, whichever ones they check on will then get added to the price of the product. Same with Selects. Again, it's using our data grid to select product names and prices.

Yep. And the same with the price. This is a price range slider. So on this one you can actually set a minimum maximum not to 20 in this case. Yeah. And you can choose your step it, if you wanna step it by 1 cent, you can do that. So you would set the step to 0.01. But that would default to a step of one by default.

Go from zero to 20 in steps of one. Below that, we've then got some fields which are a little bit more specific to WooCommerce. So if we go on the, go back to the toolbox, and we'll scroll down here, and you'll notice that we've got a WooCommerce section. Yep. Yep. So what WS form gives you is a bunch of fields that you can add to your form that behave like WooCommerce fields.

So if I wanted to add an add to cart button, you'll see we've got one here. I can place that anywhere on that form I want, I can resize it I can put it, at the top of the product if I want to put it anywhere I want. So you get much more controlled. Over the layout that's shown on that product page.

You've also got things like a quantity field. So you see we've got quantity here. Now, quantity, you only have one of them. That's why that one's blocks out right now. Obviously you only want one quantity field to be able to enter in, but the add to cart, you can add multiple of those if you wanna.

Does it have the

[00:23:07] Nathan Wrigley: same id if you add multiple cart? So

[00:23:10] Mark Westguard: will it no. They're separate so you can actually interact with those. 70 if you wanna, yeah. Yeah. So there's no clashing with IDs going on there. So yeah, so that's the example of basically pulling e-commerce fields in, and then that's ultimately what that's gonna look like.

So one thing to bear in mind with the WooCommerce extension is that the form that's used on the product would always be the published version. So if you make any changes to the form, let's just perhaps move the add to cut up here just for a bit of fun. Make it nice and wide. If I then hit, if I actually go to that test product and refresh it, you'll notice that nothing has changed.

So any changes you make, you're gonna want to click the publish button at the top, and then when you go back to your product, it will then there is adjust it. Yeah. Yeah. And like I said, you can we can add another add to cart down here. Wherever you want. Hit publish and there you go. Nice. Yeah, so it gives you a lo and you'll notice the regular a cart has been hidden because we don't have, sorry, because we have an a cart on that form.

All right, so now there may be an instance where perhaps you've got a number field on there. Perhaps you're doing some calculation in that you want the user to see, but you don't want that to actually be added to the cart. So what you can do is if you edit that number filled and you scroll down on the basic tab, you'll see that there's a checkbox for exclude from WooCommerce cart and orders.

So if you check that and we'll save and close that and publish it. Then the product itself will have that filled on there so that they can see what's going on. Maybe a figure in there, but when that's added to the cart you're not actually gonna see that number filled being brought across.

So that gives you granular control over what actual fields are shown on the on the cart itself. When the order's placed, this metadata here is then migrated across to the order so it will inherit all the way through. So that number filled will not appear. So that, that can be useful for, if you've got a rain slider.

Yeah. Yeah. Or a select dropdown that's being used for other calculations below, but you don't want it to appear here, then that's what you can use that feature for. Let's have a quick talk about that. Data grid column mapping I was talking about. So let's go to a checkbox. And this is the same for checkbox radios and select fields as well.

So if we go to the check boxes here, We've got three options and we've got a price of one, two, and three. Yep. Now, you may recall from one of the earlier videos, we, on a checkbox, you would have a value and a label. So the value is what's actually submitted, the label's, what's shown to the user. So with with WooCommerce extension, there's an additional.

Mapping here. So you've got the label, which is shown to the user. There's the value, which is actually the value that would be added to a submission. But down here you've got the WooCommerce cart here and that determines what will actually appear in the cart. So this text here, Right here. Got it. Yep.

Is determined by that particular column. So if we expand this out, you'll see how that works. So you've got product and price. And we would be choosing product here. So it's gonna show option one if we chose option one because we've got that map to product here. Yep. The price that's added is determined by this price mapping here.

So that's gonna use this column. So basically you can have any number of columns, and use which columns do what. You could even have you, we do have some customers who, on the form, they just wanted to say option 1 23, but in the cart they want it to show something different. Maybe a little bit more explanation.

So you can actually add another row, another cart. You just add another row, right? Yeah. Column cart detail or what, whatever. And then you can fill up with whatever you want. Yeah. Yeah. And then assign that here. So it's very flexible in terms of how that works. So that's the column mapping.

And. So we've done, yeah, so we've done running actions. So let's have a look at that t-shirt demo. And we'll just show how some of that more complex stuff is done on that particular product. Let me just see here. Let's go to the knowledge base and I'll show you how that's put together, the zoom in a bit.

So you can see it's probably the easiest way of doing this. Yep. So this is a knowledge based tutorial we have that talks through how that t-shirt demo's done. And give some examples on the JavaScript of how to do that. So this is it's a bit more of a cut down example. I don't have the text overlay and stuff on this one.

You can see how when I click on light blue, dark gray, it's actually changing the color of how that t-shirt works. So in order to do this, you're gonna need the WS form Pro WordPress plugin. You're gonna need our product add on extension. So the extension is purchased through woocommerce.com and there are links to this all the way through this tutorial.

And then we provide a couple of sample files here you can actually download. So you, this is the actual T-shirt, s v g file. Which would be used for the product image. And then this is actually the form file that does all the work. So you can download these and have a play around with them. So just have a quick talk about the SVG file and how that works.

It's pretty straightforward. And if you can get into SVG format, it's actually quite an interesting format for playing around with images and manipulating images. So the, there's a jpeg layer at the background, which is just a regular t-shirt image. And then over that, we even have a screen layer. And that's where we apply a color to that screen layer because it's a screen layer.

You can see the t-shirt through it, but it makes it look like we're changing the color of the t-shirt. And then on top of that, we then have a logo. And that can be any logo you want. You could remove it if you wanted to just have a plain t-shirt. And you can play around with that SVG file to, to make that work.

Now, in order to use SVGs in WordPress, you actually have to enable support for it, and there is a plugin called SVG Support, and there's a link to it in this knowledge base article. That you can install and that will enable you to upload SVGs into the media library and then assign those to the product.

Yep. Yep. So that's pretty straightforward. In this demo, first thing we do is we create a form. And you'll notice that we have created a color picker, which is. This part here. Yep. This is the regular color picker. And then we've got some buttons and we've set the value of those buttons to different hex values that are used to determine the color.

Then we create a product very much like I showed before. And we upload that t-shirt, SVG file as the product image. And then we then assign the form that we've created to that product. So you're gonna get this appearing in WooCommerce. And you can just use the t-shirt, j s o n file that we provide.

You don't know how to build that form. You can just use the one that we've provided. So then we, we test that, make sure that the form's working. But now we wanna make sure that everything is interactive. So the way we do that is with some conditional logic. And this is similar to what I showed earlier, but what we're doing, so we're adding a condition and we're saying if that t-shirt color picker, which is the actual color field, and we're gonna do that on input.

Now what on input does is whenever that field changes, either by somebody clicking on it and dragging it or pasting a value in there or typing a value in there, you are gonna get an on input event occur. And that's gonna basically trigger this condition. And then the then statement on that will then run some JavaScript, which is this JavaScript here.

And this, may look a little bit complicated, but essentially what we're doing is within that S V G, there's a class called WSF T-shirt screen, right? And so we are saying, okay, use that and we'd like to set some CSS on that element there. We're gonna change the fill color to be the value of field in this case.

6 1 2. Yeah, whatever. Yep. But that would be the idea of your color picker. And we're applying a mixed blend mode on that multiply, which kind of gives you like a screen effect on that particular fill so that JavaScript is running whenever that changes. So when we change that color, then it's then modifying that particular layer in that S V G, and that's how you get that effect.

That's so neat.

So that's how that book works. And then the commerce tech stuff that is done using that lightness less than or greater that in that conditional logic. So again, we're saying if the lightness is less than 50% of that pickett T-shirt color, Then we're gonna run one of two different things. So again, we're looking at the W S F T-shirt, logo, commerce element within the svg, and we're gonna set it to white if it's dark.

If it's light, we then set it to dark. So that's basically if then an Yep, yep. So then is the white and the else is the dark. And that's how you get that effect. With the commerce changing from light to dark. That's funny. Now that's just one example. It could, you, that could be any logo that you want on that t-shirt, but it's just an, it gives you an idea of how to make a product image a bit more dynamic and a bit more fun.

These buttons here are very simple. When you just click on that, all we're doing is saying if that button is clicked, set the value of this color field to a certain hex value. That's the right, and all the JavaScript picks that up in the way that you just described it. Yeah, exactly. Yeah. And that's why we use events in WS form so that when something else interacts with a field, you get a daisy chain effect and all the other conditional logic then runs nicely.

So if we were just to change that value but not trigger an event on it, it wouldn't run that other conditional logic. But because we are. Changing the value and Ws form is saying, okay, that value has changed. There's been an input event. It then runs the other conditional logic, which then changes the color on the T-shirt.

So you get that, that data chain effect happening. So yeah, a little, it's a little bit difficult to explain it, but if you no, that's,

[00:34:01] Nathan Wrigley: and also you can imagine going in all sorts of directions with that.

Yeah, exactly.

[00:34:04] Nathan Wrigley: Doesn't have be color. It could be all sorts of different things, but basically the point is you've got options.

Nice.

[00:34:11] Mark Westguard: Yeah. Yeah. And you can use all the features best we want to. So you can pizza.

[00:34:18] Nathan Wrigley: What can, if you ask, watching this eight.

[00:34:23] Mark Westguard: So again, it's just a regular variation product in WooCommerce. And then we're using conditional logic to say, okay, if somebody clicks on that checkbox, Then enable the cheese layer.

If someone clicks on the basil layer, then enable the basil layer.

[00:34:40] Nathan Wrigley: So this is really, I like to use the cheese layer in all manner of parts of my life, wherever Exactly as cheesy as possible.

[00:34:48] Mark Westguard: Yeah. So this is basically just enabling layers in that SVG file over here to simulate, and this is just, Checkbox is all this is.

So as you click on things, you'll notice the total changing at the bottom right hand side. And that's just being done based upon the price that's set for those particular checkbox. I think we limit it to seven toppings. Yeah. Yeah.

[00:35:14] Nathan Wrigley: Can I ask you a question about this first thing? How do you get the, how do you get the icon next to the text?

Is that in Ws form? Oh,

[00:35:22] Mark Westguard: yeah. Yeah. So that's actually when you create a checkbox, I'll show you how it's done. So let's come outta here. And we'll go down to the e-commerce section and we'll drag price checkbox over here. And we'll then open that up and you'll notice first of all, that which one was I on?

There we go. So you'll notice that we have three columns here, right? Yep. So it's not just one big long list. So that's actually done by using the layout setting here. So you can go to horizontal or grid so on grid. It gives you very granular control over how that those check boxes are laid out.

You can actually do it by break point. So I can say on mobile device, I maybe wanna do full width on a medium-sized screen. I maybe wanna have three columns, for example. Yeah. Or you can just do horizontal and it'll just put them left to but the grid is the one you really want to use. Cause it just looks a lot better.

And then if we go to the check boxes and we open that up basically in the label here, you'll notice when I hover over that there's a little icon here. Oh yeah. I can insert an image. Oh no. And if you click on that, it will open up the media library and then you can upload your icons up to the media library and then inject those in.

And all it does, so our labels enable you to put HTML in them. Yeah. Provided you have permissions in WordPress to be able to do that. There's a little Commonly unknown setting in WordPress as to whether an admin user has the permission to inject HTML into things. So provided you have that permission, you're able to do this.

But it essentially just puts an image tag in there, right? And could, it could be an image tag, it could be any kind of HTML that you want, so you could style text, and that's how we get that effect there.

[00:37:14] Nathan Wrigley: Can I ask another question? Yes. You've got seven as the Yeah. The choice in that checkbox.

How does it, so let's say I pick eight. How does it decide? What is just, how does it decide, okay, I've gotta replace the one that we've just checked. How does it know what to drop?

[00:37:31] Mark Westguard: It doesn't, so it just stopped clicking on it. Got it. Check one first. And then check another one.

Yeah, I remember going through that logic when we wrote the max code for a checkbox. Do we disable the first one they clicked on? No, this

[00:37:47] Nathan Wrigley: is just exactly that. That was what I was thinking. Yeah. Cause you could end up in all sorts of fun things, that would be exactly. Interesting. And then I have another question.

Yeah. But in order to do that, you've gotta click the ad to carbo. Yes. And I wanna know how you get the image That's correct for the

[00:38:06] Mark Westguard: pizza. That we haven't implemented on this demo. Oh, okay. Good. Yeah, so you would just see

[00:38:12] Nathan Wrigley: it just so happened then in that case that the pizza I chose was the same as the one in the image.

Yeah. I just basically put everything on. Okay. Got it. You just won't, that's some clever logic. How did you build the picture? On the fly?

[00:38:26] Mark Westguard: Okay. Yeah. It would be cool to be able to do that, but it's yeah, the because all the dynamic stuff with the pizza itself occurs on this page. Then yeah it's kind it impossible to do that on the next step.

So the next step would just be everything. It be normal coincidence. Yeah. Yeah. Nice. Exactly. Yeah. There's a of. On this particular demo, there's a lot of conditional logic going on with it to switch things on and off. But but you can see how you can,

[00:38:55] Nathan Wrigley: yeah, this is such a great demo for understanding what's possible.

The fact that you can just put things on top of other things and images is a great way to do that. But you can imagine, I don't know, you're selling car parts or something. You can imagine building up a. I don't know, or all sorts of different services where you just need to layer things on top of other things.

[00:39:13] Mark Westguard: Perfect. And these two are extreme examples. A lot of people are just doing some basic stuff. Like for example, you may want to ask a user to upload a file as part of the product they're purchasing. So maybe. They're personalizing a mug and you want the image of the mug, then you can actually use that to upload it.

You can even put Google Maps on products, so if you location. Yeah. Yeah, it could be. Or it could be, sometimes you buy those kind of custom maps Yeah. That people produce. Yeah. You can actually use this to, to do that and determine where they want that. And then that then gets stored on the car itself.

You can do product variations. Let's click on that one. I'll show you repeaters as well. So this is just, again, just sharing that you can put it on a variation product. So you'll notice that the subtotal here, the subtotal, is the WooCommerce product price that's changing when I change different variations.

So everything is changing dynamically. When you are playing around with that.

[00:40:20] Nathan Wrigley: Got it. Yeah. Neat. So it's a bigger thing. You need to be charged more money basically in this case.

[00:40:26] Mark Westguard: Yeah. You can also do repeaters as well. So if you wanna have a repeatable section on here and maybe you want to have a line of text and you want 'em to be able to choose a color and then give them the option of adding another line of text.

They can do that within here as well, right? So repeaters work within the WooCommerce products too. Donate with down conditional logic with down color swatches. This is just a very simple example of how you can do color swatches. So this is just a, basically a radio. The style, like a square with a color on it.

That's all explained in our knowledge base. So if you wanna have a look at that, you can see how that works. And then the last thing that we wanted to go through was all the variables that we have for this particular feature, the WooCommerce extension strap. It's quite expensive. But we'll scroll down here.

I don't think there's anything else that we've missed. But if you really wanna get into this, have a look at this documentation, cuz this just covers. Everything that we do with the extension, all the custom fill types all the e-commerce fields that you can use to customize product pricing. We've got all the settings in here that show you, we were going through how to exclude from the WooCommerce car and orders configuring, configuring those products.

Oh, just one thing I wanted to show quickly that I forgot. Let's just go back to a. We'll go to that last product that we created. There's actually two ways of determining how the form is configured. So you can actually do it at a form level, which is what we're doing here. You'll see here the configuration source set of form settings.

Yeah. So that's gonna use that. The settings that we showed in form settings, woo. But you can actually do it. If you wanna override that, you can click on custom settings here and it'll actually enable you to override those settings at a product level. So if you've assigned a form. Oh, I see. Yeah.

So if you've assigned it to say, 400 products, but on one of them, you wanna do something slightly different, right? Then you can click custom settings and override what you've got set up on a product level. Sorry. If you

[00:42:37] Nathan Wrigley: leave something blank, so say in the case there, you've got price prefix.

Yeah. Will the, let's say you've got a category assigned to those 400 products. Yeah. You want this one to be separate, but you're happy for the price and the suffix. Sorry. The prefix and the suffix. If you leave 'em blank, will they take it from the. The original?

[00:42:55] Mark Westguard: No, it'll literally be blank here. Yeah.

You've gotta fill it out in its entirety. Got it. Yeah. Yeah. So that enables you to override it with a blank value. Got it. Otherwise it would adhere it from that. Oh yeah. That,

[00:43:05] Nathan Wrigley: yeah. That would be somewhat pointless. Yeah. Good

[00:43:06] Mark Westguard: point. Yeah. Yeah. So we just override that. Yeah, so that's how you set that up.

So let's go back to this documentation here. And so what you wanna do, if you go right to the bottom of this, it's quite a long list. Oh boy. Bits of form variables here. So this gives you examples of where you can use WS form variables on your form. Now, some of them can actually be used. On the page itself.

So if you wanted to use the product price in a calculation, for example then you can actually use those. So here's, there's an example of that here. Make it a bit bigger so you can see it. Yep. Got it. So this is an example of using our calculation and that's pulling out the WooCommerce price. That's the price of the WooCommerce product, and we're multiplying that by 0.5.

So if we set the WooCommerce product price to 10, that would output five, obviously. Yeah. And you can use that in calculations. Maybe if you've got a variation product, which goes from say, one to five and you want that to adjust other prices on the price, on the product itself, you can use these calculations to do that.

If you have a look at our knowledge base and just type in calculated fields, you can see some examples of how calcula calculations actually work. And I think we covered that in our dynamic. Yeah, we did as well. And

[00:44:26] Nathan Wrigley: it gets incredibly d dense, doesn't it? You can really do almost anything if you're prepared.

Yeah.

[00:44:33] Mark Westguard: Yeah. Like mortgage calculators and all kinds of stuff. Oh, that's right. It was on the first

[00:44:37] Nathan Wrigley: episode. You got one of those wrong, didn't you? Something? And it's

[00:44:40] Mark Westguard: yeah, I remember now. Yeah. Yeah. So this, this is basically what it's saying is you can use variables that relate to the product that's on in your calculations.

So you can see all the different Ones that you can use here. So you've got just a regular price that shows it without currency. This actually returns it in a floating point format, which is good for calculations in things like JavaScript and things like that. And you've got, so you've also got the the regular price.

And what'll happen is if you've put a sale price on a product, let's say the regular price is $10. The sale price is $5, then this would be $5. This would be 10. Cuz this is the regular price of the product. So if you wanna refer back to the regular price, you can do and then we've got price total.

So this is actually the WooCommerce product price plus the price on the form itself. And then if you carry on down, we then got action variables as well. So what are action variables are these are variables that you would use in things like send email or maybe pushing some data to a third party or using it.

In some custom code that you're running on a third party in a webhook. But you've got everything here from the WooCommerce order id, the order number, the status, the pricing. Below that you've got details about the user. So if the user was logged in when they placed the order, this is their user id, their first name, last name, email.

You've also got all the billing information that they've typed in available to you. And all the shipping information available to you as well, so that's useful if you're pushing this data from an order into a cdm, you can actually use WS form to do that, so you don't need a WooCommerce extension for pushing that data to a third party neat.

You can use any of the WS form integrations we have with this data, and you just need one plugin to do it. So there you go. That

[00:46:46] Nathan Wrigley: is truly a lot. Considering it's just an add-on to Yeah. We've been through the other four episodes, all of the other bits and pieces that it can do.

You mentioned at the front of this episode that you ha, you buy this from Woo, right? It's not available on your, on the WS form website. Yeah.

[00:47:07] Mark Westguard: That's proclivity selling things

[00:47:09] Nathan Wrigley: on top of Woo.

[00:47:11] Mark Westguard: Yeah, so basically it's one of the extensions in the Woo marketplace. We do that for a number of reasons.

First of all, it ensures that our code. Adheres to all the conventions that they have around WooCommerce. So when we submit this to the WooCommerce extension, it actually goes through a vetting process to make sure that they're happy, that it's gonna work well with Woo. It also then becomes part of your upgrades for WooCommerce.

So WooCommerce has its own kind of micro licensing environment. So you have a licensed folk. Any of your other extensions that you have, they all become part of this, so you're able to see if the license is about to expire, you can see that all within your WooCommerce account itself.

And yeah, so this is we keep it just with within Wu because if people are looking for this type of functionality and they're doing a search for it, it's gonna appear in the WooCommerce search on this page. But yeah, so it's it's actually. Compared to some of the extensions are a lot cheaper than the other ones as well.

So we, we actually bill it at $49 a year. Yeah, I was just gonna say.

[00:48:21] Nathan Wrigley: Yeah, so $4 and peculiar amount, isn't it? $4 and 9 cents a month, or, go for the whole year as it were 49 bucks for all of that functionality. Yeah. Mark, it just occurs to me that we haven't ever talked about the pricing of the whole.

The whole panoply of stuff that you do. Do you want to just get into that quickly? Yeah, we've got a couple of minutes left. How does the, yeah okay, so you find that on Woo. I will link to that in the show notes to this episode to anybody who's listening to this after the fact. Go to the show notes and on WP com and here's the pricing for Ws form in general starts while you go

[00:48:57] Mark Westguard: through it, you've probably got a picture.

Yeah, so we've got three flavors of Ws form. We call 'em additions. You've got the personal addition, which is $59 a year. And that basically is for a one site license. And if there's any of the integrations that you want, you can just buy those a la carte. You don't have to buy all them. You can just say, if I want MailChimp, for example, you can buy that one.

I think it's 29 a year. So that's great for a single site where you've just got the base product. If you want to do integration, you can add that on if you wanna. Then you've got the freelance edition that's $149 a year. That gives you a license so you can run WS form on five sites. But it also includes a number of the add-ons.

So some of the more popular add-ons come with that particular version. So everything from Amazon, S3 and Google Drive and Dropbox for actually pushing file uploads. And then you've got some popular integrations like MailChimp and mail, things like that. And then the agency edition, this is basically everything but the WooCommerce extension, unlimited sites. You get our agency level supports you kinda higher up the queue when we get the support tickets in. And that includes every integration that we have. So if we add any other integrations to WS form, you get those automatically when we add those. So yeah, it's around. 70 integrations in total.

And that's all included with the agency edition. So it's it's great value. And with your 20% off from WP Builds that brings it down to about $200 a year. Yeah.

[00:50:33] Nathan Wrigley: So yeah, that was at the beginning. Either it coupon code WP Builds, I think it was. Yeah, you can always use that. Yeah. But it brings it down to roughly $200 and that gives you unlimited sites.

So if you're an agent, yeah, there you go. Look. You go know Nathan this time as well? Yes. Oh, there is,

oh

[00:50:53] Nathan Wrigley: dear. I spoke to soon, popped up. 20% off the link is there and the coupon code is obviously there. And just before we. Mark, first of all, thank you for that. That was great. No questions coming in.

Absolutely. So either you explained it very well or nobody's watching you decide. Probably nobody's watching. Yeah. The the other thing is we're back next week and you are gonna talk about the topic, which nobody seems to be able to ignore at the moment, which is AI informed. Yeah. If I'm right. You were one of the early movers with AI in anything, frankly.

Yeah, you'd got it right in WS form. So I'm curious as to how that goes. Cuz in my head I'm struggling to imagine how a form might integrate with ai, but let's find that. Oh, you'll see next week we're doing that. I can't remember, but, we'll, I think so, yeah, we'll put the date on the WP Builds.com website and one last little tiny treat just before we go.

So this is where I live. Go on, do it cuz it's funny.

[00:51:56] Mark Westguard: I also live there too.

[00:52:00] Nathan Wrigley: That's hysterical. We even got his mic.

[00:52:06] Mark Westguard: That's

[00:52:08] Nathan Wrigley: You tried moving. I can't move

[00:52:09] Mark Westguard: mine. No,

[00:52:10] Nathan Wrigley: exactly. That's hysterical. And look, there is a slight variation mine. Mine moves.

[00:52:17] Mark Westguard: Yeah. I can't interact with my environment. Oh, that's, So

[00:52:20] Nathan Wrigley: funny. That's brilliant. All right, we'll be back next week. Thank you so much for joining us. There were a few people watching live, but there's nobody putting any, oh look.

There you go. John Hase. Thank you so much. He's put he's put he is watching live. Great episode guys. Thank you so much. Yeah. Maybe sometimes there is no commentary. That's just the way it goes. We just dunno what they're missing. They don't dunno what that is. I wanna get a screenshot of that.

Can you get a screenshot of that? Cuz that's hysterical. Yeah. Lemme just grab it and then send it to me. That would be so funny. End this show. Have you got it? Yep. I got it. I'll see you. See you next week. Take it easy, mark.

[00:52:55] Mark Westguard: Bye. Take care. Bye.