Kadence + WooCommerce Tutorial (Turn Starter Templates into Stores in 20 mins)

hey how's it going alex here from ideaspot and in today's tutorial you're going to learn how to add a woocommerce shop to your cadence template we're also going to be adding a cart and a checkout and in that shop we're going to learn how to customize that product page you can also add products to any page on your cadence website now you can take these skills and apply them to any of these cadence data templates so when new templates come out you can build shops with basically any of them so if this sounds interesting then keep watching you're obviously going to need the cadence theme to do this tutorial you can get it from cadencewp.com under their products and themes you just need to download that zip file just click the free download and say no thanks i just want the theme zip once you've got that downloaded go to your dashboard under appearance and themes add new and then you're just going to upload that zip file using the wordpress upload feature as you can see i already have my cadence theme installed and active if you've never set up a website with cadence before check out my previous video i'll put the link in the description that's a complete tutorial on setting up a basic website with cadence but let's get on to the plugins that we're going to use for this tutorial now we're going to be using starter templates by cadence wp search for that one install and activate that one and also we're going to be using gutenberg blocks by cadence blocks now this will automatically install when you use a starter template but you can also set this up before the tutorial anyway so either way will work so let's get on to the setup now after you've got your starter templates plugin installed under appearance you'll get an option called starter templates under cadence now at the moment there's five starter templates the only one with woocommerce automatically set up is the one called shopping it's not bad the only thing i didn't really like is it doesn't have a transparent header set up like these other ones like agency and software as a service i think these are really cool and i really thought it would be nice if i could turn these into woocommerce websites as well so i'm going to use this agency one and i'm actually going to turn this into a woocommerce website so let's select that one choose a color scheme and let's get going i think this time i'll go with the second palette there it looks really clean and bright and i'm going to click import and let's start importing it'll import the demo content that'll take a second and then when that's done we click finish for your site so by default it will show the name that we used when we installed wordpress so i just installed it as ideaspot but your name should pop up there i'm going to do a few customizations before we get too deep so let's hit customize first thing i'm going to do here is change the logo we can get there by that pencil shortcut and click change logo i'm going to upload a few files let's upload a couple of logos i made earlier and a few stock images that we might use later so let's wait for those to upload the logo themselves are nothing special i just went to logomaker.com and grabbed a logo and changed the color to suit the website you'll also want a white logo as well for your transparent header if you're using a transparent header so make a white one and a colored one but let's get back into it so i did make this white light bulb logo so we're going to use that one select that one we can skip cropping and then we can click publish the other thing we want to do is change the transparent header logo as well because this is the regular logo let's go back and click transparent header and we want a different logo for the transparent header so we're going to change that and we're going to choose that white bulb again and there we go we should get the new logo so let's hit publish it is important to realize that there are two different headers happening in cadence theme you've got a transparent header and the regular header so let's have a look at the regular header if we click a blog post i think the blog post uses the regular header so let's actually change this header a bit let's make it look a little bit more similar to what the normal transparent header looks like here so we've got this blue gradient with white text i think we'll make this header match up so let's get started on that so let's back to our main menu and let's go for header and let's go for design now we want our header background let's click that one now as i was saying i'd like it to be a gradient that matches what is on our actual blog page so i'm going to open that blog page and click customize let's find the actual colors that are used exactly here so under blog posts we've got the archive layout design and there's our gradient so i want to copy that gradient so let's grab the code for the dark blue and i'm going to pop that into notepad so i can use it later and let's grab the light blue as well do the same thing pop it in notepad or something there we go just keep those handy so we can use those later now back on our header settings let's just change those colors so they match up with the other colors that we use on the blog page there we go that looks pretty good now we've got black text i want to use white text here so let's change that for that we need to back up to header and we go to general and we want primary navigation here and design so just finding everything in cadence it does take a little bit of getting used to but once you know where everything is it's all good i'm going to do a complete tutorial on cadence headers because there is so much you can do with these headers i'm going to try and keep it as simple as i can for this tutorial though because i really want to focus on getting woocommerce set so our initial color that should be white and hover color we're going to make that a slight gray and the active color will make that a slight gray as well so i think that looks pretty chill let's hit publish we've also got the idea spot title there let's go and grab that and the site title font we want that to be the white color as well so i think we're looking pretty good now the other thing i might do real quick while we're here is the footer we've got a footer down there let's click the pencil and let's go general and i just want to remove that bit of cadence branding there let's just go copyright year and site title so idea spot 2020. that seems good let's hit publish okay one little detail the icon let's change the icon while we're here so let's go back to the logo we can change the icon from here as well down there you've got site icon and we're going to change that i want to use the blue logo we made earlier skip cropping that looks pretty good let's just click publish and now let's get on to some woocommerce so i want to put a cart icon up in that corner so let's get on to that so let's go header and here we've got available items now cart is in there because woocommerce is installed and activated so let me show you this for a second so back in our plugins you'll notice that woocommerce is installed and active i've also got the woocommerce stripe payment gateway installed and active you can use this or you can use paypal i think those are the two best ones but if you haven't set these up already check out my previous video i'll put the link in the description where i set up woocommerce and stripe gateway and paypal it's basically going through the setup wizard it's pretty easy but that link is in the description let's get on to setting up our header with the cart so back in the customizer let's drag that cart into our primary navigation we can put that anywhere we want in the header i'd like to sit it right next to the menu there so by default it is black and it's got a little item counter there let's go ahead and click that pencil and see what we can do with it we can have a bag or a card i like the cart you can turn that item indicator on or off with that little button there i actually like to turn it off and the cart can be a traditional link to the cart or you can actually have a pop-out car here so if you click the car it'll pop out um i'm kind of an old-school guy i like to have just a normal link i think simple to use if you want to have a text label next to your cart you can type one in but looks better just as an icon i think everyone knows what that means let's go to the design we want the cart colors and cart background to be what we want so let's go with white and the initial color should be white and the next color the hover color can be that light gray and the cart background we would want these cart backgrounds just to be transparent so i'm just going to drag the transparency right across and make sure that's transparent so when we hover we just get a little bit of a gray and let's go ahead and click publish now what's the other thing we need in our header we want a link to the shop page so let's head back to the actual menu we've got menus there let's go to the agency menu now that might be a different name depending on which starter template you're using but whichever the main menu is let's click that one let's add items and let's find the shop page and add that there now woocommerce after you've done the setup it'll automatically give you a shop page so that's should be there go ahead and add that one let's click publish and you can actually drag that to wherever you want that to appear i'm pretty happy with it appearing right there next to the cart i think that's pretty intuitive and let's click the shop and see how it's looking at the moment so by default it's a bit gray not much happening here i have set up a couple test products you'll need to set up a couple test products for your shop page to work properly let's go and have a look at that in some more detail so in our dashboard under woocommerce products i do have a couple basic products i've set up let's edit those let's add some featured images but you will need at least one or two products to get this tutorial going so just fill it in and go ahead and let's set an image let's grab this one and let's click update and for this one the blogging course let's set a product image like that one there we go and click update so now back on our customizer let's reload we should at least get a couple of the featured images there we are so that looks okay let's figure out what to do with this title so let's go to uh woocommerce and we're going to look at the product catalog and the design of that product catalog so the title color we want that to be white i'd like the archive title background to match that gradient that we had before so let's plug those codes for those two colors that we took from the blog page earlier we'll just plug those in there we go and that one there we go now that is looking a lot better now let's look at tweaking this layout a little bit so let's head back to general we can go through and change a few things here so i like to use the standard container they've got a few different containers you can have different layouts here this one looks better for this setup obviously let's scroll down here now the actual archive layout is important you can have a more narrow layer i think that is pretty cool standard one is pretty cool i think the important thing to do is change this number of columns so this is down here products per row we can bump that down to two given that we've only got the two products and how many rows per page we can have four i think four will be decent let's scroll back up and let's look at the narrow layout now so i think that is pretty good the other thing we can tweak are these guys at the top so let's scroll down you can show archive results count you can turn that off if you don't want to say how many results there were and we've got these things here so we've got the drop down you can turn that on or off and the grid list toggle you can turn those off so i actually kind of like the drop down because there's a few useful features there popularity price load or high a lot of people use this so i think that's pretty handy the toggle you can choose for yourself i might just turn it off it looks a bit cleaner with that off and let's go ahead and publish now from here the next thing we might look at is the actual product layout so let's click a product this is what they look like by default let's go back up to the top here and let's choose single product layout now this allows us to customize this layout so we can see above the layout we've got breadcrumbs we can turn breadcrumbs off i think it looks better with them off the actual layout we've got a few different layouts we can change that to narrow or the default we can have sidebars etc the content style we can have a box style with a grayish box around the edge or the default style i think the box is kind of good the next choice is for some vertical padding you can enable or disable that i think with enabled it's a little bit nice having that white space and what else have we got here you can turn lots of different product elements on or off the one thing i like to turn off is that product meta let's see it said category down there i think it looks a bit nicer with that bit turned off but otherwise that looks pretty good next thing we've got is we've got related products down the bottom there we can turn that on or off and if it's on we can choose two three or four columns for related products so i might just turn that off for this demo just keep it nice and simple so i think this is a good simple product page one thing i will say is that not everyone likes that automatic zoom feature on the image i'll show you how to turn that off let's go back to custom css now i have to make some custom css to actually stop that so it's just basically woocommerce div productive image woocommerce product gallery wrapper pointer events none so i'll share that in the description so you can put it in your custom css but that will stop the mouse automatically zooming in you can still click that and zoom in manually but i think that's a little bit better in terms of what i like to do but up to you if you want to do that or not i'm just going to go ahead and click publish so our shop and our product pages are looking pretty decent one thing i will show you is by default you've got this little bouncing button cart thing here you can change that to something a little bit more traditional if you want to do that let's go back to customizer and again we've got woocommerce product catalog we want to scroll right down to the bottom there we've got the button action style so by default we've got a slide up we can have always visible that's got the add to cart sitting there we can have text with an arrow or a button so if you want something a little bit more traditional a button that hovers like that i think this is pretty decent so let's go with that but the default one looked pretty good too so up to you which one you want so now we're in our shop let's try adding one to the cart let's head to the cart by default the cart doesn't look too good we've got a transparent header with no background behind it it looks a bit messy let's click uh edit the page now the things i like to do to clean this up i like to disable the transparent header and add some vertical padding click enable on that one and i like to disable the footer on there actually as well that makes it look really clean and tidy if someone's in your cart you don't want any distractions so let's go back to our cart let's reload that and this is what we've got now so we've got our header we've got our cart summary and we can proceed to the checkout so that's looking pretty good again the checkout has exactly the same issue so let's edit that page and again we want to disable the transparent header we want to enable the vertical padding and let's disable the footer again and let's click update and we can view that page and there we go that looks totally fine so we're pretty much there so now woocommerce is pretty much fully functional we've got our shop our cart our checkout that's all going the product pages look pretty good what we can do is add products to any page i'll show you how to do that with the woocommerce blocks let's go back to our main page let's say we want to add a couple featured products there we can click edit page and now that we're editing this page we can add products to this page so let's go ahead and decide where we want to do this let's say under this one so insert after we can click add the block let's browse all the blocks the block we want to start with is a row layer and let's just do a single column in this row and then we want to add our product block inside the row there so we want to search for the woocommerce blocks so you can actually go type woo in there we've got uh we can use feature categories hand-picked products featured products i like using hand-picked products so like if you search for hand-picked products this looks really quite good we can choose exactly the products we want to display on the main page i'm going to choose those two we can click done and there we go so we actually have our products in there and they're located inside of a column we want to change the layout of this product layout a little bit first so in our block settings if you don't see block settings make sure that gear icon there is selected we can change the number of columns let's drop that back to two and the pictures are a little bit too big for this layout so let's adjust some margins here make it look a little better so from here i'm going to go down and click the actual row layout and i'm going to add some margin to the row layout so this is why i chose row layout because there are a few different styling options that you don't get on the actual product block so by combining blocks you get a few more ways of laying things out so we can add padding and margin here i'm going to add a percentage of margin we can add it to the top bottom left and right i'm not going to do it on the top or the bottom but i am going to do it on the left and right so i might try 10 to start with so i think that looks better maybe even maybe even 20 20 is a bit too much 15. 15 is pretty cool i think that looks okay so let's keep update i think it might just need a little bit more white space at the top maybe i'm just being picky but i think that's good let's click update let's go back to our main page and have a look how that looks now so i think we're pretty good you get the idea you can add products to any page using that method and we've also got our shop page set up as well so you're pretty much good to go you've got a complete woocommerce setup now using a startup template that wasn't quite designed for woocommerce in the first place so there is one more little tweak i might go through it is a very minor issue it's the 404 and the search page so if we went to idea class slash blah blah blah and we hit the 404 we can see that the actual transparent header doesn't show up very clearly because it's white on white let's go ahead and fix that and it's the same thing with the search so let's go ahead and sort that out so back on our customizer let's go to header transparent header and we want to disable the transparent header on 404 search and archive pages and we'll publish let's go to look at our search results again let's reload those search results there we go we've got a working header on there now we do have a couple archive pages archive pages are our blog and our shop page so we can see that the header isn't the transparent header anymore we can actually enable the transparent header manually on those two pages so let's go ahead and click edit page on the blog page all we have to do here is go to our page settings and we want to enable the transparent header click update we can view our page there we go in terms of the shop page we have to get there through our dashboard and let's go to our pages and we should find our shop page there we can click edit same deal go to the page settings and we want to enable the transparent header click update we can view that one so that's looking pretty good now there is one little bug i noticed even though the actual search page works fine if we go to the 404 page for some reason that still doesn't work we can work around this just by putting a bit of color behind that header i'll show you how to do that let's go to customize what we want to do is just add some additional css to put some color behind that header so in our css i've just made up a bit of css to put the global palette 1 behind our header now if you want to get real fancy i'll show you how to put the gradient in there by css but for this mess method all we do is refer to global palette 1 position relative to make sure that everything slides down but if we want to do the fancy way let's paste that in here i've got the gradient in there you actually have to plug in the angle the rgb values and put that all in css now i'll share how to do that in my description as well totally up to you the single color works fine i don't think many people go to the 404 page anyway so if you're that fussy about your page you can go ahead and do this but totally up to you so we're pretty much done i'll show you a couple more tricks if you're really really fussy i noticed that with these thumbnails they are a little bit scaled and they've lost a little bit of quality and these titles and prices i might like them if they are lined up to the center so i might show you how to do that real quick so let's go customize again let's head back to our additional css let's scroll down and have a look here i've made some css to center those up so it's basically just the block grid product title move that to the center and the block grid product plus price move that to the center so i'll share that in the description as well i'll go ahead and click publish in terms of these thumbnails let's just head over to i think it's woocommerce and we've got product images the thumbnail width is only 300 at the moment we can bump that up to a bigger size depending on what size you're exactly using in my case it's 414 i'm going to hit publish there so now when i look at the actual page and reload it the quality of the image is just that little bit sharper so attention to detail guys so like i said earlier if you want some more tips on actually getting woocommerce set up and working with credit cards and paypal check out my earlier video there i also have another cadence tutorial if you want more details on building pages with cadence blocks so check out that previous tutorial as well but thanks for watching i'll see you next time

Channel: IdeaSpot

Views: 11,175

Keywords: best free wordpress themes, kadence theme review, kadence theme woocommerce, kadence woocommerce theme, kadence cart, kadence checkout, kadence shop page, Woocommerce, best ecommerce theme wordpress, Kadence Theme, woocommerce free theme, FREE WooCommerce Theme 2020, kadence woocommerce blocks, kadence blocks gutenbergkad, kadence woocommerce, kadence wp tutorial, starter templates by kadence, Kadence blocks, customize kadence header, customize kadence footer

Id: zOq00atRoHk

Length: 22min 24sec (1344 seconds)

Published: Tue Sep 08 2020