You can recreate any webshop in WordPress that you see on the internet. Its very easy! Let me show you with the Orangefit webshop in this video.
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi with 10% discount ⇒ https://wp.discount/divi-discount/
✅ Orangefit products with €5,- discount ⇒ https://www.wpressdoctor.com/orangefit/
✅ Hosting & Domain provider ⇒ https://wp.discount/hosting/
✅ Best caching plugin ⇒ https://wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:25 Create the homepage
28:26 Create the header
38:12 Setup WooCommerce
46:25 Setup product
1:05:55 Create the footer
1:16:00 Create Cart page
1:24:05 Create the checkout page
1:29:20 Create the thank you page
Thank you for watching! 😀
✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
📖Transscript📖
We are going to recreate this Orangefit website. This video is not sponsored by Orangefit but I do use their products for many years during my workouts. So to recreate this we need a powerful builder.
If you don’t have it you can get a 10% discount, going to https://wpressdoctor.com/getdivi/ And here you get a 10% discount for 24 hours.
So we’re going to add a new page called ‘home’. And the first row will be a normal row. The first section will be a text module. So let’s see what font they are using. We type in ‘Family’ and we see they are using Gilroy Bolt. We’re just gonna download the Gilroy Bolt font family and then we go to upload and then we’re going to press upload. If you now get an error message then you need to follow this video to fix this. Then we’re going to copy it. The next one is the payoff. “Create a fitter world”. Select it. The font size is 8.125 rem so we’re going to change the font size to 8.12 rem. Add some line height, then we’re going to just enter it over there. This looks amazing and the color is actually white and then they have this beautiful background and also a beautiful image. So let’s first create this section behind it. And we got to ‘Section’ ‘Background’ I’m going to add the background color like this, and we’re going to use it further in the website so let’s make the global color. Press this plus icon.
And there you are. Use the global color okay. We’re going to use a background mask to create this amazing thing. And of course we have a different color for the mask, so we’re going to use this one, which is the orange from the website. I’m going to use it often, so let’s create a global color of this one. Yes let’s use it. And then we’re gonna find just something that looks a bit like it. It is actually possible with a trick to upload your own SVG’s, that goes a little bit far for this tutorial. We’re just gonna create something like the original. So I think this would be excellent. We can just change it around a little bit. We’ll choose whatever we want. Let’s make this one 19px and then we’re going to make it closer to the headline. So we go to spacing, we’re gonna ‘Spacing’ the margin at zero like this. Then we’re gonna do a little trick because what they do over here is actually, they have a video with another column over there. So first we’re going to save this video. Just a quick disclaimer you are not allowed to copy and use images or logos from other people’s websites. This video is just intended for learning purposes only. Then we go to create a new section over here with a two column layout, this layout, I think this is good. You might say well we’re gonna add a video but it won’t play automatically if you do so. So we’re not gonna add anything over here, but we are going to add a image over there. The image. Now we can use this product image. if you’re creating your own webshop, use your own images of course. And below the module we actually have a text module which is exactly the same as the other one. ‘Orange advice’ like this. We’re going to copy it again and we’re going to change it to: This one is a little bit bigger, so we’re going to make it a little bit bigger and we’re going to make sure that there is a little more space we’re going to remove the zero padding. Then we’re going to create exactly the same. How we’re going to do that? First of all we’re going to give the second column the right background color. And the right background color is actually this one this is the background color. We’re going to save it as a global because we’re going to use it more often I think. So let’s add it in. Excellent. And we go to ‘Design’ we go to ‘Sizing ‘we’re gonna press ‘Equalize column heights’. Then you go back to ‘Content’ and the first column we give a background video. This is the way to autoplay our videos without any sound. We’re going to upload the video it’s 7 MB’s, and there we have it. It’s always a good practice to fill in your video width and video height. You just go to the video and look at it. It’s just full HD 1920 by 1080. 1920 by 1080. And that’s important ,so that it will stay the right size.
Then we go back to ‘Design’ We go to ‘Sizing’ and we’re going to use a gutter white of zero because I want them to be close to each other the next thing we see is that they also have a button over here, so let’s create a button. “Do the test” we go to ‘Design’ we go to ‘Button’ we’re going to use ‘Custom styles’ the text color is white. The background color is transparent, then the bottom border white is also 3 pixels, border color white, border radius is actually 25, because it’s rounded. For the font they’re using a different kind of font, so we’re going to upload it. It is Gilroy Regular. Upload it, and for the font they’re also using the Gilroy Bolt but they’re making it bold, it’s just regular like this. All right then we’re going to align it on the center. We’re going to add some spacing to the top 25, and also to the bottom. And we need some padding on the left side on the right side, because it’s actually a pretty bigger button. And well let’s save it, and then the bottom is not that big. Yes this looks great. And then the text size is just a little bit smaller. Then when we look at the column, we are seeing two things. The columns they’re using are a bit wider than our website. So we’re going to change the size of all the rows. Sizing, it will be 1300px like this. Now to make 1300px the standard size of all your rows inside your website, you have to change the preset. So the default preset you can actually click on this, and you can press ‘Update preset with current styles’. “Are you sure?” Yes I’m sure. And now all rows will will be at 1300 pixels width. That is excellent. Now the column structure of this thing is actually a little bit smaller. Then we’re going to change the second column. Go to ‘Design’ ‘Spacing’ we’re going gonna give it padding on the right, left side and also on the top and bottom then your contacts can breathe inside of your column. Let’s make this 35 and let’s reduce the top. And let’s add let’s change the top to zero, and let’s change the bottom to 15.
To 25, then we have more space between this one ‘Spacing’ let’s add 25 pixels in over there.
We go to this one, also ‘Design’ ‘Spacing’ give it a
top margin of 25 pixels. What I also see is that this one is uppercase. Like this. Then it’s a bit smaller. The next step is actually to put on this row behind this row. How we’re going to do that? Well you go to the row settings of the first one, we first need to change the position, the z-index Let’s change this one to 50. the z-index actually tells the browser on which level these rows need to operate. It’s very useful. Let’s change it to 50, and this row will be ‘Advanced’ ‘Position’ will be at 25. So it’s lower than the one. Of course.
you can make this row go up with using a negative margin, but I think it’s better to use the position and go with ‘Absolute’ and then it already flips to the right place. Then we’re going to add it to this side, and then we can actually change it with the vertical offset and the horizontal offset
to place it on the right place. I think it’s like this. And then we see that the margin the C is actually bigger and there’s more margin here between this section. So let’s change that first. We go to the section of this one, ‘Design’ ‘Spacing’ I’m going to give it a top margin up to 175. Excellent. Then this one is a little bit bigger 150 pixels is actually exactly the same. And then we see that the subtitle is also uppercase. This video is even bigger than our video. To create a bigger video you have to create more content inside it or use minimum height. But on our case ,we can see that on the right side they have more spacing between these things. When you’re changing these z-indexes, now I have a problem with selecting the right thing. As you can see ,it is very hard for me to click on it. So how you’re going to fix this? You go to the wireframe mode, and here you can actually change the image or the text ‘Orangefit advice’ and this one. You go back to desktop view, and you go to ‘Spacing’ and then we can give it a margin of whatever we want. And you can see that the video just moves along while I’m creating more space within the other column. And they have less space like this. And then the bottom is 75 pixels. Yes this looks way better. Then we see that the video is bigger than the section so we got we have to remove some space the first thing to do is go to row ‘Design’ ‘Spacing’ and press the button padding to zero then we can create more space as you can see it now we have a different thing there we go to the section we go to ‘Design’ we go to ‘Spacing’ and again we’re going to change the padding to 0 pixels but this is a bit too much so let’s give it a padding of 15 pixels so that we still have some space below it 25 pixels excellent well of course we can tweak it just a little just a little bit more go to this row go to as fast position we’re going to change the horizontal offset do no more then create the next section below it go back to your wireframe create a new regular section and the first one thing is a normal row in the normal row we have a text this is actually the same as this one so we’re going to copy it drag it over here and then we’re just going to change the color go to your ‘Design’ and the color is our dark orange then they also have a logo over here the go green logo well that’s fine just create it we can easily just add a image over there image upload it and then we go to ‘Design’ and sizing we’re just gonna make it a little bit smaller now I actually want to know how big this is we go to layout and we see that this thing is only 95 pixels width so we’re going to change the width to 95 pixels oh not percent but pixels yes excellent and then we’re gonna advance and now what it actually does is gonna make this section bigger in entirely and I don’t want that so we go to position we’re gonna make it absolute we’re gonna place it over there and then we’re gonna just help it a little bit to go to the right spot over there I’m still not happy with the size of this thing because when you look at this logo it’s actually on the white and this one is on the right so we’re gonna move this image to the next section over there switch in the white then we’re going to change the position of this thing so go to ‘Design’ advanced position and we’re going to change it a little bit make it higher again like this and then we go to the row let’s change the name of this row row with the video and now you actually know every time when you’re changing the wireframe you know which row it is go to advanced go to position I’m going to change the vertical offset just a little bit more so that it looks better let’s make it 75 pixels like this and then this section ‘Design’ ‘Spacing’ we’re gonna give it more space like this 30 pixels on the top all right now this looks way more like the original all right then we’re gonna add a new row with our products inside of it the key to a successful webshop is always to have beautiful images and this is pretty easy to recreate we’re just gonna add a blurb module like this and then the background image will be our products the first one is the orange go back to the content like this then we’re going to change the style a bit first we’re going to remove the image over there then we go to ‘Design’ we go to ‘Spacing’ we’re going to give it a top heading so that we can actually see what’s going on then we’re going to change the text this font is of course the gilroy bolt it’s white and it is bigger and then the other one is also white we’re going to use the font gilroy regular then we go back to ‘Spacing’ because we need some ‘Spacing’ on the left side and the right side so let’s make it 25 pixels left right and also at the bottom like this this looks really excellent now just to copy this row to the other ones you just delete the columns we’re just going to add the other columns like this and it’s pretty easy to change them all around and what we see is ‘Design’ you could ‘Design’ a sizing gutter width let’s use two because it’s the closest we can get with the original then the second one is the green one
all right this looks pretty amazing then we’re gonna give this module more space like this ‘Design’ ‘Spacing’ 25 on top like this move this one back in his place position is 25 pixels excellent on the original website when you hover over it something’s happening with the background image is there a way to do that within your products well of course everything’s possible with all css on things but you can also go to ‘Design’ transform we’re gonna make it a little bit bigger to pop out it’s not exactly the same but well we’ll manage with this one just click on hover like this hover and then you’re gonna make this 110 percent whoa 110 upon hover to copy this to the other ones easily just press on this and press extend transform skill and then all blurps on this row because when you have other blurbs you don’t want them to change so press extend and now they all have it now you wonder how to make these links well we’re going to do it later on when we’ve inco installed WooCommerce and their products so to add the underrated product just duplicate this entire row like this I’m going to recreate this real quick
now what we see over here because of the title is bigger than the other ones it just it’s not the same anymore so we go to ‘Design’ we got the ‘Spacing’ we’re going to change the top heading like this to make it
all right then we have a button which has discoverable products I can tell you already that this effect of this button is not standard in Divi there is of course another plugin for this but we’re just going to create another button so to create this button we’re just going to duplicate this button and drag it over here oh we need to create of course a new row with a new we’re gonna paste it in now we’re just gonna change it because it’s white now the bottom ‘Design’ is the orange color the background is white and the border is also this orange one let’s change the width a bit get the ‘Spacing’ make it a bit smaller and then we have this beautiful header this is of course a image I’m going to add a new section regular with just a regular row and in this row is text but we’re going to copy just text from this one because it’s actually exactly the same so we’re just going to press copy module we go down and we right click and reset base module for the background we’re using the global color again and also a background image like this then we’re going to change the text around this one is actually what you should do is change this one to an h2 and we’re going to style it ‘Design’ heading text h2 make it Gilroy Bold make it white and make it bigger like this 75 pixels and then we’re going to add the text copy this module base module change it we’re going to change the text because this one is not uppercase and it’s also gilroy and regular after the end I want a new line press shift enter and then like this and then we have a button which is another button so let’s copy this then this button is on the left side and text is this time they don’t have a border width and then we go to ‘Design’ and then we go to ‘Spacing’ and it’s just a little bit smaller and it’s a little bit more higher and what they actually did to break the ‘Design’ a little bit is they changed the margin on to the more to the right I really like this so we’re going to just do column settings we go to ‘Design’ we got the sizing and we’re just going to make it for example 1000 like this here this is great then we see any original there there’s just a little bit more space below and on top it so we go to the row settings we go to ‘Design’ we got the ‘Spacing’ and we’re gonna give it more margin on top and more margin on the button to be honest guys this just looks great doesn’t it it’s only now that I noticed that this menu is just from my latest video about the tesla recreating the tesla website it’s still here well no problem alright the next section is also really nice with a great moving background inside of it add a new section over there which is the so first thing is we’re going to copy this one copy module
base module and this will be
our story and then below this one we’re just gonna copy it we’re gonna type it we’re gonna change this up it’s not like this it’s black and it’s way bigger and of course add some line height in there and then again we’re gonna have a button that’s an orange button do we already have an orange button no we don’t but it looks a bit like this one so we’re just gonna copy it drag it over there and change it go to ‘Design’ and go to button we gotta make the color will be on white but the background this time will be orange and the content is read our story on every webshop you should have this so people know who you are and what you want copy this module paste it over here change the text go to ‘Design’ we go to change it to black excellent what we see here is though that the width is actually way more smaller so we go to ‘Design’ we got the sizing we’re going to change the width to 76 then we have these blur ups here which are beautiful so let’s create a new row with four of them the first one is blurp based and then we have the image add them in go to ‘Design’ we go to the image 42 pixels in the original 42 pixels like this align this one in the center go to global dollars make it this one gallon regularly balls go to this one align it in the center and also use now the ‘Design’ is good but there needs to be more space between the title and the text how are we going to do that we go to advanced custom css you go down to the blurb title we’ll add a margin button is 15 pixels this is a bit too much let’s make it 10 yes great all right again if you want to recreate it just delete the other ones and copy this one I like this and then we’re just going to change them up
now then we have on the original website what you see is create they have the text up here create a fitter world behind it and it’s moving when you’re scrolling you see that we can create it with Divi just go to this one we’re going to add a new row below this one a new row in this row will be text and the text will be create a now go to ‘Design’ go to text we’re going to select it we’re going to make it white because the background of this thing is actually not white it is it is kind of grayish so we go with the background and we’re going to add a color which is this one and just a bit grayish all right save it then let’s change this one go to ‘Design’ you go to text first we’re gonna give it the right font gilroy bolt now we’re gonna make it extreme big like 500 pixels 450 pixels I think the first thing of course is we need to make it completely full width so we go to save changes then we go to the row where this text is in go to ‘Design’ you go to sizing we’re going to make it 100 with 100 max width like this there it is create a then we go to the row settings we go to advanced we go to scroll effects then we go to horizontal motion and we enabled it like this e this looks exactly the same as the original let me explain this this way to you we want to move it we don’t want to move it really big on the website we want to make it a small move so the starting offset should actually be 1 and the ending offset should actually be minus -1 so this way you have a really small and smooth scrolling you see this if I change this to 100 then what will happen it will be enormous so let’s change it to -1 and this is exactly how it goes on this website it’s really small now let’s save this row it’s excellent then we’re gonna duplicate this entire row you cannot target it anymore because it’s so big the button um let’s see where it is I’m gonna scroll all the way down I think it’s this text create a yes so we’re gonna change this row we’re going to name it for future references scrolling text create a like this save it and now and now we always can recognize this then we’re just going to copy this entire row row create a copy it we’re going to move it down the other one let me show you why and then we’re going to change the text to fitter world worlds I guess well the word world doesn’t fit in our text because it’s too big there is one way to change this of course you can create to make the phone smaller but then this font is also going to be smaller we need to go to the row settings ‘Design’ we go to sizing we’re going to make this the max width going to make it to 150 percent and this also to 150 percent now it doesn’t fit anymore on your screen but that’s okay because that’s not the point of it and what we see is on the original this one moves the other direction that’s really great to do is go to the row settings again go to advanced go to scroll effects then we’re going to change the vertical motion his starting offset will be -1 and the ending offset will be 1. now we have changed it around and now when you’re moving they’re actually moving on a different direction this is exactly how I want it to be before we start creating actually the products which is a lot more work then let’s recreate this one go into your wireframe scrolling text change this to of course
and then we’re going to add a new row below it just this the first module in there is a image and the image is this icon and then we have another image over there we have this one use this and we’re going to change the background of this row and the background of this row is a color which is this one and then they have of course a mask just like the other one that we have seen so we’re just gonna use the same again and the color is actually white but it is a bit transparent so you pick on white and then we’re gonna make it a little bit transparent to give it just a little bit of then let’s change this a bit around I like this one we’re going to add a title the titles are all the same so we’re just going to copy this module and we’re going to paste this module over here below that is just a little bit of text so we’re gonna copy this module and we’re gonna paste it in over there and make it white again great then we go to the ‘Spacing’ of this row and we’re going to make it the padding on the left side 50 pixels over there well let’s give it 150 pixels and also on the right side this looks almost exactly the same then on the top also 25 pixels and at the bottom let’s make it bigger let’s give it them 100 pixels now it almost looks exactly the same philly recyclable and change this text also the image size is 95 pixels here we go look at this this is the original this is our we our creation oh the color is off let’s change the color to this one and this looks almost exactly the same so I’m really happy with this one I almost forget forgot on this website you can see that the image of the people is just moving just a little bit you can easily recreate this by going to the settings background then we’re going to use a parallax effect here you go let’s make it when you do css this is the way but when you use true parallax it is just like the way the original website is you go to your dashboard you go to Divi theme builder on the team builder we’re going to create a global header build global header the first thing we do is create a new row with a menu module we still have the menu from from recreating a tesla website we’re going to change this in just a bit first we’re going to upload the logo like this then we go to the background and we’re going to change the background it is of course one of the global colors the orange yes then we see that the menu is not transparent so we’re going to remove the background color okay we go to ‘Design’ we’re going to change the logo sizing because the logo is not this big the logo is actually it’s 250 pixels width all right then we go to the ‘Design’ of this menu which is all in uppercase and it is gilroy bolt and it is of course in white and then we see there’s a lot more ‘Spacing’ so we go to the fonts custom css and we scroll down to menu link we’re going to add margin on the left of 50 pixels 50 is a bit much so let’s make it 20 and then we go down and we go to the menu logo and we’re going to add a margin on the right side of 150 pixels
like this but then you can see that the logo is way smaller because I created more space and he doesn’t like that so we’re going to change this to 350 and that looks way better then we go to the size of these are a little bit bigger the menu text is actually greater then we also have ladder ‘Spacing’ of two pixels then we’re gonna change the ‘Spacing’ of the padding it’s way more smaller yes also with the row just create five like this this is way better they have on the top bar a white bar like this with a couple of things in it no problem add a section just a normal row the first one is trust pilot so we don’t have that but normally you have that so let’s add an image in and we’re just going to upload the trustpilot logo it’s that easy we’re going to remove the ‘Spacing’ on the section and also on the row
like this and we’re going to change the trust pile that’s gonna make it a little bit smaller 285 pixels the next to that is not happy 100 refund let’s add in a blurb module to undo that and your text is not happy 100 refill we’re going to use a icon for that and it’s a arrow with a yeah I call it a return icon maybe yes a return icon like this on the original it’s just a strange color it’s not one of the color used before so we’re gonna change that to our original color change the icon on the left side make it a bit smaller and then the font is of course
regular and it’s not that big it’s actually 16 pixels and then we have free shipping above 100 so we’re just going to copy this blurb over there and we’re going to change it to free shipping above 100 and there they’re using a image because it is the ups logo over there then what are we going to do to make it smaller first we go to ‘Design’ we go to sizing we’re going to use a custom gutter white of one then we’re going to change the column structure to something with way more lines like this and we’re going to align this one on the center this looks acceptable then we’re going to change this drop it over there what I like about this menu is that when you don’t scroll it is just transparent and when you do scroll it is orange how are we going to do that well it’s actually pretty easy if you know how this thing will be advanced scroll effects stick to the top and now when we have sticked it then you can go to content background now you have other options stick it so when it’s sticky it’s orange and normally it is transparent like this and on the sticky it is orange and on desktop and when it’s not sticky it is just transparent it’s actually pretty nice press save let’s see how this looks on the front end well this is how the website looks so what do we need to do first we’re going out of the logo on dv theme builder press save or else it don’t work settings or reading and you’re gonna show a selected home page like this now I refresh my page and here we are now you cannot actually see the menu because we need this thing to go up a little bit or else you won’t see it there are more ways to do this however what I do like to do is go to your dashboard go to Divi theme options and the custom css will be the main content margin top minus 75 pixels and we press save changes and now when I refresh my page this is how it looks and when you scroll down you get this beautiful bar behind it I think it’s actually working really great now let’s create the real menu you go to appearance you go to menus and I’m just going to delete this menu and we’re going to create a new menu called main menu like this create the menu and we’re going to add some custom links the first one is our products and later we’re gonna fill this all with our real products from WooCommerce but now we’re gonna now we’re just gonna create the menu
but then it gets really interesting because how are we going to create this layout we could do with the freeway using the built-in dv mega menu or we can use a plug-in to do this for us but we’re just going to use the dv mega menu the first thing we do is we need to make our products a mega menu you go to screen options add css class now we go to our products and now we can add a css class of mega menu just like that close it then we’re gonna add a different few columns this is column one add it to menu over there
column two and column three over there here we go within the columns we have the links of the categories so we’re going to add the url of let’s say product let’s say
category but we have to fill in the url when we have enabled WooCommerce any link text will be protein shakes added to menu over there
so now we have three columns with all these things in it now we want to add images to our menu how are we going to do that well the navigation label type image source yes and then you go to your mia library and we’re going to add in all the images from the menu and then we just copy url to clipboard like this and then you paste them in over there close it and then I think we have to change the width so let’s save the menu and see how it looks
then first we need to go to the theme builder and we’re going to change this menu to the of course main menu over there and then we save this and then we see when I hover over it this is what we see we see image we can’t see the text because they’re all white so we’re going to add the header template we’re going to change this menu we go to ‘Design’ we go to drop down menu and the mac background is white but the menu line color they don’t have one so let’s make it transparent and the menu text color should actually be black like this and then the active link color is also black and the mobile menu background color is white and then the mobile menu text color is also black let’s first add in all the images to our menu items and then we’re just going to copy this navigation label just copy it and I’m going to paste it everywhere else
with the right images
so this is how the menu looks right now of course we need to remove this column one two and three any dv theme options we’re gonna adjust just css and this actually tells the first child in mega menu display none and now when I reload the page you can see that it’s gone over here actually this looks really great if you want to style it even more to make it more beautiful and even like the original one we need a lot of css or we could use a plug-in to create a dv mega menu now the last option is really tempting to do right now because I’ve already spent a lot of time trying to create it but it gets way too complicated to do this for this tutorial let’s just start with creating the actual e-commerce site of this website because I know a lot of you guys wanted this of course to create a webshop you need a plugin unlike WooCommerce let’s use that one press install now and then we press activate first thing we do is we set up WooCommerce with all our data let’s press continue I would say this particular website is in the food and drink business what I’m actually trying to do here is upsell you to all their WooCommerce products because this plugin is free but all these other things cost money or you have lifetime deals with other plugin developers press continue I think we only have 10 products and press continue don’t press continue yet or else your site will be jammed back with stuff you don’t need for example jetpack I’ve never been a big fan of jetpack don’t install it for payment methods we’re not gonna use WooCommerce payments because I don’t know which country you are and the payment provider will be set up in your country is different we’re gonna use stripe for this one we don’t want mailpoet and we don’t want google listing and ads press continue we’re gonna use Divi next step is add products to my website let’s do this we’re gonna add them in manually the first product is protein we’re talking about these products I know this video is not sponsored and it may look like this but I’m really enthusiastic about the products because they are just really good I tried a lot of plant-based protein and they were all awful to eat but these guys are actually amazing then we’re going to add in the price 31 euros and 90 cent and we’re gonna add in a category which has proteins and then we scroll down and we go to product image we’re gonna add one image and then we’re gonna change the product data to a variable product first you go to attributes and press add because what we have is different flavors so the flavors we have is vanilla choco after each flavor you should use a pipe like this banana strawberry mango peach press use for variations and press save attributes and then we go to variations and we’re going to create variations from our attributes press go yes and then we have five variations added that’s great for example the vanilla your stock keeping unit protein
vanilla my screw number is zero zero one protein vanilla the variation price is all the same it is required so it’s all the same it’s 31 0 comma 90. the stock status is in stock you can fill in the weight the dimensions if you’re using this for calculation of your shipment in our country only very large package will be expensive so for us it’s not very important about the weight it doesn’t really matter then we’re going to add in a image for the images we’re gonna use special product images you also should have product images on your webshop this is the variation image protein vanilla then we’re gonna paste this we go to show code and I’m gonna actually going to fill them in real fast
and when you’re also done press save changes right now we have added one product protein which has five variations if you do have stuck on your variations which I think you have you press manage stuck and you can add your stock quantity I would say I have 200 of these vanillas in stock and when I have less than five I would get a email which says there is a low stock and you have to say if you want to allow back orders allow notified customers allow or do not allow in my web shops I don’t like to allow this because in my country we are very spoiled it means if you order something today it will be delivered the same evening or in 99 of the cases the next day so when I allow back orders I get all these orders with angry people who don’t get their products and that’s not very useful when you fill this in don’t forget to default form value should be for example vanilla press update and then we go over here for continue setup because the net next step is set up our payments click on this one now you can use WooCommerce payment and then we can use all these things but I think you want to use other payment pro methods and use the payment method that is useful in your country in our country for example molly is the cheapest of all the payment providers but maybe in your country you have another one for example on stripe.com you have a 2.9 plus 30 cents per successful card charge but for example if you go to again you can see that the visa card is only 12 cents but you have interchange which is around 2 in the us that’s way less than what stripe charges so it actually really pays off to check out all these payment providers and their prices for our example let’s use stripe we press get started and then WooCommerce is going to install stripe for us now there are a lot of tutorials on youtube about configuring installing stripe it’s a lot of work to do good but you have to do it or else you cannot accept any payments then the next thing is set up your taxing if you’re not selling to other countries then the WooCommerce text is actually really great press setup manually or else you will be installed with jetpack and then you press insert row I’m setting this up for the netherlands because I know my country the state code you can just use it if you want to Divide tax per different state this is the way to do it passcode sips the same cities the rate in the netherlands is 21 on every product you sell and we call it tax or in the dutch it’s btw 21 priority is one uh also shipping is also text so we’re gonna press save changes and then we go to reduced rate rates because in our country you also have for food they only charge nine percent tax the priority should be two and it’s not on shipping it’s only on products and we press save changes and we don’t have a zero rate rate so that is fine all right well done four steps left to get your store up and running press continue setup then we go to setup shipping how much does shipping cost in your country in the netherlands shipping costs 6 euros and 95 cents and you can define for the rest of the world also shipping costs that would be 15 euros complete task and then we need to press well you can use marketing tools but I don’t want this right now and then we can use personalize my store to create a home page you can skip it you can upload a logo of course we already have one so it’s great press proceed and a store notice is well not important for us okay well done if you go to the WooCommerce settings now you can actually see all the things we have put in there now very important if your currency is not euro you should actually change this to for example united states dollar or any currency you’re using like the indian rupee but we’re using euro for this website the currency symbol in my country is left with a space but it might be in your country right with space or without space the thousand separator in our country is the dot and the decimals is a comma but in the u.s it is the other way around number of decimals in my country is to press save changes when I now go to my products you will see that we have the protein we have in stock and when I go to edit it now when you go to edit your product you can actually see your product over there this is how the product looks right now well this is totally not the way how I want to have it looked on my website so what we’re going to do is we’re going to press enable visual builder over there so the first thing we notice is we have this right sidebar and I don’t want that so what are we going to do you press an edit product over here and then you change the page layout on the right side to full width and press update then we press on build on the front end and now we have a normal page layout that we can change the way we want the first thing we’ll do is we go into the section settings we got a background we’re going to give it the beautiful orange background and we’re also going to use the mask again with the darker color and the color and let’s use this one again on our page just transform it a little bit to the way we like it then on the image behind the image they have a background like this with just another color like this but if you want to make this rounded then there is no place to do so so you go to advanced custom css main element border radius is 50 this looks actually really great then we have this should be the title text should be of course gilroy balls it should be black because we have the whole background here is actually white on the original one you can see that you can do that by adding a gradient to the entire page because creating this is actually possible but it will take a lot of coding to do so then you go to your row settings and we go to background we’re going to add a gradient over there so it’s going to be white over here like this and it’s going to be transparent over there then we’re going to change the direction to 90 degrees and then we’re going to make this one come closer to the other one now we have a 50 50 and well let’s work with this add a little text over there and the content is this one let’s make it to gilroy regular let’s make it a bit bigger then we’re going to change the row because what I want is on the second column I want to have some ‘Spacing’ so we’re going to make 50 pixels on top and also fix 50 pixels on the right side and on the left side but on the left side I want it to be 25 add in a new module Divider show it we get the ‘Design’ line and it’s black and it’s a little bit grayish save it then we’re going to duplicate it add it over there and then we’re going to change this one to also go inside of this this row will be over here and then I want to use this plugin from WooCommerce variation swatches and photos and now when I edit my product and I scroll down and I go here to swatches you can actually generate this one I’m going to change the type to custom color and images the layout will be disabled below let’s configure vanilla we’re going to change the color to this one we’re going to change shoko the color will be this one you don’t actually see the changes over here but they’re actually working now then this is the way it looks really neat so we’re gonna style this button over there to make it real nice use custom styles and for the background color they’re using a new type of green which is very very clear so we’re gonna add it to our global colors like this the text color is white we have no border we’re gonna change the border radius to 25 like this go down we go to the margin we’re gonna give it some more padding like this to make it a bigger button add to cart okay so we’re gonna change the typography of this thing they don’t have a icon but we do have a gilroy balls then we’re going to style this box go over here and then the field background color can be white the fill text color should be black and I want this to be a little bit bigger am I going to make the text size I also wanted we have a more ‘Spacing’ we go to a border fields rounded border yes we have a border that’s great and then we can make it round I hope yes we can so we can actually make this 50
so that we have a circle it’s also grayish so that’s a nice touch it’s a little bit bigger than this three pixels but now we have changed the letter ‘Spacing’ ah okay so we’re gonna change this one make it smaller we’re gonna change the pricing because it’s black on the original and the font gilroy book but it’s it’s 1.5 a ram and then I want to move the price to here or just do there like this and then we have the description and the additional info on reviews we’re not going to use it over here so we’re going to delete it the sku is not needed well the reviews are actually also not there so we’re going to remove them but what I do want to have here are the blurbs so we’re going to add blurbs this one we’re going to use a icon and the icon will be a clock this and then we’re going to align it we’re going to use our dark green color and we’re going to place it on the left side we’re going to make it a little bit smaller this is excellent we’re going to change the text gilroy book what I actually want is I want to have three rows next to each other hmm it’s gonna be a challenge because we already have created this I think we should have used a speciality like this and then we’re gonna use this no problem we can still create it this is gonna be a normal row if you want to change your entire markup that’s no problem you can just easy copy and paste all the things so just copy your section styles go over your new one and press base section styles now we have the same thing then you want this thing to be duplicated just copy it paste it over here like this no problem over there then we’re going to copy this one over there we’re going to copy this one over here we’re going to copy the price over there this entire module over here and then the Dividers over there also this one over here and now we can add a new row but first of all we’re going to change this one and we’re going to make it white like this go to ‘Design’ give the ‘Spacing’ we’re going to give it some more padding on the left side and on the right side like this and also we go to sizing and we’re going gonna change the width of this thing to 600 pixels would do the job yes great now we can create a new row over there and then we can have three modules next to each other really useful just copy this module paste it over there and also make this background white like this go to ‘Design’ which is sizing and make this also 600 pixels
pixels yes okay then we’re going to destroy this entire thing over there hot cigarette and then this row also needs to come over there they move up we go to re change this one over there which is the breadcrumbs we want this one and I want the message to be over there I’m just going to style it in a minute then I can safely remove this entire section like this which looks excellent but now we can have even more of these let’s quickly go to ‘Design’ ‘Spacing’ gonna give it some more padding on the left and right side and then we can copy and paste the blurbs to create all these things not happy 100 refund now we can see that the sizing is actually a little bit off and then we’re going to duplicate the last one and we’re going to say free shipping above 100 and for that we need a box like this let’s change this one because I don’t like the style in comparison with the other ones now it’s all consistent then we go to ‘Design’ sizing custom gutter wire going to make it a bit smaller like this maybe we can actually create more space in this thing
all right the next thing we’re going to style this box because it’s a real ugly box notice settings let’s change the background to our global orange the button also because what I want is actually the same background color as the call to action remove the border give it a round style like the other one and then we’re gonna change the font to some book and actually I want to have an icon on the view card I want to use the card icon this one and then we’re going to add some padding to the right and left side at 50 to make just bigger and then I want to actually change the text size also change this to gotham book and then the text color should be white I want to change this font to what are we using gotham right gotham book so this actually only appears when you press add to cart excellent and then I also want to have this one over here based securely with and then all these icons is actually really neat so what do we do to create this we’re actually going to duplicate this entire row we’re going to remove all these things the first thing is add a text like this and the text will be played securely with of course this one is gilroy book it’s a little bit bigger 16 pixels now we’re just gonna add in our payment methods we’re gonna just use an image I only want people to pay with with credit card or with people so we’re just gonna use paypal over there and the other one should be a credit card logo like this and then we’re going to make this a little bit smaller go to ‘Design’ sizing and with and change it to well preferably something like pixels because then you have the exact size maybe 100 pixels that’s great also this one then I want to align them of course in the center ‘Design’ alignment center and then I want to move this one just a little bit down because it’s not in the same height what else do they have they have actually a small background color and I like this style I really like it so they’re gonna they made it really light grayish like this and we’re gonna change the padding to five pixels maybe a little bit bigger this then we’re just gonna copy this row copyrow and we’re gonna paste it in over here of course we don’t need all these things but the title any text is useful i’ll remove this because we already added it then you can just duplicate this one change this to the benefits change the style to Gilroy Bold and the color should be this red color and the text size should be something like then comes a title and the title is y orange fit protein we’re going to use Gilroy Bold and we’re going to make this title again bigger I’m gonna make it black and we’re just gonna fill in the text over there we can also use the woop product description we’re gonna paste it in and when you scroll down on your product page you can here fill in your product short description like this and then you also have a long description when you press read more you can add this one to the long description then when I refresh this page we actually have the short description over there and then when I copy this one like this I can actually change this to a long description and then the only thing you need to do is over here you need to change the long description and make all these things like this and h2 and this one also a h2 oh and then like this we’re also going to change this to h2 and then when it’s loaded you can see that the h2 is actually well done the text should be gilroy book but when I go to a heading text the h2 should be Gilroy Bold and then we can make it a little bit smaller now what you do want to have is when you scroll down I actually want to have this product scroll with me it’s pretty easy just go to the settings go to advanced go to scroll effects and says stick to top press save and I want to scroll down it will actually scroll with me and that’s beautiful then we have all the benefits and all the good stuff just copy this entire row copy row
base row and you can just change these
and then when you scroll down you can read even more I actually want this one to be a bit centered in the screen so we go to the scroll effects and we’re going to make a sticky top sticky toppy offset with 250 pixels so that when you scroll it is just in the center but when it has to windows it has to stop scrolling well it has to stop on a new section and then of course they have just like with amazon the more people that scroll down the more they want to know about the product before actually buying it so what do we do is we’re going to add another Divider to do that we need a normal row so we’re going to copy this row paste it over there and then we’re going to get the Divider again to this row and then we’re going to remove all these ones we’re going to add toggles because what we want to toggle we want to talk about the ingredients because people need to know what’s inside of it and we just paste this text and this will all be h3 and we go to ‘Design’ just toggle it open so you can see what you’re doing let me go to toggle you toggle background color it should be actually white the close one title text black black the font of course gilroy balls sizing should be a little bit bigger and when it’s opened I want it to be actually this one when it’s closed I want it to be black I don’t like the border around it so we’re going to remove the border we’re going to remove the border style I only want a border on the bottom and then I do want to change these text body fonts should be gilroy book gilroy regular sorry I’m going to create it make it black 16 pixels all right this looks excellent then the toggle items want to change them because they’re hideous the close eigen color should be black and it should be an arrow like this and the icon or the eigen size should be a bit bigger 30 pixels and when it’s opened it should be this one and then I want this one to be go back yes and also the size should be 30. now this looks great toggle save it close the toggle and then we can just duplicate it like this we don’t need a Divider and we can make another one which is and we can just paste it in and then we get a big column let’s see how this works that works great do nothing more also this one can be removed and then the last toggle is the amino acid profile which is really important and this one is even a bigger table so I’m hoping this works and it doesn’t fit at all and then we of course have to change the table width to 600 it almost fits only mango peaches just a little bit too small I actually have to make the table with 55 maybe 500 well I can live with it it’s not perfect but okay we can live with it and then we see that the sizing is off because these are way more to the left so we go to the settings we go to the settings of this row and we’re going to change the left padding to 30 is excellent and what I think is now our problem is also fixed almost well right so now you know how you can actually create your entire product page and create even more stuff that you want to have inside of this now then below this entire row we can see another space just regular and there they have just a normal row with a text module in it so we’re just going to copy this one copy module save it over there paste it and now I realize that my screen is not the right size for you guys because I always have it on this ah yes this is way better I’m sorry guys I just realized my screen was too small for youtube sorry and then here we’re gonna have the faq like this and then they’re using just another toggle set so we’re gonna copy this title copy module paste it in over there and here you can create all your frequently asked questions for your visitors
i think we have a pretty beautiful product page created for this website oh then this one of course let’s make the the breadcrumbs home should be a home any link should be on this one and a separator and the separator should be this one I like this more then we go to ‘Design’ we’re going to change it up this has to be white it has to be the gilroy regular and the size is actually pretty much okay so the next step we are going to exit the official builder we go to the theme builder we’re going to add a global footer like this what are we going to build in the global footer well that’s pretty easy of course the first thing we need is a big row with five spaces the first one will be a text module over there and it’s gonna be
customer service just change it to uppercase the font should be of course Gilroy Bold and it’s gonna be white maybe a little bit bigger because the background of this entire section we go to the background color and we’re going to use
this background color it’s a bit different than the other ones then they also have a beautiful mask over it let’s use again this one and the mask will be almost transparent just a little bit like this beautiful floating squares or this time maybe we can use a blurp well whatever you want you can make use of them over there yes this one looks beautiful we’re going to use it like this and we’re going to even make it 0.2 yes it’s excellent then we’re gonna add a new module just copy this one add a new one and text this how can we help you of course adding text is gilroy bolt it doesn’t change the text font you can see what I’m I’m just going to create it and then we’re going to try to shoot it later and then what do we have over here we’re going to create some beautiful blurbs like this one and the title is email it’s also I got some gilroy both text will be also gilroy regular it doesn’t change right now but it’s gonna be okay hold on and then I don’t want an image I want an icon with a mill like this I can color should be white it should be on top it’s gonna be really smaller than this and I also wanted to have a rounded corners with
this one white a little bit more ‘Spacing’ around the icon so we’re gonna need more padding like this
i think 15 pixels would do the trick yes this is great okay let me go back to content text and we’re gonna add a mail ask your question or fan mail now we’re going to align it all in the center and this one also might be center and what I want to do I want when you hover over this module I want to actually do a gif to give a nice background color so we go to content we go to background we go to hover and when you hover over it it’s going to be this color but I want it to be bigger so let’s change this one I mean I want it to be darker and then we’re gonna make it like this is excellent it’s only on hover and then we go to ‘Design’ look at the ‘Spacing’ we’re gonna give this entire blur more space on the inside more padding yes and then I also want it to be around it this is great so when you now hover over it it’s gotta be great let’s copy this thing to the other ones because I want four more yes we’re going to change them real quick
then I want to align this one in the center this entire column so we go to the column sections it founds custom css margin will be margin top auto margin button auto and for this to work we need to go to ‘Design’ sizing equalized commands and then we are at the automatic margin really great the last section will be a regular section we can actually just copy and paste this entire thing like this
and then we’re gonna remove this one and we’re gonna add a image which is a logo and the text will be below it and it will say create a filter world it’s the payoff of the company we’re going to align it in the center and we’re going to make it a little bit bigger the image alignment will be in the center this is great now we’re not going to use these blurbs but we’re just going to use text modules for this and the text modules actually in h3 which is our products and below the h3 will be all kind of links like i’ll go to ‘Design’ we could attack sticker to this hyperlink icon it’s also the same when you press this you get here but you want this one make it gilroy regular I’m gonna make them white if you want to remove the space between them just go over here and delete all this space between your links because I just copy and paste it so that’s not really the way you should do that and then we go this one also white beautiful the heading 3 should be gilroy bolt all right then we’re going to copy this column oh my bad just press on this one remove the other ones re-paste this one two again five of them change these real fast
then we’re gonna change the background of this entire section oh we didn’t create another section we created another row but I want to change the background so we go back to wireframe and copy this entire section delete this row delete this row now we have actually exactly the same with another section go to background gonna change it to this orange and that’s it let’s save this one now when we look at the front and this is our beautiful website with all the products over there but now let’s make a link of this one to the right product enable visual builder then we go into this section of this row we’re going to give the first column an entire link and this is the actual link press save save again save this page when I now go to my front end of my website and I press on this button now I go to this page as you can see some things are not yet alright we have a double header which is really strange and we really need to fix this whoa also the footer is a bit strange because these are all buttons first we’re going to change the double header I think it has to be do with the theme builder then we go to make a new template for all products over there create template save changes let’s see when I refresh this page now enable visual builder so I think when looking in the wireframe we can see that there is a section over there and there’s a section over there which is actually the header I actually don’t know why they are here but we’re going to remove them just like this and this is the header template and that’s okay so we’re going to save it and now on the front end it looks like this also for the products we need to pull them up with just a few pixels remember we go to the settings of this menu we go to ‘Design’ we go to ‘Spacing’ and we’re going to change the bottom margin to minus 75 here we go and now we’re gonna change the content of the post again I don’t want to edit by accident my my header so what I’m going to do I’m going to enter into here I’m going to shut down the theme builder template editing like this you got to section settings let me go to ‘Design’ and we go to contour padding we’re going to add 50 pixels just to give it some more space I forgot something because any menu I have to state a ‘Design’ ‘Spacing’ I have to state that the bottom padding is only on desktop and not when I’m sticky so when in sticky mode it should be zero like this and on desktop it should be like this and now this is how it looks on the front end now the global folder looks a little bit strange and the fun thing is I always say when pasting uses text and if you don’t do that well you copy all this rubbish as you can see I’ve copied with every link the class button footer link so we have to remove all these glasses in all these links to make normal again and now the website looks great again within WordPress I think we’ve created a pretty awesome website with all these kind of beautiful effects and things it works actually really great now we can go to our product and in our product you can also scroll it looks awesome and I’m just gonna add two of them to my card it has been added to our card let’s view our card the card page really looks hideous so we’re going to enable the official builder and we’re going to tune a couple of things first we’re going to change the title ‘Design’ title text and the default the font is Gilroy Bold and we’re going to change these styles the title text the font should be in Gilroy Bold but then the title text color should be white error text don’t forget to change that also Gilroy Bold the body text should be gilroy regular and it should be black then we go back to content we go back to background the background color is now it doesn’t look like there’s background color but there definitely is and then we go to ‘Design’ we go to we go to button enable custom styles yes and what we want actually we want to create a great background button let’s style this button we’re gonna make it like this and the back button will be this one any button icon on the left and then people know that they’re moving backwards we’re going to give it a padding because of the icon you have to actually change the left padding to make it bigger or else it doesn’t feel like it is the same let’s style this one first we’re going to style all the table headers the fonts will be the Gilroy Bold you can actually make this one black and we’re going to change this one to our global color over there also mill right bold pricing exactly the same make it orange change the button custom styles again text color on this one wanted to be orange background white no border oh actually I want a border border color should be also this color border radius 25 pixels gilroy bolt
no icon and I actually want it to be a little bit smaller
like this and then we go create some padding on this way but I want this one to be a little bit smaller let’s change the coupon code placeholder color should be orange background white and then I want to have a border around it you’re a regular just a small border that’s also orange also this one orange all right let’s change this button for the last thing to change on this one white orange no border 25 got some balls saw excellent padding then we scroll down then we have also interested in the products is excellent but I want it to be on the other side go to the settings of this row and just switch the columns like this then let’s change the font on this one ‘Design’ title text Gilroy Bold and let’s make it like this one then also change the price text also orange and also in gilroy balls we’ll go change this one card totals change the text to Gilroy Bold of course well this looks all pretty good let’s make this one death and let’s go to the button of course and make it a big green button because this time oh let’s make the text white and let’s make the background the green color no borders and the font should be of course Gilroy Bold and then I want to show the icon and I want to show the icon always because it’s the next step in the process border radius 25 pixels really great this looks great let’s change the text to we got gilroy regular so this is great and this one uses our linked products or cross and upsells so this is excellent of course on the background I want to see some beautiful background image let me go to the background we’re going to add the mask again just like this one we’re always using and then we gotta invert it and this looks great now what’s also very important is that you want to have some more usbs over there now we’ve created them earlier on with the products so we’re just gonna copy this entire row copy row and in here we’re just going to paste the row base row like this we need to create a special section for that so we’re going to go to speciality we’re going to use this layout and then we’re just going to drag and drop everything inside of this one so the card just drag it and place it over there like this so we’re gonna drag and drop this row place it over here now you can however create a new row like this and we’re just going to drag them all to there excellent and then below that we create a normal row and in this row we’re gonna place you also may be interested in like this we’re gonna delete this row and delete this row the problem then we have is the background doesn’t go over here however there’s a trick for that what you need to do so you go to this section and you go to background and you just press this one copy background then you go to this section and you go to background space background now what does it do it creates the exact same background within these sections however it doesn’t looks really nice now and we’re just going to flip it flip it again like this and then it’s okay it’s not my best background but hey we’re just working with it I like it then we’re gonna close the gap between these two sections so you go to there ‘Design’ ‘Spacing’ and give it a top padding of zero and then we see that the sizing of this thing is smaller than the card section you can do two things or you can try to change this one which is really hard it’s possible but it’s a bit hard or we can just go to this row just go to ‘Design’ go to sizing and we’re just going to change it to 1100 so that it almost looks the same well you can fine tune it whatever seems fit save it one problem however is in this page what you see is that we have white background so the menu up here is not visible how are we going to change that you go to your dv theme builder and you’re going to add a new template but it’s going to be a specific page it’s going to be the cart page and I think we’re also going to use it on the checkout so just add it in and also maybe a my account press create template and now we have a special one for just these pages click on this one and click disable global so all the changes we make in this header will not be applied to the entire website press on edit button section settings background unsticky now it’s orange we also want it to be on global like this and press save don’t forget to exit this one and press save changes or else it won’t work exit official builder on the card and now we have a beautiful card page which is the way I like to see it if we have more products in the same category they will be added here as the same like this alright proceed to checkout it also is hideous so let’s change this page press enable visual builder first of all we’re going to change the title ‘Design’ title text Gilroy Bold you know there is even an easier way to do this you don’t have to change every time the title files on the body fonts go to your dashboard go to d go to theme customizer any theme customizer you go to you go to general settings then go to typography and then go to the header font this one will be in Gilroy Bold and the body font will be gilroy regular like this press publish when I now refresh this page you will see that all the fonts has been automatically changed to the normal things it will save you a lot of time all right then we’re going to style this one returning customer click here to log in the font has already been changed but maybe you want this font to be Gilroy Bold that’s okay you can just change that then we go to the content background gonna make this orange this is way more in our line all right there we go to the buttons I want to change all the buttons login it’s not a real important call to action so we’re going to make this the text should be white the background color should be this are orange we have no border and we’re going to make the radius of 25 pixels like this the button found should be gilroy bolt show it always then we’re going to change the padding 75 over there and 65 over here and let’s change something with the hover so when you hover over this one I want the background color to be white and the button text color on however should actually be our orange and also I want a border when I hover over it I want a border and I want the border on hover to be orange then the funny part is you have to change the border with on a normal color also to be orange
or else it won’t work like this see work all right then remember me that’s great just make it gilroy bolt and now we’re gonna change then I see that this thing is if you want to change this lost your password link you go to your body text you go to the link and here you’re going to make it orange and also change this to go right up that’s okay so now also the links has been changed this looks excellent then we go to this field we’re also going to change this one the form notice background color should be orange and the text color should be white and then the font should be bold okay then if you want to remove some of these fields there are very good plugins for that to do so so we’re gonna do this in this tutorial but you can however change all these fields then we have to style this one to make the remove I want it to be orange and I like the rest is great then we have more notices to check out payment section the notice background should be orange and the button is a very important one so this button actually should be white and the background color should be our greenish and then when you hover over it I want it to change so then I want to make this one green and the background on hover should be white like this and then the border should be two pixels when I the border color on normal should be green and on hover it should be green also and the radius should be 25 and then the button font should be Gilroy Bold the button icon should be always visible and let’s change the padding again 60 and 75 this is great and then some top padding of 25 pixels change the privacy policy link to orange and of course this text you can all change it in WooCommerce in the next video all right this looks really great we go to the settings of this section we go to the background and we’re again we’re gonna ask at our beautiful mask or maybe you have your another mask or maybe you just want to do something else that’s okay and then we’re gonna invert it so that I’m gonna change it a little bit so that we have all these details but it’s really hard to see but it’s a nice cool effect over there save your checkout page and then one of the most things that a lot of people forget when you place your order right now you will go to this page who just said thank you for your order I think that’s not a very nice customer experience what we need my friend is a thank you page we want to redirect visitors after they purchase something so that they get a real nice user experience with a customized thank you page with beautiful maybe an image for a video or maybe a cross sell another upsell or a new offer or anything else to do that we need a little bit of code it’s just a really short snippet you need to add it to your functions.php but if I go to appearance theme file editor then we go straight to Divi and when I want to change my functions.php in Divi well that’s not very smart because with every update the dvd theme does this file will be replaced again with the new file so our code will be gone however I made a really quick video about it how to do that follow this video then come back here all right once you have followed my video now you can go to appearance theme file editor and here we can see that I’ve now created a child theme which called Divi orange fit press on select and you go to functions.php and we’re actually going to paste here a snippet called redirect WooCommerce checkout page to a custom thank you page we’re going to redirect them to thank you order like this we’re gonna need this url so copy it don’t forget the slash and press update file and then we go of course to appearance and themes
because we need to activate our child theme then we go to pages and we’re going to add a new page which is called thank you for your order and don’t forget to change the permalink to thank you order press publish and then we’re going to use the Divi builder this page will actually contain all kind of elements we’ve already created so we’re going to clone our existing page and I really don’t know why this is so small but all right let’s go to your existing page search for your home page click on it use this layout
i want to change this one to another call to action which actually says join the Orangefit family and the button will be sign up and we’re going to change this button because what I want to do is make clear that the icon is actually for for the newsletter like this and then we’re gonna show the button always sign up all right save changes then this page section is really beautiful we’re just going to give it some padding of 150 pixels what we want to do is actually this row the set index is not okay so we go to advanced position we’re going to place place the set index to make this 10. then we’re going to change this entire row we’re going to give it a set index of 25 like this so it’s always on front of these letters and I also have to do it with these player-based things you can see that I think it’s also on the main page it doesn’t work great so here we go it files position that index 25 and as you now see that they’re always on front which is exactly how I wanted also with this one advanced position set index 25 yes we should have done this earlier on but you can still do so now let’s make this even better thank you for your order this is a bit too big so we’re going to change the size to make it 140. what I actually want to do is copy this row change it bring it over to here and we’re just going to say for the user experience one your order is being checked our people are checking your order right now and we’re gonna use icons for all these blurbs and of course the icon color should be in the green one okay and we’re going to change it this one to 2 back in your order
now when suddenly somebody has placed their order this is the page tools they will see this is way more nicer than the normal thank you page from WooCommerce now before you can actually start selling you need to add your taxes you need to set up your shipment costs you need to optimize your website speed you have to create more products you have to create the invoices which will be sent up through the emails we have to do a lot more stuff so that’s why I created a playlist with all these videos covering all these different topics make sure to subscribe to this channel so we will be updated when a new video comes out and follow the playlist so you can start selling your products change the world by doing so and also make a profit I wish you an awesome day and i’ll see you in the next video
