Elementor WooCommerce Product Page Customization

so for ease i've broken this video into three key sections and you can find timestamps in the description to help you jump to the point you want should you need to so the first section is all about how to build your single product template in elementor pro the second is how to set up the correct conditions to display your template and then finally we have a bonus section on how you can enhance your woocommerce products with additional custom dynamic data i'll also show you how to expand your template design with your custom data so okay if you're ready let's get started so let's go to the template section and inside there we're going to choose the option for theme builder now once you're inside the theme builder you can see all the different kinds of themes you can create listed across the top all we want to do is go ahead and create our new template to do that we'll click on add new we can choose the type of template we want to create in this example we want to create a single product give our template a name and then click create template now once you choose to create your template that will open up the library inside elementor pro this is where you can choose pre-defined designs now you could use these as a starting point or you can completely ignore them we're going to ignore them so we're going to click on the x in the top right hand corner once you close down that dialog box we now have the normal elemental editor if we take a look on the left hand side you can see all of the options inside the widget panel are all to do with the single product template so things like the product title product images those kinds of things so now we can use those to build up the design that we want for our particular product page so let's use a combination of these new widgets alongside some normal options we have and a little bit of dynamic data to create something a little bit more unique so let's add in a new section we're going to use one row one column and inside there we're going to select this and we're going to hop over to the style tab to a background image and choose classic come over the image section onto the dynamic tags icon click on there and we're going to choose the option for featured image so once that's done we can now set any position attachment repeat and size options so position we're going to set this to be center center attachment we're going to leave that as default repeat is no repeats we don't want to repeat this image and we're going to set the size to be cover now you can see if we take a look at the top there's this little sliver that's showing part of our image which doesn't look particularly great so we're going to do is we're going to come back to our layout section and inside there we're going to set the height and we're going to just set this to be minimum height and then we can choose some various different options pixel values viewport height those kinds of things we're going to set this to viewport height and we're going to set this to be 50. so in other words it's going to be half of the viewport height in other words half of the height of the screen no matter what device is being used tablets mobiles desktops those kinds of things so once we've done that we're going to come down and into style again into background overlay and we're going to apply an overlay effect on this so we're going to choose classic one more time which is one of our global colors we're going to look for a nice dark color like this and then we can adjust the opacity to taste so we'll set this to something like 0.6 so now we can do is we can come back into our widgets and we can grab the name of this particular product to do that we're simply going to just choose the option for product title drop that into the header section and we're going to do is we're just going to style this so h1 is perfectly fine set our alignment to be centered hop into style set our text color to be one of our global colors and that's pretty good so we've got that all set up now let's add one more item let's add in our woocommerce breadcrumbs and we'll put that underneath our title this now says exactly where we are inside the structure of our online store so let's just add some styling to this we'll send to this i'll hop over in choose our text color and again we're going to choose use one of our global colors white is perfectly fine our link color will set to this green color so it ties in with the store color and if we want to adjust our typography and spacing those kinds of things we can do all of that one final thing let's just come back in scroll right the way down and we're going to look for the divider drop that in between set this to be something like 15 percent set it to be centered and we'll just adjust this a little bit so we'll set our color to be this kind of color remove the gap from there or set it as low as possible and what we're going to do is change the style of this to be something like dotted and we'll come back into our colors and we'll reduce the opacity on there these are all just little design decisions that you can make and customize this how you want you can adjust spacing and so on later on but this should give you a good idea of how you can integrate normal standard elemental and elementor pro features alongside these custom template features these different widgets that are available to us okay so we've now dropped in the header image we've dropped in some additional information let's go ahead and carry on building out our template let's add another new section in this time we're going to do two columns in a single row add a little bit of spacing above and below just to give us some white space come back to our widgets and what we're going to do is we're going to grab those product images again pop that into the left hand column that's going to load the image in for us and you can see we can now go ahead and customize this however we want applying things like border radius if we have multiple images we can have those listed underneath and we can style and configure those to the thumbnails option for this example though i've only got one product image associated with it so let's go back and choose some more options so we want the product title we can drop that inside there if we want to but this is kind of duplicating what we have at the top so let's just get rid of that for now let's go ahead and add some additional information in so first things first let's put the short description inside here to drop that on the right-hand side and there's our basic description hop back over we're gonna grab our product price put that above our description and again all our styling options are inside there we can stack these if we have discount prices and so on so we have full control over all of this come back over though we'll grab our product rating so if our product gets different ratings we can let our visitors see how good they are at the moment there's nothing in there if you get this gray box just basically means there's nothing associated with this particular product for example we don't have any rating at all for these hand-picked red chillies so this will just leave a placeholder in there to show you that something's inside the in the editor but you won't see anything on the front end if there are no ratings associated with it okay let's go and add one more item in and that's going to be the ability to purchase this so let's grab our add to cart option and we'll drop that underneath our ratings so that will now drop in the add to cart pick up any styling that's part of our global styling but if you want to override any of that we can do all of that through the options on the left hand side so you've got control over the button the quantity options and also variations if we have variations associated with any of our products so full control over everything we want so for example we might want to change the way the quantity option looks so let's just put a border radius on this we'll set a border radius of 8 pixels and you can see that now rounds the edges of that off we can adjust padding inside there we can drop a different border type in so we might want to put in a dotted border type and you can see that now places a dotted border around it and you can adjust colors background colors those kinds of things so full control over styling everything so let's say we're happy with the way all that looks we want to add some more information in so let's scroll underneath come back to our list of widgets and we're going to grab the option to put in our product data tab so we can drag those over and now any of the tabs we have associated things like description reviews additional information those kinds of things will all be listed inside this section and again we have full control over how this all looks so for example we might want to change the text color background border colors those kinds of things including radius and we can also adjust the panel and look of that as well so all really easy to do full control over everything inside there exactly as you'd expect including the ratings option if you have reviews enabled as part of your online store so the final thing we're going to want to go ahead and add in is any kind of upsells or any related products so again we can just come back over to our widgets and we're just going to simply come down to the product related drag and drop that underneath there and we now have the related product option inserted in and again we have full control over how this looks how it is set up so for example we might want to say that we only want to have three products and three columns we can do that and you can see that now updates we can also set the order and you can see we've got random price title those kinds of things and whether we want to set this to be ascending or descending and then finally we can hop over to the style options and we can control the spacing we can control any border radius those kinds of things alignment of text and so on so you can see if we choose the center online that now aligns everything to the center if you come back to the content section if you want to you can adjust all the options inside you based upon the type of device that you're looking at so when you're working on mobile desktop tablets those kinds of things so speaking of the responsive mode let's just switch into responsive mode and you see this now takes us into what it would look like on a mobile everything looks pretty cool let's scroll right the way down until we get to the related products and we might want to make some changes to this so let's just select it and now let's just say for the columns on mobile we only want to have a single column well there you go we've now created a single column layout let's switch over to tablet view and you see three columns inside there that works pretty well so we'll leave that as it is and everything else looks pretty good in there as well so that's how we go about actually creating the template layouts now elementor pro gives us a range of powerful tools to handle where and when our new template is going to be used let me show you how all of that works next so let's go ahead and publish this and set the conditions up to make sure this all works the way that we want let's click the publish option and this now takes us into the ability to set our publish settings let's add a condition and inside there you can see the default option for this is to include all of the products in other words this template will apply to every single single product on our entire site that's great for most use cases but you can get a lot more specific should you need to so let's expand this and you can see we now have several options we can set this to be the template that's used for products in a specific category inside a specific child product category in other words a category that sits inside another category this is a child and parent relationship you can also set this to be based upon a specific tag so if you're using tags on your store you can use this to actually apply a different template based upon specific tags and finally you have products by author so if you have multiple people adding content to your online shop you can have different layouts for each different contributor or author is called in wordpress so that's pretty straightforward we're going to leave this to be to products and that's perfectly fine if you want to add additional conditions on here you can do that so we can add a second condition and for this example you could say you want to exclude something and again those same options are inside there so combining or stacking various different conditions on top of each other will allow you to specify exactly where and when your template is used so elementor pro gives you the ability to create multiple different single templates for all of your products and then apply them on a product category childcare review options now before we go ahead and take a look at this let's remove the second condition let's just quickly go and take a look at in category for example because you'll see the options change slightly when we take one of these other more granular control options you can see this now says including category and we have all we can click on there and we can then start to type in additional categories and let it search for different categories you can see product categories and categorized but if you have multiple different categories on here you can then go and pick and choose which one or ones that you want to work with again let's remove that and let's just say we want to set this by products by author again we have that all option or we can come in and we can just search for a particular author and let that actually filter through and you can see i'm the only author on you at the moment but i could set this up so all my products use this particular template and all my products that by a different author would use a different template hope that makes sense let's just set this back now to products all and we're going to save and close so that's our condition applied to this particular template so let's take a look at our template in action so this is the normal archive for our shop let's go ahead and take a look at these diabetic cookies because they kind of look a little bit tasty so we'll click open that up and you can see this is now our custom template we've got our full width image across the top that's using the featured image for this particular product we've got the name of the product we've got the breadcrumbs to the entire product and everything else that we've set up including our description our reviews option and also our related products now this bonus section isn't required if you simply want to build your own single product template for your woocommerce products but it can help you create more comprehensive and unique product details so if you're not interested in this section well feel free to skip over it but if you fancy seeing how you can get started combining these tools stick around let's take a look so for this example we're going to go ahead and install advanced custom feel as the free version but you could just as easily use some like metabox jet engine pods any of those kinds of tools that you're familiar with so let's go ahead and find acf we'll choose to install it and once installed we'll just simply activate it let's start by creating a couple of new meta fields and associate those with our product type so to do that we're simply going to come over into the new option that we have called custom fields and we're going to add new now we can give this a name so we're going to call this additional product details we're going to say we want to set the location to be post type is equal to we want to change this from post and set this now to be product and this means now that any of the products we currently have or any products we add in the future will now have any of these new meta fields that we associate with them so pretty easy to do let's go ahead and add a couple of fields in for this example we're going to keep it simple and create three different kinds of fields first we're going to create one called manufacturer the field name will automatically fill out that's perfectly fine text we're going to change that from text and we're going to just use the option for a select option this will then allow us to create our own custom choices for this example we're going to keep it simple and we're just going to add in a couple of choices and these are going to be our manufacturers scroll on through and we're going to leave everything else as it is so we're going to close this field down and we're going to create our second field so let's add new field again we're going to call this one subheading field name prefills out and text is perfectly fine inside there so we'll close that down we're going to add our third field in this is going to be our header image field name is fine and i'm going to change the field type this time and we'll choose the option for image when we do that we then have additional options for the return format preview size and exactly where you want the image to be uploaded so you can upload this to the post or to your entire library it's up to you how you'd want to set this up for this example we're going to say upload to post we're also going to set this to be image url because we're only going to use one single image if you want to restrict the file types you can do that by popping those into the allowed file types so for this example we may only want to allow jpeg and pngs so once we've done that we've now got everything in place so we can come back up to the top and just click on save or update depending upon if you're editing or creating a new set of meta fields let's go and take a look now where these are inside the products so let's hop over to our product section into all products we'll pick the hand-picked red chilies and now if we take a look we've got all the normal fields we also have this new section called additional product details where we have the manufacturer we have the subheading and we have the header image section all the rest of the options are all still in place so that's that okay so let's test out our new section let's just change the manufacturer now and we'll say this is the plant shop the subheading we'll just give this a little bit of an information so we'll say amazing fresh so there's a little subheading and we're going to do now is add an image as you can see there's our image of our red chillies which is our product image and this is only going to show us the images that are associated with this specific product that's what we just set up inside the metafields so it means that everything is just a little easier to manage on a product basis without possibly thousands and thousands of images so let's just upload a file we're going to select our file we're going to upload that image to our media library and that's going to give us our red chilies let's just give it some alt text and then we'll choose select now that we've finished editing or creating our product we're simply going to hit update and now that's saved the next thing we need to do is go and edit the template we created in the previous sections to include our new custom data to do that we're going to head over into templates into theme builder and let's open up our single product template inside elementor to start making those changes so now we can go ahead and replace the various bits of information with our new custom information so if we take a look at the top we don't really want to have the same image at the top in our header section as well as the actual product image so let's deal with that first let's select this section hop over to the style option and inside there we're going to come over to our featured image option we're going to delete that from the image source and this time we're going to choose the option for dynamic tags once more click on that and we're going to scroll through until we find acf and we're going to choose the acf image field we'll select that and you can see we still have nothing inside there because it still doesn't really know where that image is coming from there could be multiple image fields so we need to do is click on this little spanner icon and then we can set the key and the key is basically just the name of the field the acf field in this example where the image is going to be stored so we'll select that and you can see header image is available we'll choose that option and then we have our image of our chili's our custom image you could if you wanted to also set a fallback image so if anybody doesn't upload an image to go alongside the product you have a fallback one and that's perfectly fine you can simply click on the plus and then just choose that from your media library or upload something so for this example we'll choose these grapes and we'll insert the media so now we've got a fallback image should it be needed so now we can go ahead and adjust the position attachment repeat and size if we want to so for this example let's change our attachment from default and set this to be fixed so we get a pseudo parallax effect as you can see pretty cool if you want to you can adjust the position of this we might say we want to change this from center center to maybe bottom center we'll try that looks a little bit better maybe but you can play around with this to get exactly what you want so you're happy with it so next on the list is to deal with some of the other fields that we've created we want the subheading and so on so let's do that next let's come back over to our widget on the left hand side and we're going to go ahead and we're going to add in just a normal heading so we're going to grab this drop that underneath the title and this is where we're going to use our sort of subheading section so we're going to change this to something like h4 because it's less important set to be centered and we'll quickly style this as well just so it's a little bit more in keeping so we'll set that to be white and we'll adjust the typography and we'll say maybe something like 16 pixels and we make it a little lighter okay that's pretty good so now we can go back to our content and again we're going to do the same thing we're going to click on the little dynamic tags option next to our title and from there we're going to scroll through until we find those acf fields so we scroll right the way down you can see acf field click on there and the same thing happens again it doesn't know what field to reference so we click on the little wrench icon and from there we choose the key option and this time we're going to just choose the subheading as you can see that now pulls in our subheading and if we want to open up the advanced options we may want to put things like before after or again a fallback text inside you so you can fill those values out so the final thing to do now is apply the manufacturer option so we're going to come over to the right hand column this time and we're going to drop information inside there so do the same thing again come back to our widgets this time we're going to scroll down and we're just going to choose an ordinary text editor field we'll drag that underneath the description and we're going to do the same as we've done before click on the dynamic tags option scroll through until we find the acf fields choose that click the wrench icon open up the key options and choose manufacturer and this time we're going to open up the advanced option and put in before we're going to put in manufactured and there we go manufactured by and we're going to leave that as it is you can see now that pulls in the plant shop in this example you can if you want to inside you also apply html styling so we want to make the before bold we can just simply wrap that inside the strong tags so you can get as creative as you need to inside here now once we've gone ahead and added all the various different custom fields that we wanted into our design we can simply hit update to commit those changes and then we can take a look at what this looks like so there's our chilis let's open that up and take a look at our single product template and you see there's our custom header our custom subheading and also the manufacturer information there's really simple examples but you could get as creative or as expansive as you want by using a tool like advanced custom fields alongside these templates in elementor pro and a little creativity now if you're ready to learn more about customizing woocommerce with elementor watch this video next if you found this video useful i'd love it if you give that thumbs up button a click it really does help me out if you didn't get value from the video though well feel free to slap that thumbs down button twice as that seems to work pretty well my name is paul c this is wp texan until next time take care

Channel: WPTuts

Views: 15,316

Keywords: elementor woocommerce product page, elementor woocommerce product page builder, elementor woocommerce product page template, woocommerce product page, woocommerce product page with elementor pro - how to build it yourself, elementor woocommerce, elementor woocommerce builder, custom product page elementor, elementor pro custom product page, elementor product page, elementor pro, elementor pro tutorial, elementor tutorial, elementor wordpress, woocommerce elementor pro, wptuts

Id: VwTk-uhWLbU

Length: 21min 26sec (1286 seconds)

Published: Mon Aug 09 2021