17 Visual Composer WooCommerce Elements Walkthrough



in this tutorial we're gonna look at the 17 Google commerce compatibility elements built individual composer website builder or visual composer IO this is separate from the WP bakery page builder formerly called visual composer two different products and my name is Beorn I'll pass and oup learning lab and we're getting started right now this tutorial is have a bare-bones website I've installed it locally and the only plugins I have running are the visual composer website builder and WooCommerce and I've created five products in WooCommerce I'm gonna add one more right now to show you how I did it in case you don't know but here are the blue commerce products and I've linked to a video in the description down below shows you how to set up WooCommerce and I'm gonna show you how to add a product to WooCommerce once it's set up so these six we're gonna use are these five soon-to-be six we're gonna use to show the compatibility elements that visual composer has so to add a new one it's really easy just go to products and then add new on the left hand menu here products and then add new then ways give it a title I'm copying pasting from a document I have with this stuff so get the description from over here there's our description I'm gonna paste the description down below for the short product description I'm gonna add a product image on the right and this is the image that I need right here click on set product image in the bottom right now we have our featured image here give it a price you give it a sale price as well there's a lot of options in what commerce i'ma show you had a very build a bare-bones product just to get something onto the website I'm gonna give them a tribute click on add custom attribute I'm gonna call it color and set that to red click on save attributes then I'll put it into the off-road RC category you can add a new category simply by clicking add new category these type of the name here and you add a new category but I already have this create for the other five products that I made and that is all we're doing just the title description image at a price and then click on publish and now we have a basic product that we can use to see how the visual composer compatibility elements look and how they work now we're going to head it in the visual composer plug-in and actually see these elements but before I do I'll show you how to get visual composer if you want to follow along so if you go to visual composer dot IO you can get the free version of this website builder by just clicking here in the free version enter email address downloads with free forever and then you upload to your site by going to your plugins plugins on the left hand side go to install plugins or add new then click on add new if there's an add new button up there depends on which one you click on the left anyway get to the place where you add a new plugin and then click on upload plugin find the plugin you just downloaded on your hard drive by clicking choose file and then you can install and activate the visual composer plugin now that's installed we're gonna head over to pages and then add new with visual composer to check out these compatibility elements if you like this kind of video and you get value from it make sure you click Subscribe and ring the bell icon so you don't miss any my uploads and leave a comment down below this video to let me know whether you tried the visual composer website builder yet whether you like it don't like it what you like about it what you don't like about it or if you think you'll try it after this tutorial so here we can give a title to our page I'm just gonna call this will commerce elements and you can customize the slug by clicking on it here delete what's in there and I'm just gonna call this will calm elements and then we pick our page display if you want to start with a blank page you'd pick one of these so you see here either canvas totally blank one of the content you add will be there this will have the header and footer you can create the visual composer as well as the content in the middle this one's a sidebar on the right sidebar on the left or you can use a theme defined layout we are gonna add a template so we don't pick any of these we're just gonna click on add template because everything is nicer with a template and it's gonna pick something because none of these are remote control car specific so it's gonna pick this simple landing page right here click on the plus icon and some of these templates you're gonna find in the hub which is what comes with the pro version of the plugin some of them will be included in the free version depending which version you have you'll different templates I'm using the pro version here so I'm not sure if this one is pro or not but the hub which is this little storefront icon down here this is what comes with the pro version and there's boatloads and boatloads of elements in here including the WooCommerce elements which just a second let's go back to our page so this is the template that was just imported it's quite nice and I'm going to just get rid of everything blow the header and right in here in the middle this is what I'm gonna add the blue comers elements so we can see how they work tad an element click on the plus icon here you got a search for an element or in the case of WooCommerce click the drop-down clear a blue commerce and we have some more commerce elements in here I've downloaded most of these from the hub already the one you'll see if you have not downloaded from the hub you'll see just one that's this one right here we'll commerce product to get the other ones your the storefront type in WooCommerce and here's all the WooCommerce compatibility elements he's hover over them click on the plus icon and that will then add them in my case I just opened it up so I can edit it but if you have not downloaded it yet if you click on the plus icon it will have a little spinning circle and it will download that to your plugin and then you can add those to your page and those are all the ones that you see right here these WooCommerce elements are broken up into two categories one is elements you'd add to an existing page that show products and there's other ones that you'd add to a page on their own or it can if you want to like the shopping cart the product page like the full product page of the description images and Add to Cart button the my account page things like I'm going to show you all of them by just saying there's two different categories and first we can look at the category that we use to display on a page so let's start with the one that everybody has the default one bull commerce product let's click on the plus icon so without adding any product IDs it adds the lowest-ranking Product ID automatically and if we go back into our product list here we could see all the IDS when we hover over any of these a light gray text that says ID and a number and the lowest one which in my case is 90 is the one that's Auto populated for you whatever your lowest ID is it's going to be Auto populated if you want to use a different ID for example ninety-eight go back into here type in 98 it's gonna do a little research searching your database right now it's gonna pull up what it thinks that ID is and this is correct a click on that and that will input that on the page and this element is for just one product and you can centreline it you can write a lot left align it and you can add this to different areas for example you can just drag and drop you just move this or right below book your seat that's just like any other element you can move it around the page however you want and I want to have a image with no background not like mine but depending where you put it you'll design differently but I'm just showing you could just move it around like any element you would on a website let's put it back down here and this Add to Cart widget pulls in the image the title the price and an Add to Cart button let's check out the next widget a cool feature in visual composer is then click on replace WooCommerce products you can do this with any widget on the page for example this button like to edit this button and we could just click on replace basic button and you grew a place it was something else a different widget let's click on replace WooCommerce product and we're gonna choose make sure we get them all but I want to do it in a logical order so let's choose products so we're going to go from just one product on display and I'm going to display a bunch of products down so let's click on that to add it and we're going to just replace what we have there now we have not entered any product IDs yet it just auto filled all the products we currently have on the site I don't know how many products it would load because our I only have 6 set up so maybe if you had 100 a load 100 maybe you want that maybe you don't but I definitely slowed down your page load speed if you're loading a hundred products but you can enter IDs just as we did a moment ago so this is set to 4 columns right now you can change the six so if you wanted to have 6 products like I do and then show 6 in one row just change out the 6 columns now we have all six there or you can add specific IDs as you did a minute ago if you recall you come back to your product list your IDs are listed this side the product name when you hover over the product name or below the park name sorry now with this widget because there's more than one product we can head choose a way to sort it you can choose to sort them or order them by ID title name date most recently modified randomly comment count or menu order and then once you pick one of those you can choose whether to do it a setting of descending so if you sort by title it will go through the alphabet A through Z or A through Z depending where you're from and in that direction but if you do it in descending it's gonna go Z through a do it backwards and now we can see the t's are in the front and the ELLs are in the back because I picked descending so those are the ordering options for the multi product widget so invite this product widget but I think there's not quite enough options for how to display and how to customize it visual composer has your back but I click on replace will commerce products and I'm gonna look for another one called WooCommerce products 3.2 plus right here click on the plus to add that it's gonna pull in some products even before we set IDs is like it always does but in this case you can set a limit we couldn't set a limit previously you can actually add a product ID category ID or slug you can pull in products based on attributes like that color red we said earlier when I made the product for this truck each product you have should have attributes you can pull them in based on that you can limit how many new show set the number of columns order by a title and that full list we have before plus a sitting these thing just like before but now we have visibility options for visibility you can choose products invisible on the shop and search results visible products visible on the shop only but not search results and bunch others you can read through these on your own and the where you edit those if you go to the product page itself you change the visibility right here catalog visibility click on edit you can choose which one of these that product should be visualized as or what the visual settings are and then you can display products with specific visibility right here you can choose to show on sale products this can't be used these three need to be used in two so you can't choose on sale and best-selling and top-rated he can't make those all yes he make one of these yes the others will be no so on sale best-selling top rated he picked yes for one of them and shows the best selling with these attributes you set up here either with the product IDs or with the attribute that's where it makes the most sense if you if you have just red colored remote-control cars then you choose the best selling then you have the best selling red remote-control cars are displayed so let's replace this widget with the next one which is going to be the categories or the category it's going to show all the products from a single category the WooCommerce product category not to be confused with WooCommerce product categories which shows all the categories of products on the site and category shows all the products within a single category there look at the other one soon but first this one so what commerce product category is going to show all the products in a single category that you define with the ID but it's gonna pull something in I think this one might not I'm still working so we'll see let's see if it pulled something in and if it doesn't we're gonna go find the ID for the category and point thing in so let's find the ID head back to our dashboard under products go to categories and we have our off-road our SE category here click on edit and up in the navigation bar here we see a tag ID of 16 that is our category ID and you'd also want to display or add a picture here you can add an image for the thumbnail it's going to pull in just this blank canvas image you'll see and description for the category these are all great for SEO having all these things and having a SEO or keyword optimized slug is also helpful not going to get into that here it's gonna pull the ID which is 16 and pop it in here and now it should pull in all the motor control cars all six again late as usual because those are all in one category so here we have them six across you can again change number column so you can change how many per page if we have this at four we should have some pagination options and I was always being customized McCollum's customize number of her page so right now we have six columns and twelve per page that means it will show twelve items so if we change this to four items for example it's just gonna show four and this allows you to fit all these elements allow you by changing the number per page and number columns all you to fit them into any page design really if you have the space you add another one if you don't the space you take one out and you can adjust it as you need to fit in your designs then we have the ordering by title descending and left center and right – just like we do with all the others now let's check out the categories so we'll commerce product categories and this shows all the categories of products on your site currently there's only one on this site and actually – if it kind of categorized and like I said earlier it just pulls in this blank canvas image nothing too special you definitely want to replace the image and you let inside the category editor click on upload an image and then you can have a customized image here and then on the live site these are clickable and they can go into those categories and see the products in those categories here we can show how many categories to display where you can customize which categories to display by adding IDs to find the number of columns if we set this to two those images would be a lot bigger and now we have it set up for two columns order my title and descending again I also have the option to hide empty categories and the parent option allows you if you have parent-child relationships between categories for example with remote-control cars remote-control cars could be the parent category and then trucks and then cars and then boats and then airplanes could be subcategories of that sudden you can choose to display just products from that parent category if you want so next up let's check out more ways to display products the WooCommerce product attribute it's open that this one has a lot of the similar options that we have on all of them number items per page number columns ordered by title order descending rationing and the difference is you can add an attribute value here and it will display just with that attribute then you can filter those attributes as well if you have a whole lot of attributes on your site the next element we're going to look at are kind of predefined meaning they have a specific purpose for example the WooCommerce best-selling products if we add that one it's going to show the best-selling products and all I have to do is set a number per page and the number of columns I'm going to set this back to go set that to 3 so we have 2 rows so we have our 3 these are our best-selling products they're the only products no sales have been made so they're all the number one sellers because they have not been sold so the best-selling products just shows the best selling products and then if we add featured products this will show the products that are set as featured I don't have any set as featured if we go into the products again go to all products and in our product list we have a star on the right-hand side where you can set products as featured by clicking on the star now this product is featured we also set it as featured what we saw earlier in the visibility options right above the publish button one of the options in there is setting the progress featured now we have a featured one I'm just gonna save this page and then refresh it I could have also reacted the element but this method should work too and now it displays our one featured product so next up is which one is it recent products these are the most recently created products on your site and for me it should show all six again because those only ones that have been created and they're all quite recent so it shows all six here and if you add a lot of products to your catalog this would make a lot of sense using this widget next up is using the related products right after recent there is a related products widget and the related products widget pulls in nothing at all because we're not on a product page so the related products need products that are related to something and on this home page where there are no products there aren't any products related to it so doesn't show anything so we'll come back to that one let me do the product page so let's replace this now with right to the end sale products these are products that are on sale currently not on the site or on sale so this should show nothing at all to set a product to be on sale go to any product click on edit scroll down to the blue commerce meta box down here and let's give it a sale price of $49.99 click on update what's nice thing else we'll schedule your sales with WooCommerce so you have just a Christmas sale price that you have every Christmas and you have that totally automated on a schedule now let's save let's go back out here let's see if we can just replace this widget with the same one and hopefully let's pull in the sale products now which is just that one there's a sale product on sale shows Center this shows price 99 crossed out it's now 49 it's on sale get it away you can on sale so now we're gonna look at the very last widget for adding products to any random page on your site and that is the top-rated products widget none of our products have a rating so they should all be the top rated because they're all rated at zero right now and that's not true it requires some kind of rating on a product and Maya products don't have any ratings so none show here but if your products are getting ratings it will show the top rated ones in this widget right here and now we're gonna check out the full page widgets so I'm gonna get rid of everything on this page and it's not that you have to have these on a full page but I think they just make sense on a full page you'll see what I mean it's a second so let's add the product page which is this one right here we'll commish product page let's add that in I'm not gonna add an ID so it should pull in my lowest ranking ID automatically I don't have an ID set so I'm gonna set 1 102 is an ID on the site press tab it's looking for it update and here we have the full page product widget and as you can see this makes sense on its own page it has a related widget down below that we tried to use earlier it auto or has it as part of this product page there's one I forgot to show you earlier it's an Add to Cart widget and this is really basic that's probably I forgot it's actually show a product just shows the price currently sale price for the ID of 102 for that product and Add to Cart link and that's all it is so this would not even make sense on its own you have to combine this with a some kind of product image or some kind of something you could instead of pulling in a product with the widget you create your own product showcase using other elements instead of a zero compose like an image element and a headline and text with a description and then have this Add to Cart option below that and then define the ID based on whatever it is that you're displaying so you can build your own custom widgets using something like this the next one I want to show you is the cart page but in order to make that work properly I'm going to go back to the product page I'm gonna add that back in I'm gonna save this and I'm gonna view this page this is the live page here like I said all these things work once it's live inside the editor these links and things do not work but they work out here in the live page so I'm gonna create a new page to add the cart to so I'm going to close this keep this one open and use this as the demo and go to pages add new with visual composer I'm just gonna call this cart change the slug to cart should t the end of those it's gonna use the full content click on add element go to WooCommerce find the cart element click on plus I will add the car to the page and as you'll see there is nothing to see here because the carts empty and this is why I wanted to create the other page so you actually see something here so I'm gonna save this and view this page as well view the page so our cart page is here if we click on Add to Cart on a product page or any of the product widgets anywhere there's where there's an Add to Cart button we can then come out to our cart page here and refresh it's going to have the data in our cart and here is our cart page with the information they could proceed to checkout now something that you have to do to make this work properly on your site if you just click on View to cart here it's going to take you to the cart page that WooCommerce auto created when you install it and this is what looks like it's in the 2017 theme and it looks similar but it's inside somewhere else it's not inside the page you just built to define the page you built as the location for the cart you have to go into the WooCommerce settings blue Commerce and then settings then click on advanced for cart page we have to choose when we created which we entered cart as the name but cart 2 is the one is actual slug for it but it's called just cart it's a different page because we're ready had the cart page created by WooCommerce click on Save Changes now come back out to our product page refresh the product page now click on view cart and this should take us to the one we created individual composer which did not have 27:17 header and there it is so that's how we set our cart page to whatever page we create the inside visual composer now there's two more dedicated page which we want to take a look at if we go back to the editor just get rid of the cart let's add in a search for to show you different ways to get to it my account click on plus and this shows the WooCommerce my account page and this is where your users will be able to see the dashboard which is this right here see their orders downloads addresses account details and log out of the site so again this is something that wouldn't make a whole lot of sense inside of a different page template it would most like it be a dedicated page where they can manage all their account stuff and the last one we want to look at is a very cool one especially for sites taking lots of orders it is a order tracking one the WooCommerce order tracking widget add that to the page so all you have to do is enter the ID from the confirmation email the order ID and the email used to buy it click on track and I'll show you the status of the order for example if it's a shippable product and you're making note of the stages of shipping inside of your WooCommerce for example when you've shipped it you check off shipped and maybe there's a tracking number you add that in it will display it information for the user on the tracking page which reduces your support request because if you don't have this and you make a lot of sales people might be wondering where the product is if it's a day later than they think it should be where is it they're gonna email you or call you whereas if you have this ability to have them track of themselves they can see oh it's stuck in a storm in Washington and won't be here till two days from now and then you can reduce your support tickets in that way by using this tracking feature that concludes our tutorial the 17 WooCommerce compatibility widgets inside a visual composer visual composer has a lot of other compatibility elements as well four different plugins I'm just gonna drag and drop a page over here and we can see some other plugins that it has special elements for including add to any share buttons advanced custom fields contact form 7 envira gallery essentials grid you can read the rest I'm going to read them out to you I know you can read but visual composer has special elements specifically designed to help you get more out of these plugins when you have them installed on your site so go to visual composer comm I said I Oh later which is what the address used to be now it's visual composer comm and check out the visual composer website builder so that was the 17 WooCommerce compatibility elements built individual composer website builder I hope this video helps you have any questions please leave them down below and if you haven't done so yet make sure to click Subscribe then the bell icon stay don't miss any videos and next up is clicking this video right here where I show you how to build a complete one-page website using visual composer and down here is the video that YouTube thinks you should watch and until next time I'm Buuren all paths from deep you learning lab keep crushing it I'll see in the next video

8 thoughts on “17 Visual Composer WooCommerce Elements Walkthrough

  1. Great video for Woo newbies indeed Bjorn! Thing w Woocommerce is they haven’t advanced a thing in like 5 years (I mean most of us advance and improve ourselves and skills daily but they haven’t a thing that I know of) and then charge like $200 for an add on like Subscriptions. It always has been the best looking though and still is I believe. And it is free so… just be nice if creating attributes and variations and shipping options had advanced at least over the years.

  2. Hey Sir,
    You should do a how-to on ACF (or Pods) on display in a table format. the whole loop thing is confusing me and you do a great job explaining everything (yeah I'm trying to hype you up).

  3. I'm Sherif from Quebec Canada I thank you for your useful channel. I ask you to make a simplified video how after we finish designing our website how we do all the connections between us and the customer and all the social communication and how we make sure that everything works well. I am sorry not to speak English very well

Leave a Reply

Your email address will not be published. Required fields are marked *