Custom Product Options WooCommerce | 4 Free Add-Ons

well woocommerce offers a lot of functionality straight out of the box it still has a lot of missing features so features that can be incredibly important to many online sales websites and e-stores one of those areas is having the ability to add extra product options options like messages instructions date pickers and much more in this video i'm going to show you four totally free options that should help you cover most if not all of these basic bases will there be perfect options for everyone well i very much doubt it but for the majority of use cases this collection of free options should give you a solid starting point but if you need more then you may need to upgrade to more pro options okay so let's kick things off with the first of our four free additional product options plugins for woocommerce first on our list is product add-ons for woocommerce from ecoweb this free plugin offers a hell of a lot of functionality for the non-existent price tag while it would be too much to go into each and every feature here's a quick list of the key field types it supports we've got things like text fields number fields radio fields check boxes select fields text areas date fields color fields password fields hidden fields paragraphs and headers you kind of get the point what's more it is relatively easy to work with too now one of the major things that is lacking though in this free version is the ability to change pricing based upon your added fields so this is a key aspect of your additional field requirements for your woocommerce store you may need to either look elsewhere or if you like the way product options for woocommerce works you could take a look at the pro version which takes all of the key aspects from our list and adds in even more including the ability to adjust pricing based upon your additional fields another key area for some that may be missing is the ability to add an upload file field again this is available in the pro version however you look at it though the free version of this plugin offers a lot of great features for zero cost so let me just give you a brief tour of product add-ons for woocommerce this is kind of what you're going to get so once you've installed and set up the plugin this is kind of what you're going to have so what we can do is we can start building out our form which is going to include our different options so first of all let's just give this a name we'll just give it additional options it's not too important now if we look on the right hand side you can see there's all the additional option field types we have to choose from and it is as simple as just dragging and dropping so if we want to add a text area for example we can just drag that over and that includes a text area now we can just come in and edit anything we want inside you so we can click on the little edit icon and we can now set us a required set the label up so we could say message for example set it to be required we can put a message inside for the placeholder so say insert your personal message here so you can see you can just customize this you can apply classes if you want to to this as well so if you wanted to target this specifically with your own custom css you could do that you've got your name for this what type of value maximum length number of rows those kinds of things we can close that down if we don't want to use that we can click on the x to remove it or we can just duplicate this if we want to use this as a starting point and not have to go through creating all the same settings so we can click on there edit this and we can just change whatever we kind of want inside there and to remove it just click on the x job done easy as that i want to add in some color picker or we can do the same inside there and that now gives us our color picker and again we can choose to set this required labels placeholders classes all those kinds of useful things so you've got plenty of options inside you none of this is particularly complex and if you want to reorder these you can simply just drag them into the new position job done very very easy to work with another nice feature is the fact that we have a hidden input field so if we wanted to use this to pass some data over for our order but we wanted to be sort of hidden we could do just that and we can drop a label inside there a value all those kinds of useful things so that's pretty cool to see we can also drop in paragraph and headers if you wanted to give instructions on how to use any of these sort of extra options you're added in you could do that by simply dragging paragraph in there editing that putting whatever you kind of want in there setting any type classes whether you want this to be p for paragraph or you weather set this up for something else you could do that inside there and the same kind of thing goes for the header you can drag and drop your header in and then you can edit that set that's whatever you want so let's just say additional details required for example doesn't really matter too much there we go just check that there we go and now we've got our whole section heading in there so that's how we can create these additional options but how do we go about using them how do we assign them to products or categories and so on well the eagle-eyed among you will probably have noticed we've got this product categories checkbox on the right hand side and this allows us to globally assign this to a particular group of products so for example you may want to have the additional details required section only available to furniture items or only available to accessories you could do that you could select everything if you want to but what if you've got items inside there you don't want it applied to we can deal with that as well so let's just set this to work with accessories we'll update that and now all of our accessories anything is tagged as an accessory and a product category will have this assigned to it if we take a look at the cushions which is an accessory as you can see at the top accessories you can see there's our additional details required looks a bit ugly at the moment but a little bit of styling and this would work perfectly well and you can see there's our custom message field inside there ready for us to insert and as you can see it's marked as being required so everything we've set up is working fine now let's go back and take a look at something else under the accessories category so for example the candle holder we click and open that up and you see there's our additional details required field so everything's working fine let's just say we don't want to apply this to the candle holder it might make no sense we can deal with that let's just come back over into our products we'll find our candle holder and we'll edit this and we have some new options in the actual overview of the product where the product data sits you'll see we've got custom product options we expand that out currently there are two options inside you select form and configurations now what we can do is we can exclude or override this if we want to so we can check that option we'll update this and that's now going to override the fact that this is in the accessory section and by default it should have that field associated with it however if we come back now and refresh this page we'll find the additional details has gone we've overridden that side of things which is pretty cool now let's just say you want to do the kind of opposite of that you wanted to have a product that wouldn't normally have this associated with it so let's just find a product that's in a different category for this example we'll tune choose the lounge chair which is in the furniture category we'll edit that we'll hop down to our settings into our custom product options and we can use the option to select from any of our custom field groups our custom groups of product options so let's just take a look at the lounge chair as it is at the moment and you can see there's no additional field in there for a message however if we come back in and say we want to apply that to this particular product even though it's not in the accessories section we'll update this we'll hop back over there to our page we'll refresh this product and we'll find there's our additional details required so you can assign it globally you can assign it to individual products you can override that global assigning lots of options inside you so should have most things you should need unless of course like you say things like file uploads changing prices and so on this is just additional kind of details and options associated with the product if you want to learn more about product add-ons for woocommerce plug-in then check out my dedicated video on getting started with it there's a link in the corner right now and also in the description so you can check that out once you finish this video next on our list of three plugins is extra product options for woocommerce from theme high now if that sounds familiar it's probably because i've covered several of their free plugins before including this one in some of my other woocommerce videos not much the same as product add-ons for woocommerce we've just taken a look at extra product options for woocommerce offers a very similar set of additional option types now for example we have the usual suspects things like number fields text fields select fields and more you also have some useful options for where your additional options will be displayed on the single product page you can choose between two options before or after the add to cart button so this allows you to easily position where your extra fields will appear in the design of your website which i think is quite a nice little touch on top of that you also have some advanced features like display rules display styles display and custom fields and more for a free plugin extra product options for woocommerce offers a lot of interesting features and should certainly be on your list of plugins to test out if you need these kinds of features again there is a pro version available to buy and that comes with four additional field types we have multi select time picker file upload and html you also get some additional display rules price fields and a lot more so if you're looking to up your game over the free version the pro version offers some pretty compelling additional features to power up your online store so you may want to check that out again the link will be in the description along with the free version so extra product options works in a very similar fashion to what we've seen in the previous options you can see this is where we're going to access all the different settings the product options the fields we're going to add plus some advanced settings and inside there it's pretty simplistic you can see we've got product having extra options what do you want to write inside there do you want to change the add to cart buttons those kinds of things and you also got some extra options to say do you want to hide these various different things from certain pages throughout the sort of shopping experience we'll leave everything as it is because i just want to briefly show you how easy it is to add in extra product options so what we're going to do is you can see i currently have colors it's set up inside you let's add a new field now you can group these into sections if you want to so you can have a nice grouping of various different product options or you can just go ahead and have everything sort of lumped into one location i would recommend checking out the full tutorial on this so you can get a better understanding but briefly let's add a new field in and you can choose what type of field you want so again we'll just stick to the same ones we did before we'll choose the option for a text area but again you can see there are plenty of different options available inside your passwords telephones and so on let's set a text area we'll name this message all lower case the label message and again if you want to put a default value you can and if you want to put a placeholder in you can't say please insert message here like we did roughly on the other one set your columns your rows your minimum length your maximum length any validation if it's applicable whether it's emails or numbers so pretty limited but you shouldn't need too much inside here for most use cases and whether you want to set this as required or whether you want to enable or disable this that's the basics of creating things now we can choose where we want to display them so this differs a little bit in some respects to what we've seen in the first example you can see we can set our wrapper classes and our label classes which if we want to assign custom css we can do that and you can set your label position whether it's above the field or left of the field so again however you want to set this i'm going to choose above the field for this example then our display rules allows us to fine tune exactly where this particular field or group of fields custom options add-ons whatever kind of call it where they'll be displayed within your shop structure so this can be pretty uh specific if you want or quite broad you can see we can choose between a product a category or a tag if you're using tags we'll keep this really simple and we'll say category then you can choose the qualifier in other words how do you want to compare equal to or in or not equal to not in so it allows you to easily use one of these two options to specify exactly where you want things to show up or where you want to hide things so we're going to say is equal to i'm going to stick to the same as we did the first example accessories so we'll come over here we'll click and this will then show us everything we have available so let's choose accessories so now this new field this message field is only going to apply to the category that equals accessories i can if i want to add more inside here as well so if i wanted i could use and or or so you can stack these on top of each other and create quite comprehensive display rules even in the free plugin let's keep this really simple though and stick to what we have and say save and close so once we've done that we've done everything we need in it we'll save changes just to make sure that that's all been applied and then we can take a look at our products inside the accessories section and check to see how everything looks there we go if we hop over to our cushions page you can see there's our custom message and please insert your message here everything's been added in as you can see really really simple to work with and if you want to come back in and edit these reorder them you can simply drag them around into position you can edit them you can make any changes you want inside you and if we come back over to our products and we go into something like furniture for example come down and choose our lounge chair which we know isn't an accessory and you can see there's no sign of that message field so it's really easy to configure and set everything up inside your now if you want to learn more about this free plugin i've got a dedicated tutorial on getting started with the free version put a link in the corner one of the corners right now and also in the description so you can check that if you want to take a look at that once you finish this video extra product options for woocommerce from act pro looks a lot like extra product options for woocommerce from theme high on paper that's a lot of the same name it offers a very similar set of options a very comparable set of feels to our first two options along with display rules that look very similar to the theme high plugin again we've got a very basic starting point we come in and we're going to choose the option to add a new field listing in other words another group or single extra field what are you going to kind of call it status well we'll enable that the name we're just going to call this additional options like before it doesn't really matter too much it's not important in this example and you can see now we're presented with our additional rules in other words where do we want to display this little help message there that'll tell you exactly what this feature is for so you've got a starting point all we can do now is we can choose between products and categories you'll see there's no option for tags inside here so we'll say we want to attach this to a category we have is equal to or not equal to so we'll say is equal to and we'll click inside you and we can start typing in anything we want and it's in case we want accessories again we'll choose that option where do you want to display this before add to cart or after add to cart now for me most cases would be a case of before the add to cart because it's an option that you want people to interact with next up that we've got the option for what type of field do you want as you can see we've already got a blank field inserted so we'll use that but if you wanted to delete this you could just use the action the little trash can on the right so let's just edit this and you can see field status in other words do you want to enable it or disable it say enable or disable the field based upon the checkbox well we want to enable that then we've got the type of field so unfortunately you can't see all of these but we've got pretty much exactly the same as we've already seen so text hidden number password and so on including things like color pickers headers and paragraphs so for this example like we've done before we'll set this up to be a text area and that opens up the extra options then associated with that particular field type if we change this to something like password you'll see we get pretty much all the same things again in there and if we come in and we say it's like hidden you can see that gives us different options so it's context sensitive based upon the type of field that you want to insert we'll go back to our text area we'll give this a name and we'll just call this message like we saw before enable title option so in other words do you want to enable the title you can enable a subtitle option set to be required insert a default value your placeholder those kinds of things so say enable the title option and label class that's perfectly fine and we're just going to set this to be default value it's going to be fine we say placeholder is going to be insert your message here and there we go and again we can set the field columns rows name id class enable and so on you can also enable price on here as well which is quite nice to see so if you want to increase the price you can just set this and you can say adjust the price based upon a fixed value so obviously there's still limitations with this particular plugin but you do at least have some basic options to change the price and then you can put your adjustment for choosing this option inside there so we could say this would cost them uh one pound one dollar whatever to add in a custom message if you want to you can add additional fields and start building up a more comprehensive set of field options additional options we'll keep this simple and say save the changes and we should now have everything in place for our message field so if we take a look at another one of our accessories again coming back into cushions you can see there's your insert your message here and as you can see we've got extra options underneath like add-on details cushion 45 pounds so if we insert a message inside there you can see that now tells that this message is going to cost an extra pound and it recalculates the pricing for that so not necessarily the prettiest but a little bit of styling you could add inside there and you could get this to look exactly as you wanted to but nice to see that we have the option at least to change the pricing even if it is a basic format once again much like the other options you've taken a look at if you want to unlock field types like the uploads colour swatches or image swatches you would need to look at the pro offering however there's still a lot to like about the free version but personally i will probably take a look at the first two options before i take a look at this one the name yif is synonymous with expanding woocommerce and the last on our list of add-ons is yeth woocommerce product add-ons easier to write down than it is to say now this free plugin has the ability to add in a range of additional fields in various formats to your products to open up some additional options sadly though unlike our first three options this is a lot more limited only offering only three different field formats check boxes radio button and text so if you're looking for a little more you may want to look at the other three choices before you take a look at this one they just offer more in the free version now with that being said if you're looking for something simple to enhance your existing store the yif woocommerce product add-ons plugin may be a great option just don't expect to be wowed by an extensive feature set in this free plugin now this one's just a little bit more fiddly to get your head around once you've installed the yif plugin you'll get a new entry under there called yeth and inside there you can see we've got product add-ons which is basically the settings so you can configure this various different things colors of the tool tips and things along those lines so quite useful in there and then you've got system status and how to install the premium version so it's a little bit weird what you need to do is actually come into woocommerce into the product section and into add-ons so under add-ons you'll see we now get an entry called groups which again like i say doesn't make a whole heck of sense we'll add a new group and we'll just call this additional options like we did before you can apply this to a product or product or you can apply it to category or categories so again we'll just apply this to the accessories category if you've got multiple different groups of different additional options you can set the priority and you can choose whether this public hidden or administrator only we'll save that group so that's now created a group now inside a group you can have multiple different options limited to the three types of options we have unfortunately okay so once you've sort of set things up inside there the next thing is to create the actual option or options you want to associate with this particular group of options associated with the categories you kind of get when i'm coming with this it does get a little bit confusing compared to the other three options we've seen already okay so now that we've created the group we now need to manage the add-ons which again the terminology is a little confusing here but the add-ons are basically just the extra features the extra options you want to apply to this particular group of products so let's just say we want to add a new add-on and we can choose from the three options we have checkbox radio and text let's keep this fairly simple and choose text i will say continue and that will then open this section up that allows us to configure things and reorder things if we have multiple inside here so let's just click to edit this and this opens up the options and some of these are premium features so you don't have access to them so anything that has premium after it you can't use that function you can choose again between the type so text checkbox or radio button so we'll keep it to text if you want to apply an image to this you can do that so that's quite cool let's just choose an image from here don't really mind too much where it is let's do something silly so we can see it in action and we'll choose that option and then you can choose the option requirements the title so we'll just say message like we did before we can't use variations we can't use the operator at the moment and the option requirements so we're kind of limited we'll drop a description in you can do that so say this is a message area okay all the other options then are premium there if you want to add images and settings and so on you can add options inside you and if you click to open that up you can see this is where we set up different options so what are we going to do with this well we'll just say option label we'll just say message description message placeholder your message and a tooltip your message again okay do you want to adjust the pricing on this so we can say this will cost an extra one pound or one dollar or you can say a percentage or multiplied and so on so various different options inside there so again nice to see we have at least some basic control over pricing increases changes whatever based upon these different options we can add on okay so we'll save this add-on and we'll just say say well that's it done to be honest these messages were there so that's now been created and associated with our accessories group so let's take a look at it in action let's go to our accessories and let's open up our same product we'll open up our cushions again and you can see there's our message there's our image which looks absolutely terrible tells us this is a message area tells us it's going to cost us one pound and we can click to insert our message so you say you suck for example and we'll just add that to our basket and it tells us there we go there's the product price the additional options blah blah blah is the price we'll add that to our basket again so now if we take a look at our shopping basket we'll see that there's the information and you can see there's our message there's the price increase and so on so we're getting that inside here which is cool to see again if we open up one of our products to edit it we take a look at our product data we have product add-ons which is a new section and inside there you can see we can add groups in so we can apply groups to different products if we want to so if you don't want to use that global setup to apply to all accessories you can control this inside here you can see we can disable the globals pretty much like we saw in the previous options and we can manage all the groups that are available so you can see there's our groups looks a bit terrible inside you can get a small window but you can see we can come in and we can edit things inside there manage our add-ons and so on so you have full control again you probably want to fine-tune and refine this to make sure it sits in with your design but you do have some nice options available to you and again this is totally free and if you find this is useful and you like the way it works and you need more you can take a look at the pro options now whichever of the four plugins we've looked at today you choose to add additional options to your products you can't complain about the amount of features you're getting for absolutely zero cost now if you want to learn more about the first two plugins in the list you can check out this playlist next that's going to give you a much clearer overview of what can be done with them and if you've made it this far into the video then why not give that thumbs up button a click it really does help me out and while you're at it if you like the content want to also click the subscribe button and slap the bell icon but if you didn't get value from the video well feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tets until next time take

Channel: WPTuts

Views: 14,503

Keywords: WPTuts, custom product options woocommerce, woocommerce custom product addons custom product options, extra product options, woocommerce extra product options, woocommerce product options, woocommerce product options drop down, woocommerce product options dropdown, woocommerce product options plugin, woocommerce product addons, woocommerce tutorial, wordpress plugins

Id: ISVIZdpime4

Length: 24min 28sec (1468 seconds)

Published: Fri Apr 30 2021