How to Clone any Online Store with Divi and WooCommerce: Part 3 - Divi Conditional Display Logic

[Music] hey guys hello and welcome to yet another installment of our tutorial series where we're showing you how you can clone any online store using just divi and woocommerce my name is roby here from the divi engine team and today what we're going to dive into is adding some conditional display logic to a few elements on our site now when you look at my screen here you see this black friday is almost here bar with a countdown to when black friday will start now this is a hypothetical date you can put any date for any type of sale in there that you choose but this is something that will only show up prior to the actual sale and if we go down the page here a bit we've got this big banner here that's it will be showing as soon as the black friday sale or whatever sale starts i'm going to show you the additional logic behind that and how to do exactly this and it won't show outside of a specified time period then lastly i want to show you guys something here we're going to add conditional logic that will make an offer for the clients when they're they have visited the card but they have abandoned it they haven't completed the checkout process so if i go to my cart here and we're also going to fix this column here on the right hand side don't you worry but when you visited the cart and you go to checkout proceed to checkout and we've been on this page let's see what happens when i go back we're going to give it a couple seconds here and then you see this offer pop up and this will only happen when they've added a product to the cart and then also went to the checkout but didn't finish the checkout process we created a coupon code that we offer them here for extra 10 off if they go check out now so guys that's a lot of me talking why don't we just get right to it and get started with the first step okay guys so to get the ball rolling here what we need to do is we're going to start out with this banner at the top that will only show while we're still in the planning phases of doing the sale so to announce it and so people are aware of when it starts so we're going to jump into the back end of our divi install here i'm gonna get get over to the the theme builder and what we need to do is we need to modify the existing global header that's there so we open that up and again that green color indicates that it is a global header now what we need to do is add a new section here we're going to make it a full row section um actually no we're not we are going to make it a two column row and what we're going to do is we will go and adjust some of the sizing settings we want it to be full width we're going to make it all the way 2560 width there and then also what we'll do just to make sure that we can see it nice and clear we're going to give it a background color of black because black friday and then we shall quickly just add in our modules that we'll be using so the first one will be using is the countdown timer and you'll see that it adds a ton of stuff on your we're going to delete the title out because we don't really want that in there and here is where you'll set the date by default it'll pick something 30 days in advance for the purpose of this i'm just going to leave it as is and then for the background color we'll make it nice and transparent so that it is only the blackness there so we're going to need to adjust some of the spacing here and what we'll do is we'll go to spacing i will just give it 0 top and bottom padding see that moves it up quite nicely there and that should be at that for this portion now we're going to add the text here so we'll just add another text module and you know we can come back and reference what we've done here we can even go in and edit and see what we've done but this is what we want so i'll just copy this text black friday is almost here i'll add this to my module and then that'll display there but we need to do a couple styling thing easier so we're going to go into text we want that nice and ultra bold we're going to capitalize it and we'll make the text white so it stands out and we will certainly center that text now we need to kind of figure out how big we want the text to be and i think maybe 31 is a good size let's see what we've done previously here yeah maybe it's a little bit larger but i think that looks fine some of the spacing issues we're seeing here is because of the padding that the actual module has here the the column so let's click out i'm still on my text settings here let's click out of that we're going to tell it first drag this up maybe oh come on okay so we'll just go to the module view sometimes that's easier since this will be at the top i'll put that there i can probably go to visual boulder again now and now i can edit the padding settings here so the first thing i'll do is go to spacing we'll put zero padding for top and bottom that is working a little bit better and then maybe what we'll do is also make sure that with the sizing we equalize the column heights because what we need to do also is we need to make sure that these items are centered in the middle vertically and for that we'll utilize snippet number two that we've used prior and let me go ahead and copy and paste my snippet number two here copy and then i'll come back in here and if you recall we need to put that in the column that houses the element that we want to center and put it in that advanced tab there we go then we'll go to column two [Music] and paste it in there great now we see that there's still a little bit of space above this uh text element here and i'm going to show you how to remove that okay so to remove this top part is actually pretty easy all we need to do is edit this countdown timer go to advanced and to custom css and we'll scroll down to the title because remember we left that title empty all we do is add snippet number 17 and put display none in there and you see how it kind of equals it out right there and that's looking pretty good i'm happy with the way this looks and again that was snippets 17. um we're going to jump around here a little bit maybe with the snippets we because we're all using old ones and new ones and we're mixing it all up so but everything will be detailed specifically in the text document that goes along with this also but so we basically have the layout here so if we save this really quick that's been saved now and i go to my website here on the front end that's the backend let me delete that wp admin you can see that it's right here but the way it's set right now it's going to always show on the screen no matter what time of the year whatever it is we only want it certain time so the way we do that is we add some conditional logic so you're on the back end let's open up this row let's go to advanced and then conditions and this is where the conditional display logic lives we need to add two conditions one for where this will show before a certain date and one for when it will show after a certain date so that creates that start and end date so let's do the start and you'll see a bunch of different options here and we'll use a few throughout this tutorial series but the one that we're interested in right now is date and time we're going to say we want this to only show from december 4th it's december 3rd right now so i'm going to put well just let's put the 5th just in case i'll say promo start just for indicating the beginning we want to make sure that it says is after here so we add that in and then we need to put the end also so we'll use the same date time we're going to say it's going to end on the 13th for example and here it says is after we need to change that to is before and then we'll scroll down and say admin label promo and and this is just the advertising we'll see okay now there's one more thing that you need to take note of is that display if any condition is true you want to set this to both because otherwise what's going to happen if it's before or after which is pretty much always it will always display it so when i save this and i save this again you're on the back end and if i come here to our website i refresh the page it's gone because guess what the promo hasn't started yet but just to show you so you know i'm gonna go back in really quick i'm gonna change my start condition i'm gonna make it the second of december then we'll save it and then we'll go back to the front and refresh and now it's there again so you see how the conditional logic is working we've got up sale promo announcement header there and next step we're gonna go ahead and add that big sales banner this one on my completed site here i'm gonna add that in there so stay tuned next step is coming up okay guys so continuing on we need to build out this big sales banner that shows up right below the header of our site and in between the actual products for that are available for purchase so again we're going to jump into the back end of our divi site here and we're gonna go to the home page so we go to our pages and we go to the homepage we created many many steps ago it feels like years at this point wow and let's go visual here and we see our page here i believe beneath this section because otherwise just part of that top section we want it to be here we're going to do a double column row and we'll add a text element in the first one and for now we'll just close that out we'll drag this back to the top and then we'll get going with bolding this one out now we're gonna be adding an image to this and pixels is a good resource for finding some royalty-free images i highly recommend it and if you type in black friday you'll find a whole host of different images and so forth that you can choose but i have a specific one that i selected then i'll add the url to the actual description of the video and in the text post but i like this one so i saved this one to my computer already or you could do so again however you choose and then what we'll do is we're going to actually set that as the section background so oh not section sorry the row background so we select that we go to background select the image and then we're going to add it and now mine's not loaded on this site yet i've got the image right here it's uploaded and i add it in and there she is in all of her glory we're going to add some text here on the page that i am going to let you know and what we want to do though here is we want to make sure that this thing stays a certain size but we'll get to that in one moment so let's go to the text and then let's look at the text i use here i said save with our biggest discount of the year so i'm copying that over i'm just going to replace this in there and that doesn't look all that impressive yet now does it now one of the ways that i'm going to be able to differentiate my text here and give it some other features is to just go ahead and add some html inline styling to the word biggest here but let's quickly style the rest of the text we're going to go to text here we're going to make it nice big and bold so we're going to go with our ultra bold again we want to make it white and then what we also are going to want to do is increase the size a bit maybe 31 no maybe 41. that's getting better and then you also want to adjust the line height to stop that overlap there that's kind of important sometimes you know like you you're working on a site and this happens a lot of times when you go and try to get something to be mobile or responsive um and this is just you know a good rule of thumb to do when you see the overlapping test a lot a lot of time you can kind of pull out your hair with what is going on here but um yeah that's just a quick tip for you and what that one ear means it's just creates a spacing in relation to the size of the actual font there so gives you a little bit of a hint there now i mentioned we want to change this word biggest to kind of look a little bit different but first let me just space my text away that i wanted actually that is exactly how i wanted space spaced out so um let's go here you're gonna add a tag called span and this is just kind of multi-use tag that you can use sometimes and for the inline text you just type style equals [Music] and apostrophe and then you are going to type in the value that you want so maybe we'll say font size and we're going to set that equal to 51. let's see how that does and we will adjust that all in a second to make sense we just close that tag with the forge span also and okay so that's not very impressive yet so let's go with 61. so yeah 61 doesn't work it's actually i'm going to set it to em so it again works with the font size around it and that makes it so nice and big we're also going to want to set the color to be a little bit different and the way we do that is as simple as adding another value here after the semicolon with color and then we're going to paste in the color of our dark blue which is at 253 746 okay so that's already looking like it's kind of popping a little bit more but you see that the spacing below this word and above it is a little bit different we'll fix that right now and we're going to use that line height property again and we're going to set it to 1 em and then you'll see that immediately that kind of evens it all out and that to me is looking actually pretty good right now if you look at the finished product maybe we want to boost up that text size a little bit so why don't we go to design here let's go crazy let's make it 61. bam okay that's looking pretty nice that i can deal with and then we need to add some spacing also just so that we get this nice spacing getting it a little bit more to the middle of the page so we'll just go to the spacing tab close this text one spacing and off the top of my head i think maybe 45 top and bottom and then maybe some left also just so it gets to the middle of the page a little and now you can see that image is displaying quite nicely and that this will work pretty good and it's pretty much the exact same thing as we have here one thing that will change is this section's width maybe so we'll just go into the row settings we'll go to design when i go to sizing and maybe we're going to go at 90 for the width and then we'll just make this be full width at 2560 and now it really pops on the page i think that looks really good and we're done building this section out but we need to do one more thing here remember i said that we want this to only display during our sale period so we need to add conditional logic to this section again but let me just quickly show you if i save this right now and i'm back on the front end of my site i refresh it displays no matter what we still have this one up here but remember we did that intentionally just so that we can see what we're doing but you will set those conditional options to your liking i'm coming back to the back here and let's fix that really quick with the conditional settings that we need for this and we will scroll down we're going to hover over this row go into the settings advanced conditions and now we need to eat a add eat that's fun add a start time and an ending time for the sale so we're going to utilize that same date time logic that we had here let me actually save and reload that it is not having a good time with that option let me try that again open this one come over here advanced okay adding the condition daytime and we want to first show that it won't display during a certain period and then we'll adjust it so that we can see it the whole time while we're working so that we know it's up but the important thing here is to teach you how to do this yourself so i'm going to say it's from the 5th and we're going to say is after right and then we'll say sale start it make sure that it's enabled then we add that one and then we need to go add the second one we're gonna just put arbitrary 13 in there we'll say sale and then before you're quick and just click ok make sure that it says before and now only between that period this particular sale banner should show as long as you got it we got to make sure that both conditions are true otherwise it'll just show always so let's go up and let's save this page and then we'll hop in the front seat refresh our page and it doesn't show but we knew it wouldn't because we set the start date in the future so let's quickly go here and go to the advanced section conditions and you even see when you hover these conditions it shows you which ones are active and you can even do it down to the hour which is pretty cool but let's change the start to the second of december let's save that and then let's see what happens on the front when we refresh it and hopefully it's the end it's there okay guys well that's pretty cool stuff so now we've added two dynamic elements to our site pertaining to a sale that works with conditional display logic one of the newest features in divi which i think is amazing the power of this this is crazy and if you guys recall when we built out this header even we added some conditional display logic to show certain elements based on whether users logged in or not we're deepening that knowledge now and that's awesome stuff now the last thing we're going to be adding is in the next step is that little pop-up on the left-hand side here that if they abandoned a cart which is another powerful tool to get people to buy which is the goal of this e-commerce site and of this course so stick with me we're getting to the next part right now okay guys so now we're getting to one of the juicier birds where we're gonna be creating this abandoned cart offer that pops up on the left-hand side that is easy to close out and this is a really good tool for e-commerce sites especially during sales when people are adding things to the car they're going to the checkout page but they didn't check out so you didn't make the sale so you want to get them to be a retargeted customer by really making them another offer and incredibly you can do this with divi and these dynamic display options so why don't we get cracking we're going to break this down into three sections we're going to build the container we're going to add the content in there and then we're going to add a bit of code that makes all of this happen so let's go to the back end of our site and we're back on our home page here what we're going to do is we'll scroll all the way to the bottom and what we're going to do is we're going to add a new section and we're just going to add a single column row now what we want to do here is we want to work with the section first so let's not add any modules to it so let's just go here to the visual builder so we can visually see what we're doing and go to the section settings now first thing we want to make sure we set the size for this we're going to go into the sizing here and the max width will be 500 pixels now what we want to do so we can continually see what we're doing but also so we get this effect let me refresh this page one more time so you see what the final product will look like and it'll pop out here we're going to add this border around it and give it a nice like shadow so it pops out from the page so let's go ahead and scroll to the border section and we'll add a border that's about 15 pixels wide i think is good and we're going to want to make sure that we set that to a color that makes sense and i like this orange color that we have in our palette it doesn't get used much throughout the page so it makes it pop a little bit more a little bit more relevant to the user and catches the eye more we're going to add a little bit of a shadow also to give it a little bit more depth and we'll go with this first option here but again we're going to go ahead and adjust the strength of this blur so it reaches a little further lifts us a little bit more off the page and again we can give it this orange color but we'll of course adjust the opacity a bit so it's not too overbearing to maybe 20 percent let's see yeah maybe 30 40 40. i like 40 and we'll keep it at 40 there and that is that now we want to do one more thing which is that sliding effect that we have and we do that by going to the animations and we say slide in the default it comes from the center but we're gonna slide it in right and you notice how we had that little bit of a delay we set that right here 3000 milliseconds means three seconds essentially and i'll slide in very simply very easy to do now of course we need to go add some conditions and then we're also going to be adding a css class to this and that's what's going to control if you come back here this close button because we're going to add javascript and when you click that button it closes out like that so custom css will be the first well not the custom the css classes and then we'll add that css class and we're going to call this d e pop up dash promo and that is just the arbitrary class name that we came up with because it's with the code that we've used here so that is good like that and then now let's get into the conditions here when do we want this thing to show up right so let's go to adding a condition i'll show you guys yet when you scroll down you can find different settings that pertain to different things but the one we want to really look at is here we want to see whether there's any contents in the cart so if the cart has products and that's basically all it's checking so cart has product is the name that will give it you can give it any name it's going to be enabled and there we go okay only if the card has a product now what page do we want them to visit when there's been a card in the product we'll add here and then we'll say page visit and of course that's going to be the specific page the checkout page and then we can say visited checkout so we also want to make sure we say both conditions are true now let's think about this for a second just one more time we want to make sure that this box displays only when the user has previously added item to the cart but also visited the checkout page otherwise you know we might be bothering people with another ad it could also be offering extra 10 to somebody that we don't want to offer it to this is specifically targeting those people that have went to the checkout page but have not finished the checkout process so with that that is the end of this outside of the container but now we need to add that little closing x icon so let's go ahead and do that the way we do this is we have a single column row here and then what we're going to be doing is we're going to be adding a um blurb or actually icon module because previously divi did not have an icon module but with one of the recent updates we have icon modules which is awesome but before we do that let's just quickly change the container here a little bit and what we're going to do is in the single column row section we're going to go to design and then sizing and we're going to use a custom gutter width of 1 and then we're going to set our width to 100 percent and then what we also want to do is we want to change the padding so the spacing on this to have zero top and bottom padding because we want that icon to sit nice and snug in that top right corner and we're going to figure i'll show you exactly how we do that but we also need to go to advanced first and do that positioning i want to make sure that the position of this is absolute within the container and we want to give it a nice high z index so that it lays above the other content on the page this is very important and then we'll finish that now we go ahead and we add in the icon module previously you could have used a blurred module but what we're going to do is we're going to use the new icon module there we see that big old icon in there that doesn't make much sense for a close icon i think this one works much better so all we need to do now is style this so you go to the design tab icon i'm going to make it the same orange as the outside but i think the icon is maybe a little large let's go with 40. that's a little bit less intrusive we want to make sure that we set the alignment to right and now you can see that it's fitting right snug there where it belongs and we need to add another class for this for that code we're adding a little bit later which is going to be called d e dash close dash pop up dash promo so it's very similar to the one we just used in the previous a little bit of css class that we added so very easy to remember and click ok so now i told you we're breaking this down into three sections onto the next section we're going to be building the content of this all right guys so we're getting into the home stretch here where all we need to do is add the contents that we have here over on our one that we're still busy building out so the way we do this we're just going to add a new single column row and then what we're going to put in is we're going to put in a text module now you see that that takes up a little bit of space now you can put in whatever text you like here for me i can conveniently go copy and paste the demo site that i did already for this and go pop it in and basically all we're doing is we're saying hey you can get an extra 10 off if you go ahead and check out now um so i want to make this first line pop a little so i'm going to make that a h2 tag and i'll just close that so it's a h2 heading and then what i'm going to do is i am going to change that heading tag a little bit and just make it nice and bold so it stands out on the page and maybe i'll just even make it a little bit larger maybe 31. and if you compare it to what we've done here that kind of gets into the same zone here and i think that looks pretty decent for what we're trying to attempt here now we want to add that extra line there for the coupon code and that's easily done we add yet another text module and then we'll just delete this out and we'll say use code extra 10 off or whatever your coupon code is that you've created on the backend of your site now you notice how i typed that in lowercase maybe you want to go ahead and just say yeah in the text settings everything to upper may probably make sense to center this but now we want that border around it and we'll change the sizing and the color of the text a little bit so let's just make that orange also size 18 i think is good [Music] and for that border very easily we go down to border [Music] we set a border width of one pixel we're going to set the color to orange and we're going to make it dashed now one more thing we're going to want to do is play with the spacing here a little bit just to give that text a little bit of breathing room on the top and bottom so maybe what we'll do is we'll add some padding at the top and bottom of 10 pixels and that is looking pretty pretty awesome so far and then we're almost done now of this section we just need to add the button that will take them to the checkout so just go and type in button select it and right now it says click here it says let's change that to say check out now and then for the link again we're going to use some of the dynamic settings here built into divi we're going to go ahead and just say select a page link then we can select our page that we want to go to we're going to say check out check that and then that and there we've built out a little slide in section it's already two more things need to happen two little blocks of codes need to be added and we're going to do that right now in the next step all right folks we're here in the home stretch all we need to do now is to make sure that this section stays fixed on the bottom left hand side so we go to the advanced tab settings here for this section position fixed and then bottom left now it'll stay on the bottom left-hand corner the whole time when it is visible now as far as closing this out when the time is right we need to add two sections of two little blocks of code so let's just go to the module view just for simplicity and let me delete those code modules that were there for a second and we're going to add the code module i'm going to go ahead and open that up and now the code module that you want to use or the code you want to use with this module it's very simple it is one of the ones that will be linked in this article in the divi engine post for the text version of this tutorial and it could be snippet number 15 1 5. i'm copying mine right now i'm going to paste it in there but first i want to make sure that i put it between two style tags because what we're adding here is some css so whoops let me just go back and copy that again paste that in there and there we go now what the css does that little x in the top right corner it is going to make sure that it turns into a cursor so that when you're hovering it you know that oh this does something i can click this thing so let's say okay to that and then we'll add the second little snippet which basically it's gonna add the javascript required that is gonna close that um that that module when the x is pressed so that it's not on the screen the whole time it's not intrusive and as we know with javascript we need to go ahead and put it between script tags and then go ahead and paste our snippet snippet number 16 and this just explains again that when we are on de close pop-up promo so it's listening there for that little x and a click happens we're gonna go take it out of the view of the user so let's say okay there and now we're gonna cross our fingers we're gonna update the post and we'll refresh the front end of the site now i've already visited the checkout page here so hopefully within three seconds we got a little slide in there and there she is we've added that abandoned card offer for users that have only added something to the cart but also went to the checkout page but didn't end up the checkup process so you have now a very dynamic site that is almost ready for prime time and well guys go high-five the dog say hi to your mom you've done it that was a pretty intense section there at the end with the additional code but you've done fantastic this is the end of this installment and in the next one we're gonna be tightening up the last little bits of the site to be ready to go prime time so thank you for sticking with us again this is roby with the divi engine team i'm gonna catch you guys in the next installment next week [Music]

Channel: Divi Engine

Views: 157

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store, divi conditional logic, conditional logic

Id: MTJ8vZZVDxc

Length: 34min 1sec (2041 seconds)

Published: Tue Dec 07 2021