Build a WooCommerce shop layout with product variation filters, add to basket & interactive search

in this video we're going to have a look to see how to create this layout for woocommerce products in the grid layout we have the option to add or update the items and then add to basket we can also click through to read more if i click on an image it opens it up nice and big for me to have a look at it what i can also do from this view is filter so simply by selecting a color the view is updated immediately and in a similar way if i was to insert a search term the grid is also updated immediately the other thing that i'm also able to do is i'm able to print so simply by hitting the print button i can now print out the items and i can also enter a custom header and a custom footer for the document that i'm printing so i can include some company details or promotional messages and then as i update you'll see that the items here as well as the total are immediately updated so if i was to add an item you'll see that the 71 is updated and also the number of items is updated immediately and if i scroll down to the bottom i have a summary of the cart items and view cart and checkout again if i want to add something that has some variations i simply select the variations and here you can see the summary the price is displayed and i can immediately add to cart and you'll see that the cart is now updated so that's what we're going to create now the way that this would normally be displayed when you install the plugin before we make the adjustments that we do make is that you'd be looking at something with this kind of a layout so you'd have the traditional table layout in rows and these items would also be displayed something like that and there might also be some row headers so if we head over to the plugin website for ninja tables and we scroll down to their shop view you might see something like this you have the table headers and then you have these items here for sale and if we have a look at this in the mobile view you'll see that the standard mobile view at the moment it's not working so we'd have to make an adjustment in the table configuration here table design and in that table design normally what you would do then is you would head over here and you would do something like this you would enable the stackable table configuration and then if you were to refresh you'll see that the items now appear in a stackable configure well they will appear now in a stackable configuration so you'll see um but still not that user friendly on the eye so what we're going to do now is we're going to go from that kind of a view and i'm just going to disable the stackable table update those settings i'm going to head over to the custom css pop in the css save the custom css and now you'll see that when i refresh here you'll see that we have a much nicer mobile view available to us for each product and also then when i change that to the desktop view you'll see that we have the more traditional desktop view that you would see for a shop in the laptop or desktop view so to do that then um you'll also see that here we have the variations included and this is not a standard feature when you're using the tables but i'll show you how you can include that so i think what we're going to do then is i'm going to head over to the back end and i'm not going to recreate the css or explain how that's all put together and i think it might be easier if that's just made available but i'll show you then how you can create these filters pretty much on any attribute inside the product listing so what i'm going to do is i'm going to head over here to ninja tables and then i'm going to create a new table and i'm going to call this table let's just call that product 2 and immediately i've just selected default what i should do is actually select the woocommerce table and say product 2 and i'm not going to change any of the selection but i could change the selection here to select by product by category by tags i can even do select products by product type but we're just going to go with the standard product 2 and i'm going to now just say create the products table so there we have the products table created and if we want to preview that we can either just scroll down here at the bottom of the page and see what it's going to look like that will give us a mini idea or i can hit the preview button and you'll see this would be the normal preview then for the table so not a bad view if you're looking for the list view but if you want a more traditional layout for an online shop the bigger picture then what we'll do is we'll do it the other way now like i said i'm not going to go through all the css that have that's been added but basically we use a lot of flex um css terms and we do that just to change it from that table view to a more engaging from this table view to the view that you normally see for a shop so i'm just gonna refresh that and now you'll see that it's not working and the reason for that is that when you create a table it gets this unique id and what i need to do here is select that and just change that number from 346 that we have there to 349. so i'm going to select that and then just go to each element and there aren't that many and we just update that to 349. there we go as i said not too many so quicker than retyping all this information and right so we're getting to the end here just some mobile updates right so we've pretty much updated the css and now when i refresh you'll see that those changes apply now the nice thing about having that unique id is that whatever i was working on um only the table that i've specified with that idea is affected so there we have the layout and you'll see that there are one or two other things here that still need to be adjusted so we'll also have a look at adjusting those so just to make sure we didn't miss any in here 349 all the way through right then what we're going to do is we're going to head over to the table design and we don't need that header row that you see over here because now we we're not using that so what we'll do is we'll remove that from the list of options available so we'll say hide the header row and now you'll see we're getting pretty much close to what we had and what you also saw is that we have a much larger image in the table view than you see here so when i refresh here you'll see that the the headers here will be gone but you'll also see that we still have the small picture and to change the image is really just changing that image so let's go in and change that image so i'm going to head over here to the table configuration i'm going to head over to the image and under advanced setting basic settings i'm going to change it from shop thumbnail and here we're just going to go to large so i'm going to change that to large and update the other setting that we have to do here to get the image to display correctly is head over to advanced settings and change that from a maximum width of 100 pixels to a hundred percent update the page and now when we preview the table you'll see that the image is now the size that we want so that's pretty much how we arrange the items and you'll see all i've done is updated the css and with a few tweaks here and there i've been able to get the layout the same right now what we need to do now here is add in the attributes or the variations for each product so if we scroll down we'll see that there we have color and here we have size so we have color and size and we want to add that here to our search so quite easy i head over to the website and here i'm able to enter more table rows so i'm here going to go under table rows i'm going to add a new column and let's call that column color and what i'm going to do then is say what kind of field type this is and the field type that this is going to be is a product taxonomy and the product taxonomy that we're going to be looking at is color in this case it'll be the color and then i'm going to add the column and the next item that i'm going to add will be the size so i'm going to add a new column and we're going to call that size and then i'm going to head down here and we're going to go with product taxonomy again and we'll select the size and we're going to add that column so now we've added the column color and the column size now if i go and have a look at my table you'll see that there are two additional items now added we're required at the bottom of the button and we don't actually want those there so what i've done is i've created a custom css style which will then hide that and what we're going to do now is just apply that to the particular cell so here we have the color class and the size class and we've just said display none so when i go over to my table configuration and i go to the rows color and size so here under the advanced settings [Music] where we can add the class i'm now going to go color dash class and then update and then under the size we're going to do the same thing so that's just going to allow us to then hide that just going to be a simple css to hide those items so that in place now the reason why we need to add that as a column is that when it comes to the custom filters we need to select from those items one of those columns so you'll see here that i'm going to make a filter title here called color and then the placeholder will make that color as well and then you'll see here that i'm simply going to select here multi-select and i'm going to select the size so here we have dynamic data from the table column size and i am aligning multi-select so what's nice now is that it's dynamic data so if i was to change the color the checkbox would be updated and i'm going to add a new filter here and i'm going to call that one size the placeholder holder will also be size and then i'm also going to go here for dynamic table column i'm going to choose size and enable multi-select we're going to add that and we'll update the settings and now when i go back to the website and i refresh you'll see that the filter has been applied and that when i select the item the listing immediately updates and if i was to inspect that for mobile view so if that was a mobile view you'll see once again i can come in select the item click on ok and now only the large items will display so because we're in the in the preview mode you get this message on the screen now to move out of that preview mode and apply to a page it's really a case of copying the short code so i'm going to head back here to my table there's the shortcut click on it it's copy to click to the clipboard now what i'm going to do is close the preview and here on this page i'm going to edit the page and now we're going to add our new the created table to the page and it's really as simple as adding a short code we'll update in this case we'll just update that and now we'll view the page and you'll see now that we have the updated view that we just created on our page now the other thing that we can do is add the print button so at the moment there's no print option i'm going to head back here and simply head over to the buttons for csv or print and then i'm going to enable the print button i'm not going to change anything else except then to add a print screen header and a footer so this is what would appear in the document so this would be the print header and quite easily then also oh that was the footer so this is the print header and you can see you can insert images as well and here would be the print footer right so with that added update the settings head over to the website now refresh and now you'll oops and now you'll see that we have the print button click on the print button you'll see that my print header is in and so is the print footer so we can just cancel that so that's how easy it is then to adjust the layout and go from a row out to a interactive more traditional product layout for your woocommerce products so i hope you enjoyed that video and thank you for watching

Channel: Bruce Young

Views: 117

Keywords: ninja tables pro, woocommerce product filter

Id: CqUQf4vG7qs

Length: 16min 43sec (1003 seconds)

Published: Sun Dec 05 2021