April 8, 2020
Divi theme eCommerce tutorial Price Tag Customization

Divi theme eCommerce tutorial Price Tag Customization


hi guys and welcome to another Divi
theme ecommerce site bill this is Jamie from system 22 and web design tech tips
calm in our last video we styled these for
sale buttons gone how we wanted them in this one I want to style our price
buttons I know we’ve been doing a lot of styling and not a whole lot of building
but if we do this all that front it’ll see this time later on and we can throw
this site together a lot quicker so what I’m gonna do here is customize these
price buttons just to make them look a little bit more interesting for those of
you that not been watching we’re doing a site build with the Divi theme from
elegant themes here it’s an absolutely awesome theme you can get it from my
affiliate link below this video or you can just go to elegant themes come and
get it from there it is a premium theme but if you use WordPress at all I do
suggest you take a look at it because it’s absolutely awesome and has so many
great features for all kind of different site
so let’s continue I’ve got my visual builder enabled now
I’m just gonna disable that for a moment I will save the changes okay and I’m using Google Chrome here
I’m gonna right-click and inspect this which brings up the fantastic developer
tools box here you want to edit these price amounts I might
have to make them certain color inside itself what I want there there’s our price amount in our last
video we went to Adobe color here and selected some colors up I quite like the
look of only give our price amount this green color right here there’s a
background color you see that’s giving it that green
color there now I want to give it a bit of padding
what I’ve got in mind is making it around save 20 pixels by 10 pixel probably
going to be too much one almost square okay that’s not quite square instead 20
by selecting that and rolling it with my
mouse wheel that looks little more squareness try
that do now give a border-radius make it round which will be 50% okay that’s getting there now it wants to drop down a little bit
more so we’ll have to give it a bit of a line height of more than what we’ve got
going on here so let’s try 70 pixels just so it clears that writing
on top there that’s okay maybe a little bit much oops screw it 65 it’s not that much a gap
there but in that you
took any actual price itself not to be white I may have to change that within
that module they all give Italy important to force it yeah it’s not a dip okay I’ve had to
force it which I don’t particularly like do with that so okay it works and all of
this we want to put in WooCommerce price amount it’s not it’s just copy that all I did
was double clicked on it and they opened it up let’s go to our custom CSS
which is in Divi theme option to general tab right down at the bottom here where
I happen to be which was convenient now I guess we’ll call this prices I’m
just kidding our title so we can find it again at a later date and it was dog
think of it because it was a class will come as price a man I don’t need that
second amount on the end there I do know it’s not gonna work
so let’s copy what we just created here in our inspector console and close some curly brackets place that
code inside there we go just say that my screen check mark go back here let’s
close the inspector out and refresh and hopefully that should stay the same good
all the white didn’t work so we’ve got to change that within the actual module
itself and as you can see our original price stickers changed that
green as well I want to make that actually I want to make that this color
for our modules here so I think we’ll do that inside the module itself let’s enable the visual builder here you this is the section we’re working on
that’s the actual row this is the modules this one here hit the COG let’s
go over to our design because I want to make that price white there we go in the advance I think they’ve got a box
for this old price here in custom CSS that’s fuller
you on sale that’s this price old price that’s what I look for
and our old price but we’ll give it the same padding as we gave this which was it’s for that I think is 20 by
5 wasn’t fact we can copy all this
we delete that color of the bottlenecks it’s not working anyway finger copy all that and just change our
color so we’ve got our padding built in we’ve got our border radius and I wanna
fight you and the reason I’m doing this here and
not the other places but because this I tried it before and this just actually
works better and let’s go back to our color wheel want to grab that purple
color there Oh hot pink or whatever Kelly care to call them let’s replace this color here I’m sure
not to cut off the hashtag yeah there we go that’s kind of what I
wanted like so stand out a little more and they’re sort of color-coded with our
buttons and stuff like that so let’s say that I think that will do so now we’ve got our buttons customized
we’ve got our sale prices customized and we’ve got our item prices customized as
well as our reduced prices but if we look down here
yeah that’s a bit of a mess because we haven’t got the red ones or the pink one
I should say a hot pink one on this because we need to do that within the
module itself but I’m gonna get rid of all these anyway and we’ll just use this
as a template for our new ones which is fine and that will have that styling
there and the reason this is not working is because that text is so much larger I
think this was 16 pics I have no idea what this is but if we were to do that
full circle with this we’d have to drop it down so much and I don’t think they’d
be the amount of room on one line well it might be looking at that but the
other one but I think that’s too big and just for an example let’s go in here
get rid of this module I guess it shirts let’s clean this module
oh there is below move down here you let’s just edit it make it product our
four there we go you then it all automatically for us and as you can see we’ve got all our
colors that we save there and our buttons that we saved there think we
might want to go in and change that to a white color which is the title as we’re
using this background here that’s no big deal
title text drink there we go so every module we
create now all we’ve got to do is change that title text for the according
background there simple as that so that’s how to
customize your WooCommerce price buttons there make them look a little more in
line with what we’ve got going on with our site well that’s most of our
customizations or pre-built customization is done now I think we can
get on with the business of actually building so I hope you found that useful
if you have please like and subscribe to our channel and share our videos if
you’re interested in web design we’ve got some great web design courses below
with some huge discounts for our YouTube subscribers so take a look there’s also
some great free courses down there once again this has been jamie from system 22
and web design and tech tips comm thanks for watching
have a great day

1 thought on “Divi theme eCommerce tutorial Price Tag Customization

Leave a Reply

Your email address will not be published. Required fields are marked *