Introduction to WooCommerce Product Options
So WooCommerce offers a lot of great functionality straight out of the box, but it still needs some extra plugins to do many tasks that a typical online shop actually requires. Now one of those areas is the ability to add extra product options like message fields, date pickers and loads more.
In this video, I'm going to show you a completely free plugin that offers a load of extra and very useful functionality. So let's just jump over into WordPress and take a look at how to easily add additional product options.
Plugin Overview and Setup
In this video we're going to be using Extra Product Options for WooCommerce. It's got over 10,000 active installs and a five star rating at the time of release. So as you can see, it's a pretty popular plug-in. I've already gone ahead, installed it, and activated it, and now we're ready to start adding those extra product options to any other products inside our entire site.
To start using the plugin, it's really easy. Once it's installed, you simply come to your products, and inside there you've got a new option called Extra Product Option. Now we've got a couple of different things we can do inside here. We can create individual product options or we can create groups which are called sections. So first of all, I'm going to show you how to create an individual option, then we'll take a look at the sections.
Creating an Individual Field
So let's start by saying Add Field and then we've got the options for what kind of field we want to create and the options are associated with it. As you can see, the field type, there are quite a few different options and I'm not going to go through all these, but once you've seen how it works, the whole process is pretty simple and straightforward so you shouldn't have any real problems moving forward.
So let's start with a really simple example. Let's just change this field type into something like text area. And we're just going to call this message, give it a label of message, and we're going to drop in a placeholder: "Please leave your message here." There we go. So you can set the number of columns, the number of rows, entirely up to you what you want to set inside there. And we can even set validation if we want to, depending upon the type of content that's going to go in there. We'll leave that to no validation. We're going to set this to required so people have to fit it in and we're going to enable it. Once you've done that, then you've got the next step which is the display styles.
Configuring Display Rules and Styles
You can choose next or you can just use the options on the left hand side. So you can see we can drop in some custom CSS classes and so on. So then we can customize anything inside here to make sure that it fits into whatever theme, whatever design you're working with. I'm going to leave those out for now because I think it's more a case I want to show you how this works, and if you want to again, start customizing things you've got the options built in.
Then we've got the label position, and you can see we can choose from a couple of options. For this example, we're going to say we'll pop this above the field itself. And then we've got probably the most interesting of the options, which is the display rules. Now we can set up display rules to specify exactly where and when this new field is going to be displayed. So you can see we can choose between products, categories, and tags. For this example, we're going to say a category, but you could filter it down to a very specific product if you needed to do so. We'll say category, then we've got the operator which is equal to, not equal to, not in. So we can say is equal to, and then we can choose the categories we want to assign this to. So you can see we've got a range of different options and we don't have to choose just one, we can have multiple. So we'll say we want this in cactus and we want this in plants. And if you want to set up more complex conditions you can use and/or operators, and you can build up your conditions to make sure you attach this to exactly the product or product range or tags or whatever it is that you want this to apply to. Once that's done, save and close. We've created that. You can see there's our new custom field. We'll just hit save changes on there and we've now got a custom field assigned to that particular or those particular product types.
Verifying Frontend Integration
Hopping over quickly to the front end of the site and let's open up one of our plant products. And as you can see, there's our custom message, our new custom field. And we can drop in what we want there, "Hello world", something mind-altering. Add that to the basket, and you'll see that once that goes into the basket we now have that extra information. So you view our products inside our basket, you can see there's our message that's also being transferred over. When we go to the checkout as well, any information will be passed over to our product information. Again, you can see there's our message, so we know everything is going to be included. And once you place our order, that will be stored as part of your actual order itself. So everything you need is in place. And like I said, that's a simple option, but we have plenty more to choose from.
Grouping Fields with Sections
Now on top of creating individual fields, we can also add sections and we can then group different fields into a section. So let's just go add a new section and you see we've got a very similar interface. So we'll give this a name and we'll just call this additional_options, and then we'll give it a title of the same thing again. Then you can choose your display position, join it before or after the add to cart button. Well, we're going to leave this before. You can choose the display order, so if you have multiple different groups or sections, you can specify exactly what order they'll be displayed in. You'd also do things like set the column width for column one and column two, so let's just for example set column one to be 30 and column two to be 70. Okay.
So you say show section title in product page. Again, up to you whether you want to enable or disable that. Then we've got display styles, which looks pretty much the way we saw it earlier on. The only difference is now we have the title option. We can choose a custom title, so making sure this kind of fits into the style of the actual shop that you're working with. I'll leave that as it is. and then you've got the title color. So we can just set any color you want on there, so let's just set that to be red for this example. And again, we've got the same display rule section, but this is now going to operate underneath this entire section as opposed to an individual custom field. So now we're going to do the same thing again. We say we want to put this to category, we say it's equal to, and we'll do the same again, we're going to say cactus and we're going to say plants. Then we'll just say save and close, and we've now created our custom section. So what we do now is just go over to the additional options and that's going to be our section, and we can just now add fields in exactly the same way as we did to start off with.
So let's add a different field this time. Let's come in and do something like, we'll set a radio box for this example. And we're going to give this a name of pot type, and we're going to give it a label of the same, pot type. So the options then, separate the options with a pipe so you can add in multiple different options. So what we'll do is we'll just put terracotta, if I can spell that correctly, there we go. Put the pipe symbol in, and we'll just do standard, and we'll just do a final one of no pot. So then you can set your default values. You can choose any of these to be a default value, so we're going to say as default, we're going to say no pot. Again, you've got your required and enabled. Display styles, you can see again, all exactly the same. This time we're going to specify again this is above the field because we have quite a few different options. And finally the display rules. So again, category equal to cactus and plants. Save and close that out.
Once that's saved and closed, we'll save these changes. And then we'll just create a second one. So we're going to do another again. So we're going to come in and we're going to say we want to add a new field. We'll change the field type and we're going to set that to be a date picker. And we're going to say delivery date, and the same underneath for the label: delivery date. And the default date, well, we're going to leave that as it is. Placeholder, we're just going to say, "Choose a date." Required, enabled and read only. Obviously we don't want to make this read only, but there could be times where that's relevant. So we're going to say this is required, it's enabled. Display styles, we're going to say left to field is perfectly fine. Display rules, and again, we're just going to set this up to be exactly the same, but like I say, you can set these rules up in any way you want. We'll say save and close. So there we go. We now have these two custom fields inside our section, and they've been assigned to our specific product categories. So okay, save changes just to make sure everything is in place.
Final Review and Advanced Settings
And now if we come back over and take a look at one of our plants, let's just refresh this page. And you can see there's our additional options. We still have our message above, but the additional options are all grouped together. So now you can choose whichever of these that you want. So say we want to put in a terracotta pot. We'll choose a date of that, for example, and we'll just say a message and again, we'll add that to the cart. And we'll just say view our basket and again, you can see there's all of our details, all our custom information has now been added in. And the same applies if we go over to proceed to checkout. Everything is inside there and we'll be passed on to our order details.
Now that we've seen how all this works, there is one more option I just want to quickly show you so you can get a little bit more fine tuning on the way this all works. If we go to the advanced settings tab, you can see we have some additional options. So products having extra options, and we can select those options. We've got simple products example add to cart and variable products select options. So you can control the actual wording that's going to be used on there, the text. Then we have the other settings which allows us to do things like hide the custom fields in the cart, the checkout page, hide them in the order details, allow posting extra options as URL parameters. So again, if you need any of these options you can enable or disable them to make sure that everything works the way you want. And you can also import and export settings. So you can see this is backup and export. So you easily copy all this little block of code once you've set everything up. And if you wanted to do exactly the same on a different store, install the plugin, paste this then into the import settings option, and you are good to go with all those options set up. So very quick and very easy to work with.
Conclusion
So WooCommerce Extra Product Options is a very useful free plugin. But if you'd like to take a look at another free alternative, check out this guide to using product add-ons for WooCommerce. Now, if you've got value from this video, please consider subscribing and smashing that bell icon to be kept up to date with all of the new content I release each and every week. If you didn't enjoy the video though, well feel free to hit that thumbs down button twice as that seems to work pretty well too.
As always, all of the applicable links are in the description below. My name is Paul C, this has been WP Tuts, and until next time, take care.
