Reasons to buy Oxygen Elements for WooCommerce - So easy to create and integrate your products

in this video we're going to look at good reasons why you would want to buy oxygen elements for woocommerce we have oxygen installed oxygen elements for for woocommerce and one of the best reasons to buy it is because it's so easy so let me show you just how easy it is to set up a template so here we have a shop on our demo site here and on our shop page if we head over to the shop page you'll see that there's no template installed and we're simply presented with a standard single page layout for the template and then followed by some recent posts so to change that we head over to oxygen and we're going to add a new template and that template will call shop and let's call that archive and to show you just how easy it is we inherit the header and footer elements from the main template i'm then going to head over to archive post type i'm going to just type in the word product and select product and then at the same time i'm going to say for taxonomies i'm going to go all and product and i'm going to say all product categories so now all the product categories will inherit this template and the template priority i'm going to set to 1 so that it doesn't so that'll override the default page template and i then say publish that published i head over to edit with oxygen oxygen loaded i'm going to add a section and in that section i'm going to choose under woocommerce i'm going to select a product list i'm then going to save and now when i head over to the shop page on the website and i refresh that page you'll see that the archive is loaded so that's how simple it is to set up an archive page then we're going to have a look at a single product page i click on single product and what you'll see now is that it's inherited the default post template to change that we head over to oxygen we head back to the admin area we're going to add a new template and we're going to call this one shop single product inherit the main template headers and footers now for singular i'm simply going to select single products i'm going to give that templates a priority of one so that it takes priority over the default pose template if i'm looking at a single product i hit publish now i go and edit that with oxygen oxygen loaded we add a section you head over to woocommerce select product builder select save and now when i refresh the beanie page the product now displays in the product layout so that was the default product layout complete with related products and that's how easy it is to set up a archive page and a single product page but that's not where the reasons end what we might find is it's great to have this layout but perhaps we want to change the layout so how easy is that well head over to the structure page we have a product builder let's go and add let's say we want a two column layout i'll go to basic head over to columns select a two column layout and now you'll see that the shop elements no longer display but my column element is inside the product builder i can now quite easily now head over to woocommerce and add product images on the left hand side and on the right hand side i can quite easily add a product title a product excerpt a product price and then the product cart buttons and maybe i also want to add the product metadata so there we have the metadata for that product and if i'm not happy with the look and the feel i can simply go along to any one of those elements and choose a color i can change the font weight i can add some spacing so you can see all the formatting elements that were available to me for normal content are also available to me for these items and very quickly i'm able to go and format all the elements inside this product listing maybe you want to make that a little bit bigger make that bigger let's change that button simply click on the button you'll see that the elements within the product build are available and i can head over to add to cart button i can change the background color i can change the hover color so maybe make that slightly lighter slightly lighter i can change the border radius i can change the button typography so yes we like the color at white the font weight maybe we want to change the font weight maybe we want to change the size there we can change the size and we can apply those parameters and just as quickly as we did that say i head over to the front end and you'll see that the layout is suitably changed and there you have the add to cart in red right so you'll also see that here i'm looking at the beanie product and in the store here i'm looking at the wordpress pennant if i want to change that simply head over to that search bar type beanie and you'll see that the product information gets updated and there i have the beanie page for me to take a look at check that formatting is right and that's it now if i wanted to add related products i could do that i would simply go to add go through my woocommerce list look for the related products which is here which is part of the product builder add related products i don't want it in that column i can simply then move it outside the column and now you'll see that i have the related products and if i want to i can also add the product tabs so add and once again just head over to these items head over to the product tabs in this case it was added in the image i can just drag that down to where i want it to display and there we have the product tabs and of course if i want to go in and edit or format any of this information i can i can go into description if i don't want the term description there simply select zero for the font size if i'm not happy with the size and spacing i can head over to content i can change that to apply all now i have some spacing around to maybe center it a bit more i can enter content border content typography maybe we'll make a little bit bigger so whatever i want to format i have full control now to format all of those items what i can also do under the tab section is i can choose my tabs so the normal tab the active tab maybe what i want to do with the active tab is make the text color red maybe i want to change the background color to a lighter red and then simple as that we have those changes take effect i can head down to related products and you'll see then that the menu here changes for related products and i can say if i want to center that title simply center the title if i want to change anything in the layout i can select center i can choose three columns or four columns two columns once again i can change the sales badge if i don't want the background color to be that blue i can simply move in there change it to red i can edit the image borders i can unset all the borders or i can create a border maybe we want something in blue and maybe we want two pixel width make it solid so there we have a much darker color to highlight and if i want to i can also change the radius for each of those so very easy to to make that change and if i want to i can even set the box shadow so maybe we'll just do something like that and there we've highlighted the image in a very nice way so it really has been that simple to format that related product section and i really haven't had to work that hard to make it happen if we look at links let's make the link so that's the title of the item maybe that's too big go with the 20 if i want to change the price i can head over to current price and i can send the font color i can set font weight change the font size and what i can also do then is the strikethrough price maybe what we're going to do well that price is no longer relevant so we'll make it black so the relevant price is in red to highlight the fact that there is a saving so it really is that easy to set up your related products and if i wanted to change the the view buttons i can come in once again change the background color and for main buttons which will be the buttons in the grid view we have and once again i can change even the hover typography so when i hover you can see that i get that effect where the button goes a bit bigger creating a little bit of an animation border as you can see you can change whatever you want to customize your related products layout in this case we'll just go with a standard button layout there you have it very subtle shadow so that's how easy it is to work on the related products it's just as easy to work on the tab content and it's just as easy to work on your product layouts and in fact i can go one step further if i don't want the product title there i can move it outside the column and create its own space and then simply under the various font options under typography i might center that in the center of the page like that so there's really no limit to what you can achieve in terms of your product layout so it really is that simple so another good reason to to get the additional plug-in is that you have full control over the layout of your product we'll now take a look at the account section of the website the for the customer experience so to do that we're just going to update the menu so that we can actually see those links in our menu so we can just head over to appearance we can get over to menus and i'm going to add a new menu and we'll just call that shop and inside that shop we will add the shop pages for the customer so let's have a look at things like cart checkout and my account we add that to menu and we'll leave it like that and i hit save and now if i want to add that menu into oxygen into my template very easily head over to oxygen head over to templates head over to main and edit with oxygen and i'm going to show you now just how easy it is to include that menu in your template and another good reason why oxygen makes so much good sense with oxygen loaded i head over to the header and i see that in my structure panel that i have a header row here maybe i want to move that above the menu and i think i'm going to add the menu in in this top header row so we simply head over to wordpress we go to menu and with the menu loaded i can simply go to the drop down select shop the shop menu is loaded and maybe what i want to do now is move that across at the top of the page and maybe put that in the far right hand corner there so there we have my menu my account checkout and cards i'm not going to style that any further we'll hit save we'll head back to admin and now if i head over to the front of the website you'll see that that menu item appears there we go and if i go to my account the default setting from wordpress from the woocommerce installation and maybe i'm not so happy with this layout so maybe i want to edit that so quite easy i can head over to oxygen and i'm just going to say all right we don't edit the page template we want yes we want to edit that page with oxygen so i'm going to go to edit page and when edit page opens you'll see that i have an option on that page which says edit with oxygen so what i'll do is i'll just make a copy of that short code and i'm going to edit with oxygen the moment i do that whatever i do in oxygen now will override whatever content there was on that page with oxygen loaded we add a section we head over to the woocommerce options and we just scroll down a little bit here until we get to the my account i select my account and you'll see now that it's slightly different because we have this lastly formatted tab section down the left hand side and across the right hand side i have the information but once again i can move in here and the menu float i can move to the left or i can move to the right or i can select none so in this case we'll select left and there are a whole lot of other options here that i can choose and as i choose them i'll simply see what effect that has on the menu items on the right hand side so this does give you a lot more options when it comes to what you can see in your page so let's just go back to the default setting then you have you can format your menu links so once again here you can change the border color there you have the different border colors you can look at the typography hover link active link in this case maybe what you want to do with the border color for an active link is change it to blue so now you'll see that we have the blue but once again you have complete control over the layout of your your customer account page so let's just save that and if we head over to the front end of the website and we have a look at the my account page and you'll see that there we have dashboard if i select orders now you'll see that the blue active menu now moves down to the borders then i have downloads so you can see how nice and easily this now works with your woocommerce integration and what's also nice now is that i can for example add my own title so i can head over to section and i can add a title let's go to heading and simply double click that insert change that to the post title which is the page title and that will automatically then inherit whatever name i give to the my account section so if i change that in the backend or in the admin area of wordpress it'll automatically automatically be updated on this page as well so this allows you then to style your my account page any way that you want for example maybe what i want to do is wrap this item in a div so simply click on that little menu there wrap with the div i might then give it a size and spacing maybe of 15 pixels all round and then what i might do is head over to effects and give it a box shadow and just quickly maybe do something like this and there i've created just just enhanced my menu a little bit and then once again once i'm inside the menu items i can do make some other changes so if i want to i can make the text a little bit bigger if i want that if if i so desire we can look at the menu links again we can look at the typography here maybe i want to make those a little bit bigger so quite easy to make them a little bit bigger you'll see that i can change the hoverlink so maybe when i hover the background it's going to get a slightly light red appearance so quite easy to do that and an active link maybe what i'm going to do with an active link is change that background color to let's make it to a darker red and then make that text color white so there very quickly now i've i've changed that so as you can see it's really quite easy to update and change the layout to the way that you want with minimal time involved the hover link maybe what i'm going to do is change the hover color here to white so you'll see that as i hover over the text now it turns changes to white if i'm not happy with white maybe i want black there we have the hover color to black and when i'm on a tab it changes to look like that so if i now refresh my account section i'm on the downloads page you'll see that the heading pops in and we have that section you'll see that the width is not 100 so very easy to fix we head over to that div and we change that div width to 100 save and now you'll see that very quickly and easily we've now corrected that and the content is now 100 worth so it's really that easy to set up your my account page and make it more interesting so another good reason to to use oxygen um builder woocommerce add-on on your website right but that's not um where it ends that's just setting up some basic formatting and content and of course here on this page i can add any one of these additional elements into this page if i wanted to to do that i could have to help us i could add a slider i could add a gallery i could even add a list of products maybe i have some products on sale so i can quite easily head over here add another section so basic section and then head over to woocommerce and move down here to the product list and i can add a product list straight into my my um admin page so i can even have people shopping off their my account page and to do that we would head in and say all items that are on sale so on sale to true on sale only true and then we can stipulate the the category that we would want to include in there so if we head over to my shopping page and i want to see what which categories have something on sale i can do that so if we have a look at beanie is on sale again i have a look i see that that category is accessories head back in go over to categories over to accessories apply the parameter and there we have the accessory products that are on sale listed um the user can literally come in and shop from this page and just to make that more interesting i can head over to primary and change the color of the sales badges or i can also manage my style centrally so i could then also head over to the settings and now under global styles i have a woocommerce option inside the woocommerce option i can change for example i can come in now and change my button colors for woocommerce so very easily now i can set my buttons to the red the primary maybe i'll make that the same color you'll see that these are the secondary call to action buttons i can also come in and make those red quite easily i can change the hover cover color here so let's make that maybe something like now these are globally applied so whenever i have put in products and i haven't manually gone in and overwritten those styles the default styles will be used and you can see how easy it is to do that simply from the woocommerce options here i can head over then to links perhaps and a standard link is in blue which doesn't really fit with our theme so i'm going to make that red and you'll see that the red is now applied on the hover maybe i'm going to go to black so you'll see that as i hover i can see what that's going to look like so very quickly there the text let's leave the text of that color any notifications on the site let's make that a different red so we have red the error and then the message color we're going to make it that blue and then we have some miscellaneous settings here so let's have a look at that sale badge color and we definitely want it to be red the star rating we definitely going to go for something that's maybe more yellow star rating gray those can remain the same and the border image let's make that really different let's make that purple and the box background if i wanted to i could change that box background but we're going to leave that at white so there very quickly i've changed all the styles on my website but coming back to this product list i can head over to layout now and center and then i've centered the items and very quickly i can come to the headings and i can change them to well there's no heading on this page so let's just go back to links and let's change that font size to 20 there you'll see that the links which are the titles are now changed to 20 i can head over to price i can say current price once again we want to go with red and maybe we're going to bump up that size we'll change the font weight and then the regular price where the current price the strikethrough price we're going to change that color to black because that's the color that no longer applies and anything is red is really something to look at as a call to action so there we have style that and very quickly on my account page i've now not only added the customers summary for their account but i've also just included some sale prices that some sell products that they might want to have a look at while they're looking at their account page once again i can style that page any way that i want so just to show you another good reason is that you can style your account page any way that you want you can literally change the background add images whatever you want to do on this page you could even add a message so on the my account page i could add a another section let's add a section and in that section i might add a conditional message and say if the date is after and let's make that date on and then i add another action let's make those after and then i say the date is before and let's make that 12 31 2020 and now i can add a message and after that date has passed that message will no longer be visible so in here i might add some text and say maybe check out the specials and once again we can format and center that any way that we want and it saved that and now when i go and have a look on my page you'll see that i have the details showing and of course i can include any marketing information that i want in that message we'll also remember that we changed some of some of the layout styles for our website so if we head back to the shop let's do that by way of a product you'll see that we change some of the default styles and if we scroll down now you'll see that some of those styles for example the sale items now appear in red they were blue we created a we overrode the default structure here for that particular border from the purple on this particular case we said related products must be the darker blue but if i head over now to my accessories category you will see that those default styles that we applied are now applied so you'll see the purple outline and the um the red the different add to cart the hover button this was gray it's now red and we can go in and further enhance that layout so what we're going to do now is just go and have a look and see how we can style different categories in different ways so if i wanted accessories to look very different to the rest of the website that's easy enough to do i can do that i'm going to head over now back into oxygen and we're going to see how we create different styles for different categories so back in oxygen we're going to add a new template and we'll call that shop and we'll call that archive accessories and then we'll inherit the main header and footers and now what we're going to do is we're going to head over to archive and this time we're going to select taxonomies and we're going to select accessories so as you can see as i start typing accessories it tells me product category accessories and for the post type i'm just going to make sure that it is a product and then i'm going to give that template a priority of 1 so that it overrides the default archive template when i'm in accessories with that done we publish head over to oxygen and once in oxygen oxygen loaded we're now going to create a different layout for accessories so we'll add a section and just for the purposes of this demonstration let's change the background let's give it a gradient so we head into gradient we add two colors in this case let's go for the blue and the second color that we're going to add will be the lighter blue so we have that kind of a gradient and we can give that an angle so we'll just make that at 45 so it's not that sharp and then what we're going to do is we're going to add head over to woocommerce and we're going to add the product list so there we have the product list now we said that we were going to do this for the category accessories so what we'll also do now is in the shop we're going to just change the background there because we can't see it against the blue and we'll head over to the background and the two ways of doing this we could either do it directly to that element or i can just click on that little menu and wrap that item with the div and then inside that div we'll just give that a spacing around 15 pixels and then we'll make sure that the background is white and there we have the layout for example that we're going to use for accessories then we'll save and here we have the accessories category and now when i select accessories or refresh the accessories page we should be seeing the accessories theme so let me just save that again and head back to the admin section uh the category the template of one was applied to the default layout so if i apply the two priority that will now override the default template now when we refresh the page you'll see that the blue applies so that's how easy it is to apply a different layer to different sections on the website and of course because i can format the the elements as i would with any other content format formatting we can format that even further so with oxygen loaded i can head over to the shop and for example i could go to that background and maybe i'll just give it a gradient so you can see there all kinds of things that we can do here once again and maybe when i'm in that shop section now i might want to change the layout so we'll center that and if i wanted to i could go over to the links and i could change the color then from the red maybe i'm going to make them black and i'll give them a font weight of 600 and maybe we'll change the font size to 20. so a completely different look and feel to the standard layout and what i might also want to do then is under the heading is change it to zero if i don't want that heading to be on the page or maybe change it to 50 and maybe i want to center it and maybe i want to change the font weight to something like that so when i hit save now and i head back to my website and i refresh that page you'll see that all the accessories now are styled in that way and if i go into an accessory you will see that the accessory item is displayed much the same as all the other products on the page so what i can do now is even go in and format the accessory single product page so that accessories even appear different on a single product page so to do that what we do is we head back to oxygen and i'm going to go out of the category page and then i'm going to create a new template so we'll have a look at our templates and i'm going to create a new template and we'll call that shop access or is single and we'll go singular and we'll say products and then what we're also going to do here is only apply if taxonomized in the following way type accessories we see product categories accessories and the template priority will change to 2 to override the default hit the publish button and now when we edit with oxygen we'll be able to style all the products that are in the accessories when they appear in single product to have a specific look and feel with oxygen loaded we're now going to style that single product page we'll add a section we'll then head over to our woocommerce option and we'll select the product builder we'll just leave it at the standard and what we'll do is we'll just change the background color of the section so let's make that the blue and let's give it a gradient well let's just make it a bit yeah maybe a little bit lighter and then what we'll do is we'll head over to the product builder and we'll wrap that with a div and then we'll just give that div a 15 pixel around the edges and we'll change the background color to white and there we just have a very basic product layout we'll hit save and now when we have a look at our beanie and we refresh the page you'll see that the background has changed and there we have our product so another good reason to to use the oxygen woocommerce plug-in is that you really can style each product differently you can style each category differently but it doesn't stop there because you can in fact go one step further when it comes to styling products and if we have a look at what's available in the options you'll see that if we're looking at a if we for example um was looking at if we decided to look at single products and we wanted to change the styling even further we can actually go and have a look at the we could look at accessories single and we can even go further and we've already selected products we've set accessories only if they're taxonomized in the following way under accessories but we could even go one step further and say that all all products all simple products must be styled in this way so not just the fact that it has the accessory but it must be an accessory and it must be a simple product so we'll load reload the simple product on the page and you'll see that of course that updated template still applies and what would happen now if i change that simple and i said that this should only apply to a variable product so choose variable update and now when i refresh you'll see that because this isn't a variable product that theme doesn't apply there you go we're back to the default theme if i head back back to singular and i don't choose any type of product update that would make sure that all the products within that accessory are styled the same way refresh and you'll see that the alternative style is applied so there you get an idea of just how easy it is then to style different types of product within the website if you really want to stretch your styling skills even further we can just have a look at something really different so we're in the accessory single we'll say edit with oxygen and what this also allows you to do is to style your category pages and your single product pages perhaps sometimes in a way that is not in line with a traditional product page to just keep the customer a little bit more engaged so let me just show you what you might want to do just to change that standard look and feel here we are on the single product page with the styling what i'm going to do now in my structure is i'm going to add another section i'm going to move that section to the top then i'm going to give that section a background so we'll give it a background image and let's make it this image for example and we'll make sure that it's on cover and we'll say no repeat so there we have the image at the top of the page in that section and we'll just give that section a bit of padding so that it displays more of the image and maybe what i'm going to do then is just head back to that background and maybe i'm going to fix it so we'll say that it's fixed and that means that when i scroll the image stays where it is but now my product has shifted all the way down so if i want to change that i can head over into my section of the product i'll select that div and then what i'm going to do is under margin change the margin and what i'm also going to do to that div is give it a box shadow and we'll just make that a shadow around that kind of color and we'll apply that and do the inside so there you can see that we have a nice product on top of that image in the background so that looks a little bit different and maybe we'll have a look at that on the front end and then i'll just show you what else you can do so now that i have that image on that background and i decide you know i don't want to put that image i actually want my product image to be in the background so very easily i can head over to my background advanced background and i can now say data and simply select featured image it'll be large insert and now the featured image is in the wrong place there so i've put it in the wrong place so let me just go back to the section i did want to use so head over to the background choose data and change it to the featured image and now you'll see that we have the featured image there and you'll be thinking oh that's great but i actually want the featured image to to maybe roll down a bit further because it looks odd just stopping where it is so what's nice with oxygen is that if i want to extend that image into another div on the page i can do that and what i'm going to do is just head over to the section go to advanced go to background and then i'm going to once again go to featured image and we'll say large again and i'm going to insert that and you'll see that that image is actually there but you can't see it so easily and perhaps i'm going to show you with the other image which will be a little bit better um let me show you with um i'm going to go back to the static image but the same the same principle would apply or maybe what i'm going to do is add another section in here actually and what i'm going to do is i'm going to make that 0 and then i'm going to make this section a lot big bigger and let's just make that 500 so this is really just for the demonstration so i want to have the product image in the background but now i've got three sections so what happens when i add the product now to the second section if i go back to my menu here and i go to background i'm going to go back to data i'm going to say featured image i'm going to say large and i'm going to say insert and that will insert the image into that section but what's happening now is if i head over to that div and i'm just going to change that back to zero you'll see that the same image starts in the same place so i've got the hat and then i've got the top of the hat again so to get rid of that i would go to my background and i change that to fixed and look at that the images actually match up one hundred percent so that looks like it's one image in the background however it's actually stretched over two sections what that would allow me to do for example is maybe in this section i want to fade out that at the bottom of that product so i'd head over to background and then head over to gradient i had two colors i'd make them both white so we've made that one white and we're going to make the second one white there we go what and then what i'm going to do is add a linear change and now i'm just going to do that so now you can see how the bottom the top of that image is still visible and the bottom will actually fade out to white in that section and what i can then do is if i want to match up the color so that you don't have this difference i can head over to the first image head over to background head over to gradient add two colors so we'll make them both white again and then what i'm going to do is make the top one and there you can see we have the perfect gradient from the top into the bottom and it looks as though you have one image in the background but you actually have the two so now what i can do is head back to my div and maybe what i'll do is head over to this item and change or leave that the same and then change the div on this one size and spacing and then change the margin at the top to minus 400 and you'll see now that even though it goes over two sections it looks as though it's a single background image so let's save that and then you'll see because of my screen size it's a little bit wider but essentially you get the idea that you can use a single you can use a single image in more than one section if you set the background to fix it automatically aligns itself because it's fixed to the background of the of the page size and not to the section so just a little tip there but you get the idea that you can change and style your layouts in any way that you want let's save that in this video we're going to have a look to see how you can bring in some of these elements into your the modal menu that we created in the previous video for a dynamic content so we're going to head back to admin and then what we're going to do is we're going to go into our main menu and i'm going to show you how you can include your products from woocommerce into your menu so in this case we are editing the main menu so we don't include the main in our template this is the template for the main menu we'll click on edit and then i'll show you how you can include those elements in your menu so oxygen loaded we're looking here more at the mobile menu so we'll head down to the mobile view and in a previous video we created this interactive mobile menu and this is what's contained in that menu so we'll head over to our structure these elements are in a modal so for example here we have a product maybe what we're going to do now is we're going to add a we're just going to duplicate that so we can add another div and what i'm going to do in this case now is remove those elements and i'm actually going to add a product from category so very easily select add head over to woocommerce and i can say products list and in this case we are going to look at what did i product meta now we're going to add a product list so let me just go back there to my product list and in this case we're just going to limit it to one item that we're going to pull through so we have the default query we have the layout it will say center and we're just going to say one and what we'll do in the product query is we'll head over to custom and we're going to limit that to one and the category will keep on accessories and then we're going to apply that parameter so now you'll see that in my menu there i have one product which is the beanie which has pulled through into the page so let's scroll up let's go back and let's just have a look at the layout so the layout we've said yes we will do um we'll do center line and it's just going to be one column and let's go and have a look at the heading so at the moment we'll just make sure that the font size is zero and what we can do is we can remove that image and what we'll also do then is just go to that div and give it a spacing of 15 pixels so that we've centered our shopping item in the middle and you can add to cart and we obviously don't want the pagination there so let's head back to the product list let's go to pagination and the pagination is added by default but if i was to make the font size zero then that would simply remove the pagination although it's still there and if i wanted to remove the formatting further i can do that back to pagination border radius 0 border color we'll just make that white and we'll just make current ball background also one so if you're not going to be putting in any special functions um or anything like that you can just hide the item in the styling so that's a little bit of cheating but that's just what we're going to do now to show you just how easy it is to do it that way and then we also have these the results count so once again i can change that font size to zero and then we have sorting select typography we're going to change that to 0 and then i'm going to change the border to 0 focus border to zero and typography i'm just going to change the color to white right so all right so there we've pretty much hidden all the elements pertaining to the product you can also write a function to hide those elements as well so that is another way of doing it but i'm just showing you the uh the other way of doing things and we've centered that and now we can save and when we go and look at that now on the website right click inspect and now when i look at my mobile menu you'll see that i have my that item i then have the product which i can add to quite immediately and then of course i can scroll down and view the rest of the menu so that's one way to add uh very quickly add a single product into your menu if you have something that's on sale or something you want to promote you can do it that way and what we can do in a similar way is even add a category so let's duplicate that but in this case what we're going to do is we're going to remove that and in that div i'm going to head over to woocommerce and i'm going to add a let's call it a category list so now we have a category list i don't have any images for the category so it's not going to look very good and let's just give that you'll see there there are all the categories that i have so i can do it that way but maybe in my category list i don't want the images that's not going to be possible to hide from here so we might have to have a look at a different way of listing but let's say you had images for all your categories and you wanted to list them here then we could do that let's just set the background here of white there we have our categories the image and the number of products in each save let's have it to the front end we're going to refresh and then we're going to inspect we'll head over to our menu and now you'll see you've got your product and then you would have the different categories in your website so you could make your own commerce menu and it would automatically pull the categories in with teaser image so your customers could quite easily access and if you wanted to hide that image the easiest way to do that would simply be to isolate the style sheet for that image and then just to add a style for that particular item and change the display to none and then you could have a list at one way to list the categories and preferred with the image so that is one way that you could build up your own integrate your woocommerce elements into your mobile menu if you wanted to integrate them into the the menu of your website you could do that as well perhaps up here you would create a button so let's just have a look here at the header row maybe the this button over here let's change that to activate modal so we would then add a modal element under helpers and there we have modal and inside this modal element i'm just going to add a div and i'm going to give that div spacing of 10 apply all and then inside that i'm going to head over to woocommerce and i'm going to do i could do any kind of product list so maybe i want to do a categories list because it's a quick link to the categories on the website so there we have our categories list and then what i'm going to do is i think we'll just leave it at standard and what i'm going to do then is head over to that modal which is here and i'm just going to check out the modal style so we're going to make the width let's make it 90 we'll select position we'll look at content styles i think we'll just say everything centered i think that'll look the best text color is fine and then what we're going to do is look at the trigger so the trigger will be um user clicks on an element so the user clicks on that element and this modal will open and the last thing that we're going to do on the modal once and we'll go to borders and we'll just give the border radius of five we'll save and now we'll just refresh so that we can go back to our desktop view and now when i click on the button let me take the link of the button so we're on the button let's get rid of the link to the oxygen builder and now when we refresh and we click again that's not going to work so let's just remove that let's add a button add a basic button there we go and we'll call this cat products or categories whatever you want to call it and then what we'll do is we'll head back to the modal and we'll say trigger choose select that item save and now when we go back to our website it will actually work so we'll refresh you'll see that we'll see the button and now when i click the modal loads and there i have my categories in my modal window and in the same way we could add products when i'm done i can simply click and it goes away i'm now going to add a few more elements so let's just head back then to oxygen i'm here in my model so just to make it a bit more interesting what i might want to do is i have my div i have my categories what i'm maybe going to do is just add a columns element make that two columns i'm going to move my categories into the first div and then in the second div i'm going to bring in some products so we'll add we'll head over to woocommerce we'll select a product list and here we have the product query and what i'm going to do is it will send the layout and we'll make this a two column layout and then in the query i'm going to go over to custom and i'm going to say let's just go to accessories again so we'll bring in the accessories we'll apply that parameter so now what we're going to do is actually bring in a category listing into that layout and what i'm going to do is this is really just to show you of course you can format and make it look a bit nicer so what we'll do here is under heading i'm just going to save that font size to zero let's just head over here and we've got our categories here we've got our products let's save that and now i'm going to head back to the website we'll refresh and now when somebody clicks on that product logo you'll see that i have all these elements loaded on the page i can have my categories i can have some products a nice quick link into different products in that modal let's just add a close button so closing let's just insert the close button so there we have a button at the bottom of the page maybe we'll just move that to the top so now we'll save that we'll head over to the front end we'll refresh and just by way of demonstration as soon as that page loads and i hit products we can put a close button you know there in the top right hand corner we could also include one in the bottom right hand corner but that'll just make it easy for for customers maybe to have quick access to some accessories and then to also be able to just have a look at some products right off the bat in this model if we're not happy with that layout of course we can move in here and under the layout change that maybe to three and maybe what we'll do is change the width so quite easily come in here and change that to 40 give that 60 save and now when we refresh you'll see that we just have a slightly different layout on those elements so that's that's one way to bring in your products your categories whatever you want to do into a menu element so another good reason to get the oxygen woocommerce add-on plug-in very difficult to do this if you don't have a plug-in makes it so easy to include products in so many different places on your website something else that we might want to do we might want to include some something in our footer so let's head down to the footer of the website let's close that we'll head over to the footer so here we have the footer of the website and maybe what we want to do is include something in the footer so let's let's add a section and section let's move that not a section let's just add a div sorry so let's go back to our footer and we'll add a div and then what i'm going to do is move that div up and i'm going to make the width 100 and i'm going to give it a background of white just do it like that and then inside that div i'm going to head over to woocommerce i'm going to have a look at my product list so here we have a product list and in the layout we're going to make that four and the heading i'm going to just change that to zero and then the product query we're going to say custom i'm going to head back to categories and i'm just going to go accessories again and scroll down and apply the parameters and now what i'll do is i'll head over to the layout we can change the inner column padding so what we can do is change that to 10 10 and you'll see that that actually extends beyond the white block so if you want to create something interesting you can just make that a nought and a nought but what's really going to work for us is to wrap that element in a div so very easy to do we've got our product selected here so we go into our footer we have a div already and we're just going to advance size and spacing and we give that 15 pixels all round and we just change the border to five and there we have some products listed in the footer of our website but we don't want five products we just want four so we can go over to the not the layout the query and we'll say the limit is four and we'll apply that and now we just have the four products and if we want to we can head back to pagination and once again we can just cheat a little bit and just make everything white and we can also do the same for the results count change that to zero and the default sorting we'll do the same thing so layout heading sorting select and we're just going to change the font size to zero and then when it comes to the border we're just going to change the border width to zero apply those parameters right and we'll also change the typography to well it's already on zero so don't have to worry there really about the color and now when we refresh our home page and we head down to our footer or this page not the home page and now you'll see that we have products listed in the footer of our website and very quick and easy to do um the one way we did it now was to change it in the in the back end by making everything zero or one to hide those elements and size wise to zero or borders to zero or font colors to white but of course the other way to do it would be to select those elements and in our style sheet we could quite easily so there we can see that there's an element there so we can also come into the pagination element here and just display none and of course that will also then remove it from the page just be sure to link it to a class that you create for this div so it doesn't remove pagination everywhere on the website but that's a very quick way to bring in some products into the footer of your website so very easy there we add it to the footer here we add it to a modal head back to oxygen the home page and in a similar way if you wanted to add a slider to your homepage with products in you can do that very easily so we're just going to head out there we'll head over to the home page of the website we'll see that now that we don't have oxygen open we should see the oxygen edit button we edit with oxygen this will load oxygen so we can just edit the contents of this page so with oxygen loaded we scroll down past that modal to the website and what we're going to do now is add a section and i think what i'm going to do is move that section to the top and now in that section i'm going to add a slider so go over to helpers head over to slider and there we have the slider so let's just open up that section i'm going to head over to the first slide i'm going to go add woocommerce and i'm going to go my product list and i'm going to go to product query go to custom i'm going to take the limit to 4 we'll just leave it on accessories and maybe we'll just say on sale only true let's apply those parameters and there you'll see we have the accessories in our slider and once again we we can just leave it with those four items so the limit is four we wanted to change the columns we could but let's leave it like that and in the second slide i'm going to add another product list and to just see let's just have a look at categories what other category we're going to add so inside the categories here yeah let's add music so head back over to oxygen we'll go to slide number two and i'm going to head over to products and then under product query i'll go to custom and we'll limit to four and the category will be music and apply the parameter so music only has two items but that's fine we see it doesn't fit all the way across the page so that's not a problem we go to advance we go to size and spacing and we just change that width then to 100 because there aren't enough products to force it and then we have our second category and in our last slide we can do something a little bit different maybe we can add a a different content so we could go add maybe two columns and what we'll do is we'll add an image so columns we'll add an image in the first one so image just browse i'll just grab any image and over here we'll add a title heading and we'll just do some basic formatting there make it look a bit better and now what we can do is go back to our slider head over to styling and we can say all slides to the same height stretch all slides to the same height um and uh right so we have the slider we can change where the dots are we can change the dot color so let's make them red let's put them there so they're over the item and let's just head back here and configuration yep we want to show the arrows and let's put it on autoplay and let's put it on infinite and then we save and now when we go to the front end of the website you'll see that we're pulling through into the slider two different categories of product and a general content item so that's how easy it is to pull the products into the slider anywhere on your website we also have the products here in this pop-up and if i scroll to the bottom of the page you'll see that i have products in my footer so just a few more reasons why it makes sense to get the woocommerce plugin that integrates with oxygen it just makes your life so much easier when it comes to creating and formatting product pages here we had our single product page using automatically putting the product through for anything in accessories so and you also saw on the hood on the beanie page where the the beanie image continued from one section into another section and it all looks like it was a single product so that's actually two sections but it looks like the one so if we just have a look here you'll see there's the first section there's the second section and you can't tell where that product started and ended so that's a nice way if you have a big background and you need it to be continuous as i said you can change the look and feel of your website to such an extent that your your products don't look like traditional product pages right well that wraps up uh a small introduction in and a couple of reasons why you should get the woocommerce plugin i hope you enjoyed that video thank you for watching

Channel: Bruce Young

Views: 1,608

Keywords: oxygen builder, oxygen builder woocommerce, oxygen woocommerce, wordpress oxygen builder, woocommerce, woocommerce layouts

Id: nW3Q-KXXxq0

Length: 77min 52sec (4672 seconds)

Published: Mon Sep 28 2020