How To Build Custom Single Product Layouts With Avada & WooCommerce

[Music] hi everyone today we'll be looking at how to build single product layouts with avada and woodcommerce in this video we'll take a look at how you can create fully unique woocommerce product layouts for your individual woocommerce product pages make sure you subscribe to our youtube channel to keep up with all the latest videos like this one and if you don't want to miss one click the bell icon to get notifications of all new videos on our channel okay let's begin i'm on the avada country butcher website here which takes advantage of the avada woocommerce builder to create a woocommerce product layout unlike the woocommerce cart checkout and shop pages which we can customize by editing the pages directly with single products we use avada layouts to create a product template or templates as there are likely many products on the site if i head to one of the products we can see that the product layout is quite different to the standard woocommerce layout there has been custom content added to the product and the page really displays the flexibility on offer when using the woocommerce builder to create product layouts if we go to avada layouts we can see there is a conditional layout called custom product layout that's set up to be used on all products the product content is coming from the product content layout section here i'll just go to the layout section page and edit that content layout section directly in avada live here we can see the various elements that have been used in this layout section there are some that are conditional and only appear in certain situations and there is a mix of both woo layout elements and normal design elements i'll just go to add an element and as we can see it opens in the layout elements tab this is where you can find all the layout elements including the woocommerce ones but remember these are only available when you are editing a content layout section some of the elements are quite simple and just pull information from the product like the wu short description element and others are easy to use with the defaults but have an enormous number of options like the wu add to cart element this is very useful for more complex products with variations and links into the new avada variation types avada colour avada size and nevada image for more information on woocommerce variations please see the linked document and for the elements each element has its own document listing all its options the beauty of the woocommerce builder is that you can create your own custom templates for your products using a range of both woo layout elements and normal design elements with or without dynamic content this breaks your product templates completely out of the box and allows you to display your products in virtually any way you can imagine one thing to remember though as we will see when building our layout most of these elements will want to have a dynamic component as this is after all a template and so any static elements will display the same on all products if you don't want to build your layouts from scratch we also offer a number of pre-built layouts for you to get started with if i just quickly go to a new layout section you can see the pre-built page button here and if we click that a selection of content layout sections appear as this is a content layout section there are a few for blog layouts a couple for portfolio layouts and four for product layouts i'll just select one of these product layouts say ok to the warning dialog and it loads into the builder just remember to set the dynamic content preview options these are found in the layout section options tab on the sidebar i'll just head to layout section and make sure that we're viewing the dynamic content as a product i'll also choose a specific product to use as the preview for this website all the products are using the same layout and we have a product selected here so it's all good but if you had another layout for variable products for example it's important you have the right preview here i'll just click preview and here's the prebuilt layout from here of course you could customize it as you wish but instead let's go back to the layout section builder and rebuild our content layout section from scratch it's made of three containers so i'll just delete them one by one okay so now we have a blank page let's start with our first container this one will be full width most of the defaults are fine but i'll just edit the container to make a few changes i'll just name this container product information and then head to the design tab i'll start by adding 90 pixels top and bottom padding to this container and with the column inside this container i'll just edit that as well and pop into the design tab and set 55 pixels bottom margin okay so let's add our first element this will be a title element which is of course a design element i'll use the dynamic content options in the title option to set the title and on the design tab i'll center align it change it to a h2 and set a font size with this i'm going to set 3.6 rem rem is a css unit that stands for root em so this title will be 3.6 times bigger than the default font value for more information on rem units please see the linked article you can of course also just use pixels or any other css unit here i'm also going to remove the top and bottom margins on this title on the extras tab i'll also assign an animation to this element i'll set it to fade from the top at a speed of 1 second and i'll use the default animation offset okay next is the woo price element i'll leave show sale old price for any products on sale like this one but i'll set the sale old price position to before regular i'll leave it floated but i'll turn off show stock the next three options are for my discount badge and they're just fine as they are so i'll head now to the design tab and align this element to the center and now i'll change the font size to 2.8 rem this time and finally at the very bottom i will change the margins to 0 pixels all around except at the bottom where it will be 50 pixels i'll also just head to the animation tab and set the same animation settings as i did for the title okay so now i'm going to add some static content these are the three info columns we saw on the product and they will be the same on all products i'm going to start by adding a nested column element with a 1 3 column firstly on the general tab i'm just going to give this column a css class that will apply a small snippet of css from the global options css then on the design tab i'll first add 25 pixel bottom margin and under that i'll add 25 pixel top and bottom padding i'll give the column a one pixel border all around and set the border color to this grey i'll also give it a background color by going to the background tab and adding a light gray finally on the extras tab i'll add the animation again only this time it will be fading from the left okay now for the content in this case it's just going to be an icon and some text i'll use a text block element for this and because of the way we want these to display i'm going to paste in a bit of code here that pulls a small font awesome icon which then has some text next to it the css class i added before just adds 10 pixel right margin to the icon so now i'll center it and then i'll go to the design tab set 0 pixels bottom margin and change the font size to 12 pixels okay so that's my first column i'll duplicate this one twice and now i just have to go into each text block and paste in the new code i also need to edit each column and change the animation direction to bottom for the second one and write for the third one okay so now i can close that nested column and move on the next element i want to add is the woo notices element this one is going to use nearly all the default styling the only thing i'm going to change is the top margin on the design tab i'll just make that 20 pixels okay so now i need more columns for the product details i'll just add two one-half columns under this first one here the first thing i'll add to the first column is a 1 1 nested column element and that's going to display only when a product is on sale i'll edit the nested column and on the design tab i will add 20 pixel top padding and on the background tab i'll give this a gold color now on the extras tab i'm going to add some rendering logic the first one will say that this should render if the sale status is equal to started i'll leave the connector on end and add a second one this one will say that the sale status is not equal to ended so anytime a product is on sale this column will display so now we have sorted that we need to add some content this is just going to be a text block element with some bold text i'll just center it and on the design tab make it white okay so let's close our nested column i'm going to add the woo product images element under this i might just turn zoom off for this one and on the design tab i'll set a product image's max width of 900 pixels and i'll also turn the display sales badge off awesome now the last thing i'm going to do in this column is to go back to the nested column and edit the column options and on the design tab set a bottom margin of minus 80 pixels so that the on sale now banner drops down on top of the image element beneath yeah that looks cool okay so to our next column at the top here i also want a conditional nested column so i'll quickly add a 1 1 nested column edit the column itself and on the design tab add 45 pixels bottom margin and 20 pixels top padding i'll also give it a dark gray background color and on the extras tab i'll now set some rendering logic and this one will be cart status is equal to in again i need some content so i will add a text block element and add my message i'll center it and on the design tab i'll make it white okay all done so now if the currently viewed product is already in the cart it will display this message so now i'm going to add a text element with some bolded text on the design tab i'll set the font size to 14 and the letter spacing to 2 pixels and under this i'll add a title element i'll pull the title dynamically using the dynamic content option and set the heading size to h2 and the font size to 38 pixels i'll also just add a minus 10 pixel top margin to tighten this up a bit i'll add the wu short description element next and the default options for this one are just fine at the bottom of this column i'll add the wu add to cart element this element is packed with options but luckily we don't need to customize it much for our example although i do have some products that have variations so i'm going to go into the layout section options and the layout section tab and change this product preview to be one of the products that does have variations i'll just click preview and now we can see the variations part of this element so back to the element and the variations tab and i'm going to change the option for the width of that size label here and make it only 20 percent now on the cart tab i'll change the quantity style to custom and set the quantity input dimensions to be 40 width i'll set the quantity input background color to be white and further down i'll set the add to cart button style to be custom as well this is just so i can set the button span to yes so it fills the rest of the column okay all the other styling defaults should be good so now it's time to add a new container this one will have a one one column and i'll just edit the container and i can call this one woo tabs i'll head to the background tab so i can add a background color here and i'll also head to the design tab and set some custom padding in here now for the content in this container i only need one element the woo tabs element i'll change the layout to horizontal and on the design tab i'll just set 0 pixels top margin and set the background color to white ok so now to our final container this one will contain some related products so i'll create a container with a three-quarter column edit it and call it related products i'll set the column justification to center for this so our three-quarter column sits in the middle and on the design tab set top and bottom padding of 90 pixels now for the content i want to start with the text block element and add some bold text and i'll just align this to the center down here and on the design tab i'll set the font size to 14 pixels and the letter spacing to 2 pixels under this comes a title element i'll add the title and on the design tab i'll center it set it to h2 and set the font size to 57 pixels i'll also just add a minus 10 pixel top margin to tighten this up a bit as well under this i'll add a text block element with some lorem ipsum and i'll just center that okay so now i need a final column this one will be full width and the column defaults are fine inside this i want to head to the design elements and add an instance of the new postcards element in this case we will use this to display upsells okay so once i've added my postcard element i need to choose my postcard here i'm going to choose the related products and upsells postcard for the content source i'm going to choose upsells this will pull any linked upsells set in the link products section of the individual woocommerce products as we can see here okay back to my element i'm also going to change the number of posts to three and i'm going to set pagination to no pagination on the design tab i'm going to leave it as a grid but set the number of columns to three as well to match the number of posts i selected yeah that looks good now please see the how to use postcards in avada documentation for more information on this awesome new feature linked below okay our content layout section is now complete and it's time to save all this work now let's go and look at some products on the front end this one is a variable product as we can see from the size options here but thinking of the conditional rendering logic on those nested columns we can see that this product is neither on sale nor in our cart otherwise it looks as it did in the layout if we head to the product on sale we can see the old price and the discount tag display as well as the on sale banner at the top of the image if we add this to our cart the page refreshes and we see the woo notices element at work and now the other nested column displays as well as far as woocommerce product layouts go this new method is a real game changer as you can see with the evada woocommerce builder you can now create completely unique woocommerce product layouts and have them display exactly what and where you want all using the power of avada builder and nevada layouts please see our other resources linked below on how to build custom shop cart and checkout pages with the evada woocommerce builder ok this concludes our video on how to build custom single product layouts with avada and woocommerce if you have any questions or need assistance please create a support ticket and our team will gladly assist you as always we want to thank you for choosing avada

Channel: ThemeFusion

Views: 6,847

Keywords: WordPress, ThemeFusion, Avada, WooCommerce

Id: qHKNLooCRbA

Length: 17min 13sec (1033 seconds)

Published: Thu May 13 2021