in this tutorial i'm going to show you
how to add extra custom product options
and sections for those product options
inside of woocommerce we're going to add
these to our rainbow macaroon products
so people can customize their orders
and we're going to see how all that
works in this tutorial if you have any
questions or comments please leave them
down below this video i try to answer
them the best i can
my name is bjorn alpacas in the ep
learning lab where we help you get
better wordpress so you can earn more
for yourself for your customers and for
your business
and if you haven't done so yet make sure
you click subscribe ring the bell so you
don't miss any future videos
and now let's get started so to add
custom options and custom sections to
our rainbow macaroons
the very first thing we're going to do
is add a plugin let's go to plugins
and then add new and look up extra
product
options and the one we want is this one
right here 5 out of 5 rating 20 000
active installs untested with the
current version this should be updated
pretty soon they keep this
plug-in up to date quite regularly i'm
going to click on install now
and then activate if you're installing
this on a live website i recommend you
back up your site first
check out the tutorial on the card above
and the description down below
which will help you back up your site if
you need help it's always best to have a
backup
it's pretty rare things go wrong but
when they do it's good to have a backup
now that's installed and activated we
can go to woocommerce
under products and then we have the
extra product option link right here
now this allows us to add custom fields
to our product let's just see what our
product is
it is this guy right here the rainbow
macaroons
and what i want to add here is the
ability for customers to
customize their rainbow macaroons for
example we have different
fillings different color combinations
maybe they want to have an
orange top and a red bottom or a pink
top and a red bottom or
have both sides green you get the idea
just
custom options so i'm going to come back
in here and
we have the ability to add product
options
as single options and to add new
sections
which will add a in our case a
customization section
to our macaroons so first i'll show you
it is to add the single options
so let's go to add field and let's make
it a text field
there's a lot of options to choose from
we'll go through a couple of these
they're all very similar so once you
know to do a couple of them
it's it's all the same so for the name
i'm just going to enter
top underscore color this is for the
plugins reference this is not
visible by anybody on the site for label
this one is visible this one will show
up on the website i'm going to call this
top half color
default value leave blank for the
placeholder
i'm going to say what do you want the
color of the top
half of your macaroon to be for
validation i'm not going to choose
either of these
because it's not email or number field
and i'm going to make this required
and make it enabled and if you're
finding this tutorial helpful
click the like button because that helps
this video show up for more people
on youtube so we can spread the
knowledge and help more people with this
information so make sure you click like
if you like this video we also have
display styles
options we can give this specific field
a wrapper
for the entire field including the label
you can have a class for just the label
itself
and you can choose where labels should
be left of the field or above i'm going
to choose above so the field is larger
for display rules you can set where this
will appear
this is specific to our rainbow
macaroons we don't want this to appear
on all other product types
so i'm going to choose product
equals start typing
rainbow macaroon so this custom option
field we're making right now is only
going to appear in the rainbow macaroons
which is what we want you can add a lot
more conditions you have and or
operators
you can customize very specifically
where you want these fields to appear
i'm going to save and close i'm going to
click on save changes
and now we're going to see how this
looks let's go back out here and refresh
we have our new field right here top
half color
what do you want the color of the top
half of your macaroon to be
can't see all of it you want to shorten
the placeholder so it's all visible in
the field
and for the color option it might also
be a good idea
to make it a drop-down instead so let's
change it from text
to a select we're going to keep it the
top half color
labels top half color this is where we
set the options these are separated by a
pipe character
i'm going to make them red
orange blue
green when there's a text field and
people can just say whatever color they
want they might say
fuchsia or magenta or i don't know
sunflower
and you might not have those colors we
know that we have red orange blue and
green so we're going to force them to
select one of those
for the placeholder of a select box or
drop down i like to have
select as the placeholder default value
leave that as it is make this required
let's click on
save and close save changes
come back out here refresh again now we
have this as a drop down
now they pick a color and they we can
find them within the options that we
have available
which i like much better so that's how
we add custom fields and you can add
more than one
you can duplicate this let's just call
this one bottom half color
bottom color keep all the rest the same
click on save changes save changes
refresh out here now we have a top half
and a bottom half color
but because we're adding a bunch of
different options for customizing
macaroons
i think we should have a separate
section to add a separate section this
plugin
allows us to click on add new section
for the name slash id
we have to give it a name like we've
done for all the others this is specific
to the back end the visitors will not
see this name it's just for the plugins
reference and for your reference so make
it descriptive
no spaces just words numbers and
underscores
i'm going to call it macaroon
customization give it a title
of choose your options i think is a
pretty good one
you can display it before the add to
cart button you can also have it after
if you want
if you have multiple sections you can
change which order they display in we
only have one
so we can keep that as it is the column
width 1 and column width 2 we're going
to keep
blank but you can specify specifically
how wide you want them to be if you
leave them blank they just fill up
whatever areas available we also have
some other display styles we can add
classes
for css to wrap or for the whole wrapper
or the whole section
and we have a title class for just the
title we can choose the title type we're
going to choose h3
and title color by default it'll pick up
the theme color for h3
or we can define a specific color right
here and display rules
we're going to add this specifically to
our macaroons again the rainbow
macaroons
and then click on save and close and now
we have our new section
called choose your options if we click
to there we see we don't have any
options inside of here
they're all over here and as far as i
know you can't move them so we just have
to recreate these
under choose your options so i'm just
going to delete them from here
let's just select those and click on
remove
and then go to choose your options and
i'm just going to add those fields again
i'm going to have select area top color
top half color placeholder is
select and options
these guys make that required display
styles
put it on top above the field the
display rules we don't have to set these
because they're inside of a section that
already has display rules
but you could theoretically i think if
you have
your sections appear on a whole category
and then you can have specific display
rules for specific fields within that
category
or the specific products within that
category to have this specific field
appear
if that made sense save and close
duplicate that i'm going to make this
bottom half color and keep
everything the same and save and close
and then save changes let's see how this
looks
it should put it in its own section
refresh the page
and here we have choose your options in
their own section
these ones are still there so let's go
back
to the default let's remove those again
and then click on save changes instead
of going to the next tab
now they should be gone there we go we
have just a choose your options section
and this extra border is produced by the
theme i'm not exactly sure why it's
there it's not usually there
because we don't have a border set for
these options here
so if this appears you have to use some
css to make that border go away
let's go back to choose your options i'm
going to add another field
i'm going to make this one delivery date
so i'm going to choose a
date picker field give it a name of
delivery date
label of delivery date placeholder of
when do you want these to be delivered
default date is set to none
what if you get set like one week from
now just uh whatever the today's date is
the default date is always one week or
one day or seven days
five days or whatever from today not
sure if you can do that
click on required to make it required
i almost always had label position at
the top of the field display rules we
don't have to set
because it's inside of a section that
already has display rules click on save
and close
save changes come back out here and
refresh
and boom we have a delivery date which
is a date picker i click into there
which is pretty sweet let's just run
through how this actually works
let's choose a top half color of red
bottom half color of blue
delivery date of that
and let's order five of these click on
add to cart
now let's click on view cart and it
shows
right in our cart what our options are
top half color red bottom half color
blue
delivery date january 27th and this is
what
your customers will see obviously when
they're on the checkout page this is
what you will receive
in emails that you get when they order
this is
what they will receive when they order
so everybody's very clear
on what the options that were chosen
were and so you can deliver
the appropriate product we can also come
in here and go to advanced settings
and we can choose where we want those
options
to appear these options right here that
i have highlighted
whatever the customer selects from your
custom fields you can hide them on the
cart page you can hide them on the
checkout page you can hide them from the
order details page
you can also let me be posted as url
parameters if you're more developer
oriented
you can choose that option so you can
choose any of these that you want
i would usually keep them on so people
are very clear what's happening
unless of course you have a list of like
30 and then it might not make sense to
have them on the cart page or checkout
page
but you definitely want to have them on
the order details page
you want to have them somewhere to make
sure everybody is on the same page and
then down here we have backup import
settings we just copy and paste
this entire code from here copy it go to
a website where you just install this
plugin
paste it into here click on import
settings and then all your settings will
be imported
making it super easy to transfer sites
you can also modify the add to cart
button text
that you see here by entering text in
here and the very last thing
you can reorder these guys if i wanted
the bottom color on top
just click and hold and drag this
hamburger icon and
we have reordered things when you've
done that click on save
go back out to the product refresh
and we now have those guys reordered
you can also duplicate sections by
clicking the duplicate button right
there
now about this extra border that we have
that we don't want let's see if we can
get rid of that
let's click on inspect and let's switch
this back to
not responsive and let's see if we can
find out why that's happening
we have a border right here on tables
one pixel is solid if i delete this
those borders are gone so if i take
this right here it's going to copy this
whole thing it's going to click and drag
and copy that and then
let's close this let's refresh
so it comes back so we can make sure the
change we're doing is actually saving
and let's go into appearance and then
customize
scroll down to additional css paste this
in
we just copy this from our browser and
let's make this border none
click on publish come back out here and
refresh
and now hopefully the board will be gone
and the border is gone
now this is kind of uh apparently the
best way to do it because
this will apply to all tables on the
site so somewhere in this theme
this is the astra theme somewhere in the
theme this was coded in
to add a border to tables and now by
saying
that css selector the tables border none
no tables that have borders now so it's
not ideal
though we did it there so what we
probably want to do is create css
classes for these specific
options inside of the options inside of
the plugin
by clicking the pencil beside any one of
them go to display rules
and add classes for labels in the
wrapper and then do some trial and error
and find out which one we can add border
none to
to make the border go away so that's how
you'd make that
border go away depending on which theme
you're using you might not even see
extra borders or any kind of display
issues
and if you found this video helpful next
up check out this playlist it's all
about woocommerce tips and tricks
there's a whole bunch of videos to help
you improve your woocommerce shop
right over there so check that out if
you haven't done so yet make sure to
subscribe and ring the bell so you don't
miss new future videos
my name is bjorn all past no ap learning
lab until next time keep crushing it and
i'll see you
in the next video