Divi 3 Custom Woocommerce Product Page in the Divi WordPress theme menu

Updated : Sep 19, 2019 in Articles

Divi 3 Custom Woocommerce Product Page in the Divi WordPress theme menu

hi guys and welcome to another Divi
video this is Jamie from system 22 and web designer tech tips calm
well somebody sent me a question from golden pepper films nice name
asking me how you actually change the look of these pages in the shopping cart
here well this is the actual product page
when you install WooCommerce it sort of generates these automatically for you so
there’s nowhere in your pages to actually do it if we have a look here
let’s go to our pages and you see WooCommerce generates a cart
page there’s something you can actually edit but the actual product pages themselves
if we go back there’s nothing actually for a product page so because it kind of
generates those automatically but you can
customize them you can do what you want to her really was with custom CSS so
let’s let’s have a go with this one this person was asking how do you get
rid of the white background or even changed the way this page looks so let’s
inspect that white background I think its main content probably yet they’ve ID
main content background color FFF so let’s see just for argument’s sake light
blue okay so all we need to do is copy this
and put it in our custom CSS now I’m using the Divi theme here I’m
already there that’s convenient so you just go to a dashboard down to Divi it’s
in the general tab it’s right down at the bottom I think
there’s one also in the customization tab here
or theme customizer right here I tend to use this one so let’s give me the title as usual
makes it easier to find later on forward slash star star forward slash and we
comment it out so the browser doesn’t read it as code I’ll just call it woo
product and we’ll paste that bit of code in
there now what you want to bear in mind is we’re actually targeting the main
content that I’m using Divi theme so it doesn’t matter because all my contents
got custom styles to it if you’re using a different theme you want to check that
this is not affecting every single page because every single page has a main
content area so let’s put that in I could say I’m using the Divi theme which
if you’re not using it with WordPress you might want to look into it it’s
absolutely awesome and you can download it from a link
underneath this video here it is a premium theme but it’s well worth a
while you can do anything with it right that’s the sales pitch let’s go to yeah
now when i refresh it should stay the same yep there we go so that’s how you
can change the background color let’s just look at one of our other pages
let’s go to the home page I suppose make sure that it’s not turn any of our white
areas into this light blue here gosh what an ugly sight I was using it for
demoing background images and stuff on menus there’s a white area that’s fine
see it hasn’t changed and nothing else there but like I say if you’re doing
this with your site you’re not using Divi just just check through because you
can mess things up pretty good okay so that’s how to change the color what if
you want a background image well same thing go back to our I think I’ll just comment this out and let’s put in the background image then for background image you have to
put in a URL which is where it’s located and put it in some inverted commas there
let’s go find us a URL and what we made sure we use here I
guess we don’t want anything too rash well I just put any image in we can
change it in a moment all I did I’ll just do that again I’ll select just
double click on the image brings up the image page and here’s the URL of the
actual image itself so this is what we’ve got to tell it tell the custom CSS
to load this image here and put that in between those inverted
commas there and we go back to our page and refresh every que we’ve got that ugly image in
the background never looks absolutely wonderful isn’t it let’s change that
image for something a little less busy okay let’s use this one and we’ll just
replace that URL there you
you you and give it a same again you back to the page and refresh yes we do
want to continue but that’s a little less traumatic but
anyway you get the idea this is how you can add an image background and the
moment that’s scrolling that image let’s make it fixed so the content actually
Scrolls in the background stays stationary so that’s going to be
background attachment and would you say fixed okay and say
that it’s good really that gap at the bottom there back to our page fresh she won’t initially see any change okay but now when we scroll that
background image stays where it is okay where else we want to change
perhaps we don’t wanna sidebar here you div ID sidebar
d so we just need to do hashtag sidebar let’s go to our options again drop down one hashtag because it’s my ID
sidebar and like a bit of space saying we won’t
display No save our changes back to the page and refresh and there the sidebar has gone out of
the way now I still got this little white bar here I
think that’s main content so before container may be difficult to track down that
little fella right there you it looks like it’s all mad as FLETC you yeah there is if I uncheck that you see
that little white line there disappears that’s main content container before I’m
just going to grab that a little bit and we’ll do the same thing with that I know I keep repeating myself here but
do check with the other pages on your site when you’re doing this sort of
thing because it may be affecting more than just this if we using these general
ideas here anything else where the same ID will be affected
and again we’ll say display no and save that back to the site fresh hope food that should disappear right
hey what else might we want to do yeah let’s go okay this message what if we want to
make it a dark blues it’s with all what I’m doing here it’s tedious but you can
go through and and do what you want to these things just change that to dark blue just for
argument’s sake I’m just taking random colors and you want to spell it right or
it won’t work so dark blue and it’s give it a box shadow just to keep things interesting pretty standard one I used a lot of time
think we’ll have to use a set important class on this so when you use this if
you have don’t have to but I think we’re going to have to force it there we go we
got that little box shadow again just copy this put in your custom style sheet you save it back to the site
and you can go on ad infinitum changing things and updating things most of this
is fine with WooCommerce products but like I say for those main titles you
want to check that it’s not affecting other pages on your site if it is you can just undo it
what have we got here we’re going to classes work WordPress
image 344 it’s a glass i just right-clicked an edit edit it as
HTML left now for those that didn’t realize trial see I’m using Google
Chrome here which is awesome because it’s got these developer tools here I
think a lot of them have it now but I like to use Chrome just hit the f12 to bring out this
developer panel okay so what do we want to do this image I might we make it round is it square
make it round put a gap between it and the ones below
let’s give it a border let’s just do that okay I’ll write this directly in my
custom CSS here and it was a class wasn’t it so it’s dot we’ll make it we’ll give it a border
that’s what we said wasn’t it a border I’ll say five pics solid white FFF yeah
we’ll make it around we can do that with a border radius of 50 percent and what else do we do we wanted to give
it a bit of space on the bottom so let’s give it a margin bottom I will put that
correctly margin – bottom so as I say plenty of times if you don’t do things
correctly they will not work 50 pixels margin at the bottom save that got a
feeling we may have to add an important class to get some of these to work we’ll
see I’ll do it if I have to I won’t if I don’t refresh I’ve been thinking I’m looking at the
right image there there we are oh it’s work that’s fine there we are
now it’s round and we’ve got that separation at the
bottom between these which is good again as Midas Tarpley you yeah there you go so what I’m doing I’m
gonna do I’m just going to copy the the title and the opening tag there we’ll
have to add a closing tag you no closing tag unless and I’m gonna do
is let’s copy exactly what I got here background dark blue and we’ll give in
that box shadow back to the page should stay the same but we should have
a little box shadow underneath – I see a little white border there again that’s
actually wearing this long box here let’s just refresh there it is
so what about this little thing here is for being after as well there we go slightly affected the padding there
because it’s just one picks either side so let’s get rid of that you you so they display:none here with me you we may have two important it up we’ll
see say that have a look refresh okay that is not what we want there and quite
what it did this texia so let’s go and undo that you I’ll say Victor as soon as one picture wasn’t we’ll make it transparent so it’s still
there but you won’t be able to see it you I look
you you there we go
so it’s still actually there you just can’t see it because we made it
transparent and you can go on and on and on doing it to your heart’s content like
I say be a little bit careful if you’re not using the Divi theme just a little
bit careful that it’s not affecting your other pages like
I say if it is things you can just simply undo it you you so I was just looking at you what else
we might want to play with here yeah if I do a container 80% I don’t
think I’ll change this singular making this wider but I don’t really see the point
and we’ve got what we’ve got here you like I say you can go on and keep doing
it and do the buttons you can do these tags here whatever you want to effect
just do it like we’ve been doing it select it right the custom CSS
and continue so that will do I just want to check that homepage you can just make
sure it hasn’t affected anything on there pretty short won’t have
you ah that’s absolutely fine good
so there you have it that’s Hanna customize your WooCommerce product pages
that are not listed in your dashboard pages section so I hope you found that
useful if you have please like and share the video and please subscribe to our
channel if you’re interested in web development take one of our web
development courses below we have some huge discounts for our YouTube
subscribers we’ve also got some great free courses down there so once again
this has been jamie from system 22 and web design and tech tips comm thanks for
watching have a great day


  • been trying to get someone to tell me how this is done been on fiverr and a few sites like that but no one can help me with this
    what i want to do is like this site pick a product first then have it go to subcription plan and pick that all the time adding both to my shopping cart https://store.beaconstac.com/?utm_source=navlink&utm_medium=website&utm_campaign=homepage

  • Do you use a child theme. Still not sure the reason your content didn't change all your pages did you target the page. I'm only watching on my phone but I'd usually have to target a page id.

  • This is a very useful video because DIVI is not as woo-commerce friendly as it should be.
    It does not allow to design with DIVI builder the individual product page design.
    Two things I missed:
    1. How to remove the white line between add to cart and category
    2. Another problem I ran into: the background picture repeated, I could not figure out how to make it full-width (although I tried using the html editor)
    3. I wish your video was a MUCH better quality. It is difficult to see for example the codes…
    Thank you for the detailed, not rushed explanation of each subject.

Leave a Reply

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