How to Clone any Online Store with Divi and WooCommerce: Part 2 - Building the Product Page

hey guys it's robbie here from the divi engine team with another installment of our how to clone any online store with deviant woocommerce tutorial series today we're going to be looking at the product page and how we build that out using the built-in divi theme builder it's going to be a great learning experience on how to customize and duplicate layouts that you find online that you'd like to use on your own store so without further ado let's go ahead and jump right back into it by looking at the abercrombie and fitch site and what we'll be duplicating today okay so here we've got the abercrombie and fits product page now when you look at this it kind of has this top banner here and then right below it it's got the breadcrumbs um we've got our image here and our image gallery for the product and then we've got a title we've got a divider looks like the different variation options some attributes and then the add to cart section they also added this button here where you can go ahead and see some of the shipping and handling details now a lot of these things we are able to do with the default divi but things like these fancy variations and these sizes as well as this gallery are things that you'd only be able to do in divi with something like bodycommerce which is one of our plugins here at divi engine that helps you extend the functionality of divi and woocommerce for your site so what we're going to start with we're going to go from top to bottom first we're going to skip this banner here we're going to start with the breadcrumbs and then go all the way down until the page is finished and as for banners like this we're going to cover that in a later portion so let's get over to the theme builder and look at how we're going to be able to do this okay so to kick a little off we'll need to go to the theme modes on the back end of our divi site we're going to go down to divi here theme builder and now we need to add a new template for that product page so we're going to click on add new template and then we need to go and scroll down to the actual product section now you can add a template for specific products so you can do specific tags different categories it's entirely up to you we're going to keep it to all products for this tutorial and we're going to say create template now once that's done we need to add the custom body and you'll see that it copied over the global header and global footer if you had an individualized footer or whatever or header that you wanted to use you'll just delete that out and add that in but we're going to keep it as is and we'll build the layout that dumps you into this kind of like pre-structured section with the row as well we are gonna go firstly and we're gonna go ahead and create that top bar like we said this part right here with the breadcrumbs in it so we're going to add a single column row and we're not going to add a module at this moment we're just first going to adjust this a little bit so we're going to go ahead into the settings for the row we'll go to design and then what we're going to do is adjust the sizing to make it a nice full width sizing and then we go to this and we're going to set that to 2560 and then we just need to add a little bit of padding for that module that will be going in there so next up we're going to go to spacing and we're going to add padding of 10 pixels top and bottom so we just link them up like that and that should be it for this so there we can see that it's nice and narrow it's going to suit our purposes very good and then we'll just add that breadcrumbs module in there breadcrumb and it's already all the way to the left there now we need to if we look here adjust that little chevron to match that so we can just change the separator there we go and then maybe we want to use a light font for this so let's go with light and that looks good and then we need to adjust the background to match that off grayish color let's just make sure f6 x6 that's what we want and then we need to adjust some spacing settings here as well we're going to go add some margins so back to the spacing area on top and on bottom but we want to make that zero so that it takes up a little bit less space and then we want to add some left padding of five percent so that it indents it just a tiny little bit that looks much better already now we want to do one more thing here which is remove that top margin or padding i think on the section so let's go to design of the section settings spacing and then padding top make that zero and boom okay now that is looking the way we want it to look fantastic now next we're gonna build out the rest of the product page by adding those two columns with the image on the one side and all the product information on the right so let's get to that in a moment okay so trucking along here we want to add these two columns one that's going to contain the image and the rest that's got all the product info in there so we're going to go back to our theme bowler here and we're going to go and add a two column row now in that first column we're going to dump in a woo images module so i just type woo i look for images and select that and for the most part we can leave the settings on this module as is because we're not going to be removing any elements or anything like that we wanted to show all the images but you can tick things off and on your as you see fit and um you will take a look in a little bit what that looks like on the front end of our site but for all intents and purposes this is all we need to do for the first column now as we discussed the default view on um a divi woocommerce site is going to be to have these variation options and extra images at the bottom of our image down here the only way you can have different gallery options is to utilize body commerce or similar plugin that lets you customize these various nuances to create that really bespoke feel but for the purposes of this tutorial we're going to keep it as is so we've got that one ready to go and next we'll fill in all the product info okay so now to keep things flowing here we're going to start building out this right column for the product information the add to cart and any additional information and we're actually going to break up this process into those three steps we're going to focus on this top part which is just product information which is going to contain you know the the title the price that says corp for colombian peso that's why i find myself today in colombia and um next up you've got like product details here and then the add to cart part so and then at the way bottom we've got all this extra information so we can focus on that last so let's jump into the first part here by going to the back end of our site again and for the second column we've got a title up there which is the next thing we'll want to add so let's hit the plus button here and then we're going to go ahead and type woo to bring up our woocommerce modules and then we'll look for the woo title module and there we go that will bring up our product title and then all we need to do is kind of adjust the bottom margin because if we want this um price to be nice and snug up here we're gonna need to reduce that a little bit so let's go to design we'll go to spacing and then for the bottom margin we're just going to put it at 10 pixels and that's that for that one so next in and of course as with anything you can adjust the design the title text the weight all that fun stuff that's entirely up to you this is just kind of trying to replicate for the most part what that other chromium fits site looks like so let's add the price module next so let's type in wu once again to filter our options here and then we'll find woo price okay so that's looking okay but we're not loving the colors going on over here and we might want to reduce some of the weight in the text as well as maybe the text size a little bit so we just keep these settings here as is you can do all sorts of other crazy things but you always wanted to be this product because we wanted to relate to the product that we're looking at so let's go to design and go to price text here i'm going to make the price a light font and let's take a look here we're going to use our dark blue color and then we're going to change the text from 26 down to 16. and that is looking a little bit more reminiscent of what we've got going on here on the abercrombie and fitch site so we're going to say that's cool and then next up we need this divider line that we got going on so let's go back here and then do add module and we just type in div that'll bring up the divider that looks pretty decent but we need to change the color of the divider a little bit so we'll go back to the design tab line line color and then this charcoal color that they used is probably just c and then again we're going to adjust that bottom margin in the spacing section just to keep things nice and snug down to about 10 pixels and then we'll just go ahead and finish that one now next up we've got some product information um we're not going to be matching this corr identically just because of the way that the divi add to cart module works um again with body commerce you've got different modules for the attributes and things like that you can switch them around so we're going to do our best to you know mimic what they did on the abercrombie fit site but if you really want it to match 100 you'll obviously need something like bodycommerce which is a great tool to have and that's my plug for that okay so let's go and add another module here and we type in wu once again and this time we'll add the wood description section or module now what you can do in here is you can do tell it use the long or the short description i don't have a long description for that oh actually i do there's the long description but we're going to do short description for this one and you can do all the other settings like change the background we're just going to make that text a little bit lighter because that's kind of the theme that they use here on the abercromian fridge site and you know what maybe we'll add one pixel of lettuce spacing there or maybe even once too much let's go with 0.5 half a pixel of letter spacing it just makes that text stand out a little bit more and i think it's something similar to what they use here on the abercrombie fetch site and if you're really a stickler you would right click inspect let me drag this over here and then you would go through the actual css here to go ahead and find out well what type of letter spacing do they have nothing in here but there might be a different section where they utilize it so that's just a little extra information i'm using chrome of course so that would be your guide on doing that with chrome okay so let's bump back here to our backend of our site now we need to add some more things in here we've got a description module with the text there now we're going to go ahead and add the additional information module so just plus again and then we're going to go ahead and type in woo there's the additional info and if we drag this over we see that that would bring in all of that extra content right there we don't need too many things in here we just don't like that title that's on there so elements we're going to switch the title off and now what it'll leave is just the information there so here you'll see the brand you'll see the size and that is kind of what we want just gives the user the visitor on the site that extra little bit of info so that is that for this small section of the tutorial we're gonna go next part we're gonna go ahead and build out the add to cart section and we'll see how to do that so stick with us take a break if you need to we're gonna continue in a second okay so continuing on here we're gonna go ahead and add this little shipping notice um for free shipping here right before we wrap up and continue with the add to cart module so let's go back here and i actually forgot to do that in the previous step so that is my bad um so let's just go ahead and add a text module and then it adds all that dummy content but we're just going to delete that out and type in free shipping on orders over 150 because as you remember when we did the initial setup in the first part of the tutorial series we added that free shipping option for orders over 150 and this is where we make good on that promise and we want to make sure that we underline that and then we're going to go to design we're going to go ahead to text we're going to make this light text and we're going to add some letter spacing here and we're going to go with that 0.5 again and that looks pretty nice cool now because we set those global settings in the beginning we can set it to blue again but that would be redundant as we already set that in the global settings for the site because this is body text so that's fine the way that it is so just go ahead and check that box now for the coup d'etat we're going to add that add to cart button so we're going to go woo and then the first option there is add to cart okay so we've got this up here now we need to make some changes um we're gonna gonna first go to um the elements and just if you wanted to you can switch different elements on and off yes showing the stock or not um we're actually turning the stock option off because we'll be adding that below this section so let's go to design really quick and now we need to start fleshing it out you see that we added our color options here the sizes and that button is sort of nicely styled already for us but as you can see looks a bit different on the actual abercrombie and fetch site we're going to try and match this overall style so let's come back here and then what we're going to do is we're going to open up the field section here and the fields background color will set to white and then we're going to go ahead and change the text color to our blue color there we go and then we're gonna go ahead and turn the rounded corners that it has set here let me find it really quick around the corners we don't want rounded corners we're going to set that to zero and then we're going to give these also um a border width of one pixel which is right here and now we've got a nice little box there it kind of looks like the one we have there and that looks just starting to look better and now we want to style the drop down menus now we're going to do that by clicking and expanding the drop down menu section as i did here i'm going to do the same thing we're going to set the background color these menus to white we're going to set the text color to our dark blue color we're going again um change the menu font weight uh let me find that in here here we go down to light and then we're gonna want to adjust the letter spacing to be that one pixel and we're using that again you're a little bit larger than the other one to differentiate it that little bit extra we're gonna change that rounded corners as we did previously to zero and then we want to give that border also a sizing of one pixel and now you see that things are starting to take a little bit more shape here as far as this goes so um we're gonna go ahead and just also make sure that that border color is gonna be our blue color which it should be already but we'll just double whammy it in there and then that should be it and now we're gonna add a little bit of code to actually add a padding to this section here so what we're going to need to do is pull up one of our snippets that we have which is going to be a snippet number 14 now you're gonna add that year in the add card settings by advanced custom css and then you're gonna go down to drop down menus now i'm just going to quickly copy my code here and again the code is on the divi engine website just get snippet 14. you see how that makes that a little bit larger making it look a little bit better i think that looks fantastic now what we need to do is just to adjust the button settings for this module to make things look a little bit more similar to what we've got here get that green color going so let's go into the design section here we're going to go to button we're going to use custom styles because we don't need those default styles that we created in the first step of this tutorial series we're going to go down and set the um button text color to white that's going to make things disappear a little bit don't worry about that we're going to set the background color to this hex code which is going to be hash 00782e i'm going to paste that in there and that gives us that green that we have there now the button hover background opacity which you you just click this hover settings button then you click hover i'm going to click this we just want to set that to 90 for when the user hovers i'll show you why oh there we go when you come here you see how it goes a little bit lighter that's how you achieve that here on our site so we've got that going we don't want a button icon so let's go eliminate that really quickly that's a little silly and then we're going to put some padding on the button for top and bottom so padding it's going to be 12 and 12. that looks fantastic and then we're going to put left and right button padding to get that width out of the button to 30. now that's looking a lot more like what we've got going on over there and we did that fairly easily with almost no work and we're almost done with this page guys can you believe it um all we need to do is button up that no pun intended that bottom part of this uh the information column and then we're all done with this page it's exciting stuff so let's get to that in the next little portion here okay guys so continuing on here we need to do just this last little bit we need to add the shipping handling button at the bottom and then we also want to bring in the stock notice that we have here remember we disabled earlier when we were working on the add to cart section so first things first let's add that back in so let's go wu and then we just go to the stock module and there it just adds that in there really easily and simply now what we need to do here is we're just going to go into the actual design settings when we go to in stock text we want it to be our blue color and then we'll just add that lettuce spacing again of the 0.5 there we go and that's it for this module but as you can see there's a lot of different stuff you can do here you can change the outer stock text you can change the back order text that's up to you but this is to serve as a guide on how to do that so let's finish that one and last thing we'll add this shipping and handling button now we're not going to have it pop up in a modal like what they do on the actual epichromium fitch site but there's a great tutorial that i'll link in the description of this video on the divi engine site on how to make the v modules pop up as modals and that is how you can achieve that effect so let's just go ahead and add a button module and you'll see that it adds our standard button that we've created previously okay so we're going to go ahead and edit the stock button and we'll change the text to be shipping and handling great now we just need to continue styling this section and we're going to go to the design button and we're going to activate the custom styles again because we don't have any use for this basic styling so we're going to go ahead and change the button text size to be a little smaller i'm going to make it 12 and then the button border color we're going to make a gray color so button border color and it's going to be that same ccc c color to give it that light outline that you have there and then we're going to change the actual um button hover color the border hover color the same way we did earlier to be our gray color so now when we hover it it's got that and we want to make sure that there's no icon associated with our button because we don't like that and then we just go to the spacing of the button and we just add some top margin of 75 to create some space from that top section with the stock and then we're gonna go to add some padding to the top and the bottom of the button at 12 pixels and then left and right we're gonna do 15 percent this time just gives us a nice size for that button and then the last step and let me just quickly double check something here because i see this is now blue color for the border um on unhovered color okay now that's fine we've got our gray stalls so that's good um the last thing we just want to put the button smack dab in the middle as it is here and i think that looks good and guys that's it we've got a product page all set so let me save this and for the conclusion here we're going to go ahead and preview and see what we've done so we close this out and again that all important step you need to save the changes here to be able to view them now for this i'm just going to go visit my store and it's going to load on up we've got all of our products here and let me click on the shirt and there we have pretty cool looking product page for our site now again this button yeah that we created you can have that link to anything or you could go ahead and follow that tutorial that i mentioned earlier but you can do everything as you would on the abercrombie and fetch site it's even cool when you change the color of the shirt it changes the image for the shirt you can zoom in you can add to cart you can do everything and that is it for this part of the tutorial now guys i hope you enjoyed this again this is all broken down into smaller digestible pieces for you so that you guys can rock it and not get too overwhelmed with all the information that we're sharing i really hope that you guys found this information helpful and definitely like and subscribe to make sure that you don't miss anything else now if you have any questions definitely leave a comment below and we'll definitely try our best to get to you other than that guys this is roby from the divi engine team i look forward to seeing you guys in the next part of tutorial series see you later now guys i hope you enjoyed this again this is all broken down into smaller digestible pieces for you so that you guys can rock it and not get too overwhelmed with all the information that we're sharing i really hope that you guys found this information helpful and definitely like and subscribe to make sure that you don't miss anything else now if you have any questions definitely leave a comment below and we'll definitely try our best to get to you other than that guys this is roby from the divi engine team i look forward to seeing you guys in the next part of tutorial series see you later [Music]

Channel: Divi Engine

Views: 217

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store, product page

Id: cKNqZ2fChH8

Length: 25min 38sec (1538 seconds)

Published: Tue Nov 23 2021