April 1, 2020
Divi theme eCommerce tutorial Customize the product page

Divi theme eCommerce tutorial Customize the product page


hi guys and welcome to another Divi
WordPress theme ecommerce site built this is Jamie from system 22 and web
design and tech tips calm we’re in this series of videos we’ve
been rolling along and building this ecommerce site here
it’s starting to look great but if we click on an item and go to the actual product page well
it’s pretty generic looking compared to the rest of our site so if we go to go back to our dashboard
here and look at our pages we look down there is no product page to
style because it gets generated whenever you click on that product it gets
generated by WooCommerce but we can use a bit of custom CSS to style that
so if we go to Devi theme options I’m here
you and here in the custom.css block is
where we want to put our custom CSS where we build it in a minute so I’m
going to put a new title in there click and drop down a couple for a slash star
star forward slash which is commonly used commenting out for CSS I’m going to
call it product page and then go down a couple and in a moment we’ll come back
here and put in our custom CSS so if we go back to our product page now I think
the first thing that we want to do is put it back ramming the gym so it looks
a little more interesting so I’ve created an image that’s 1500 by 1500
pixels I want to put it behind here so let’s go to our media and I’ll upload it dragging across here
you you and there it is uploaded what I want to
do I’m clicking on it I want to find out what the URL is which is right here URL
I’m going to select this and copy this okay to put in our background image
let’s select right click and select I’m using Chrome browser we’ll get our
chrome inspector ER and main area I think we want the main
content here we go the main content right there
let’s click down here and see background image : now we go say URL and open some
round brackets and close them and in the middle of them we just want to paste
that URL of the image we just copied from our media so ctrl V to paste there
we go we’ve got an image in the background now looking at it it’s not
wide enough so let’s use a bit more CSS and make it
wide enough she’s got another line here see
background size cover there we go that’s more like it that’s
made it fit the whole background here and see if we scroll down just move this
down it does actually it’s in it it’s enough to cover what we need to I’m just
thinking if we had I think that’s gonna work
well it’s going to work fine so that’s good so what we want to do let’s take this from a hashtag of the
main content all the way down to that closing curly bracket ctrl C to copy
let’s go back to our custom CSS feel and under our title there it space that it hit the save we’ve got our green checkmark let’s go
back just close out the inspector refresh and it should stay the same there we go that’s absolutely fine
what I have noticed the who haze we’ve lost a bit of our logo there cuz
that’s the same blue colors we’ve got going on here so I’m gonna edit my image
and just uploaded another one I still got it in Photoshop here somewhere let’s see fact I’ve got my brush tool
that lets just brush away some of that make this a bit bigger I still want a
bit of blue in there hey let’s save that one day now I just changed the name of that from
one a to one be I’m wondering if I can just change CSS here up those 1b1
I can’t because I haven’t uploaded it obviously so how better upload it now it’s uploaded I’m pretty sure I can
change that one b-1b there let’s try it without having to change that whole line
nor will it – use an ATM be otherwise you just copy that whole URL again let’s
save that change and refresh there we go we still got our little blue
holidays a lot more visible now and we’ve got that lady in there now I think I’m gonna want to get rid of
this sidebar over here you you looks like that right there let’s think display no yeah that’s got
rid of that so again we want to copy that we don’t want to copy the media
query but we do want to copy from the dot et right sidebar down to the closing
bracket there troll see back to our custom CSS let’s drop down I can get rid of that padding-left
because we didn’t change that at all save that back to our site and refresh and it’s still gone good that’s fine okay what else do we want to change here
to make it our own not to car let’s make this button a nice
red color what color is that red well that purple I should say hot pink or
whatever you want to call it there it is let’s just copy that color control see let’s have a look at this
Add to Cart button here of course you don’t have to make it these colors you
make it any colors you want you oh here is the border okay
let’s make the border that color as well font itself is the kind of blue color we add color and I guess we’ll make it
white yep that’s worked you so again we’ve got to copy all of this
here even though they’re grayed out let’s just take them all
oops and the bottom over there we don’t really need anything pass what we’ve
changed this let’s copy ctrl C back to our custom CSS drop down a little bit now let’s take out anything that we
didn’t change position padding we didn’t change any of that did change that did
change that paulla radius we didn’t change we did change the background
color font size nothing else we change so we can delete anything we didn’t
change there save that back to the site now let’s do a refresh and I should stay
the same again good
you okay that’s all looking good let’s get
rid of this line right here I think that’s the main content before after you
select this main content so it’s in main content class container
before I think is is we display:none it should disappear yeah that got it let’s just refresh that
bring it back you you and its main content container before it
was right there let’s just copy this at main content container before I’m not
even gonna copy anything else I’m just gonna write this in manually I believe yeah but I see
style sheet drop down another one and close out that curly bracket right
there and now I want to put the display:none say that I can fleet when we refresh
after it’s say a little line should disappear let’s
close that out there we go that’s great that’s off
there I think that’ll do it I mean we can keep going and keep going you can
style all this if you want to just right-click change whatever color you
want it to change or whatever you want to do and paste it into your custom CSS
here so I hope that’s been useful to you if it has please like share and
subscribe to our videos if you’re interested in web development take one
of our web development courses below we’ve got some huge discounts for our
YouTube subscribers we’ve also got some great free courses down there so do have
a look 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 Customize the product page

Leave a Reply

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