Kadence Pro Tutorial: Customize Woocommerce Single Product Page with Gutenberg Editor

today i'm going to show you how to create and customize a woocommerce single product page using gutenberg blocks without adding any extra codes or plugins now i'm pretty sure some of you might have seen adam and john from wpcrafter as well as paul from wp2 showing you how to activate the gutenberg editor in the woocommerce product page and it requires you to add a set of codes to your team and they are great it works perfectly if you want to check them out feel free to watch those videos after this i've left the links in the description for me personally i don't like to add codes because i have content over woocommerce updating their source codes and activating gutenberg by default which i think is coming soon and if that happens i'm worried it might cause some conflict so my preference is just to work with what we have and you'll be surprised that what i'll be sharing with you in this video will work with just about any wordpress teams that provides the hook elements functionality i know generatepress has this i know doxy has this as well but in this example i'll be using the cadence pro team so let's check out the single product page we're gonna build today now i imagine myself selling knives and this is the default boring woocommerce single product page and it doesn't have any styling and stuff and i managed to turn this product page into this cool looking page we have a black background image that sticks to the background as we scroll all the fonts and borders are made to white to create the contrast we have this accordion right after the add to cut this is done with gutenberg blocks and if you scroll down these are start with gutenberg blocks as well and finally at the bottom we have the reviews from the default woocommerce content and i'm going to show you how i created this page step by step from scratch without missing any steps even the steps where i'm adding product information and images so if you're new to woocommerce and gutenberg blogs this is going to be perfect for you i've added a link in the description for you to download all the images used in this tutorial if you want to follow along the only thing you need is the theme that provides the hook elements function if you want to get the pro versions of any of these themes i've mentioned you can check out the links in the description for the latest discounts anyway let's get started with the tutorial hey this is jack and this is your first time on my channel i share a lot of online business and wordpress gutenberg tutorials and my main focus is to help you get a 90 plus rating on google php inside so if my content aligns with your needs do subscribe to the channel and hit the bell notification and this is the first video of the woocommerce series so there will be a lot more woocommerce content to come we'll be discovering how to customize the checkout page the account page and everything you need to know about building an e-commerce store with woocommerce so do subscribe to the channel and before we begin i hope you can smash that thumbs up button for the youtube algorithm so that someone else who needs this information will get it and if you have done so thank you so without further ado if you're following along buckle up have a blank website with you grab some coffee and let's do this [Music] so now we are on the wordpress dashboard and the way i like to design my websites with gutenberg is with a split screen on the left is what i will do on the wordpress backend and on the right is the live view of the webpage i am designing and as you can see this is a default wordpress installer with nothing else added to it so the first thing we will do is to install team and the required plugins so on the wordpress dashboard let's go to appearance and themes let's click on add new and let's search for cadence and this is the theme you want to install so let's install this and activate next for housekeeping i will remove all these wordpress themes that are installed by default so i'll click on team details and click on delete here i'll do the same for the rest of the teams and now the only theme that is installed is the cadence wp theme next we'll install all the required plugins so let's go to plugins and add new so the first plugin we need to install is the cadence pro plugin and if you haven't gotten the cadence pro theme yet you can use this link with this code to get a 10 discount and once you have subscribed to the pro version of the team you'll see a page like this so you need to go to product downloads and you need to download this cadence pro plugin click on download and once this plugin is downloaded to your computer let's go back to the wordpress dashboard and then you want to click on upload plugin click on browse and you want to double click the cadence pro plugin and then let's install now let's activate the plugin and now we have to activate the team let's click here and in your cadence account you can go to the product api keys and you want to copy this and you want to go back to your wordpress dashboard and put in the key here together with the email you have purchased your license with and activate and once this is done let's scroll down you want to toggle this the hook elements the woocommerce add-ons and that's basically what we'll need next let's install the second plugin let's go to plugins and add new on the search bar let's search for cadence and we need the cadence blocks which is this let's install now and activate now once done we have to install one last plugin which is the woocommerce plugin so let's go to plugins and add new let's search for woocommerce and let's install woocommerce here and activate let us quickly get woocommerce setup let's continue so depending on what business you are in you can select accordingly but for this case we will select food and drink and home furniture and garden because our intention is to sell knife with this website and let's continue we don't need any of these plugins we just need the physical products checked and let's continue over here i'll put maybe 1-10 and whatever you put here it doesn't matter woocommerce is just trying to collect data from its users so i'll select no and then we don't need all this and let's continue and we'll be using the cadence team so we'll continue with my active theme we don't need the pack so no thanks and we're basically done with the first step now let's add the products [Music] now i won't be using any templates so i will show you how to create a product from scratch so let's go to products and add new and for the product name i'll put it as carve knife and then let's scroll down for the product data since we're selling one product with two variations let's click on the drop down and select variable product now if it's your own business and you need to do stock take you can check this box so that whenever your customer clicks on the add to cut button the number of stocks left will be displayed so we will not change the stock quantity here because we have product variation and then for the allow back orders we do not allow it so what this means is that once your stock quantity turns zero this product will be sold out and it will not accept any new orders if you allow this your customers can still purchase the product even when the stock quantity is zero which is not recommended for the shipping details we would not touch this as well because it's a variable product and all product details will be entered in the variations so the next thing we need to do is to add attributes and these attributes were used for variations so in this example i'm selling a knife with a black handle and a brown handle and the attributes will be the handle color so i need to create that and what i would recommend is not to create an attribute here instead go to products and over here there's this attributes here click on this before that let's stay on page and let's publish this first and next let's go to attributes let's give this attribute a name so let's say select handle color and let's add attributes and next you want to configure terms so let's click on this you want to add blank because you have a black handle knife let's add this and then next you want to create one for brown as well so we are done with this let's go back to the product under all products let's edit this let's scroll down let's go to attributes and over here because you have created the attribute this will show so let's select this and add and over at the values if you don't see all these drop downs you need to amend them over at the attributes here i've just shown you how to do it so let's select black and then a brown here and we want to check this off and we need to use this attribute for variations so let's save attributes and we're done next let's add variations so over here we want to add variation let's select go and because you have set your attributes we want to select one for brown let's save changes and then next we want to add another variation and let's select brown so let's expand this by clicking on this white area now let's add an image for this variation let's upload files select files and i'll select this and i'll change the name for this and i'll copy this and put it at the alt text as well just to give some seo juice to it and let's set variation image next i want to set the price let's say the price for this is 45.99 and i'll put this in stock and you can basically add the weight and stuff here these are important for you if you're printing labels for your shipment but if you don't need to i would recommend that you leave this blank and i'll explain to you why in a while and we are done with the brown let's close this up let's go to the black let's add an image upload files select files and we want to select the black handle knife let's give this a name copy this alt text and set variation image and for this let's say that the price for the black handle is a little more expensive let's say that it is 49.99 i'm not having a sale for now so i'll just save changes and now let me set a product image let's go over here let's set product image and let's say by default i want this to show that's the first image the customers see on the product page so let's set this as the product image and then let's add another image to the image gallery let's select this and add to gallery and we are basically done let's update this and let's copy this link and let's go over here and see how the default product page look like so this is how it looks like you can choose either the black handle or the brown handle currently it is out of stock let's fix this let's go to the variation let's open this up let's check this manage stock let's put this as maybe 50. let's close this up and let's go to the black manage stock let's say this is 30 and let's update and refresh so we can see the brown we have 50 in stock and for the black we have 30 in stock so this is how the default single product page look like let's start customizing this we'll start with the header so let's go back to the wordpress dashboard so over at appearance we want to select customize now the first thing we want to do is to set the global colors of the website so let's go to general and let's select colors so this is the global color palette we want to set the first accent color to this color for accent number two we'll set as this beige color and because for this website the background color is going to be a dark color so all our fonts and everything would need to be a lighter color so this strongest text we want to put it as white for the strong text i want to put it as white as well for the medium text which is the color for almost all the text you want to put it as white as well and for this as well we want to put it as something light and over here we need to turn this into a dark color so let's say it's this color for this as well we'll put this color as well and for the white and off-whites we'll put it as total black or maybe this will look nicer because it blends with the background as you can see over here so as you can see here this link color doesn't work this is basically the xn1 and xn2 colors so we need to switch the colors over here so over here let's copy this let's put it somewhere else and then let's click on accent number two let's copy this let's go to action number one and paste it here and then over at x and two we want to paste the previous color so that when somebody hover over to a link this is how it will look so we are done with the color palette let's publish this and let's see how our page look like right now as you can see it kind of looks better now let's edit the header so let's go back back again let's click on header now let's go to the design and for the header background we want to select this so that it follows the global background if you can see here this globe basically represents that this color here will follow the color palette you've just set so if we go back to the color palette and we change this color over here the color of the header background will change as well so let's go to general and over at the logo we want to add a logo let's upload the logo and let's upload this and don't forget to download these images if you haven't done so i've left the link in the description so that you can follow along easily so let's change the title let's put in the alt text as well and let's select this let's skip cropping and we're basically done let's put this as maybe an 80 pixels of width i think it's too small so maybe 150 i think maybe 100 is better i think this is fine let's select only logo we don't want the my wordpress to show which is the site title here so let's change the site title as well as the tag line because this is important if you don't change this this tag line will be shown here so for example this is kaff knife my wordpress that is basically showing the previous site title but if you're on the home page it will show your site title as well as your tagline just as what you see here so we gotta change the text line as well and let's publish this let's refresh this home page and there's a spelling mistake here and you can see the site title and tagline this will make the website more professional instead of my wordpress and just another wordpress site so now we want to shift the logo to the meter so let's click and drag this logo over to the middle currently this is the mobile view and that's why you don't see this logo shift to the middle so if we expand this you can see that this is shifted so if you want to change the tablet and mobile logo location as well let's click on this and let's drag this logo to the middle and we are done let's go back let's go to the desktop now for the primary navigation we want to shift it to the left so over here the primary navigation we want to click and drag it to the left and if we want to change the menu items let's click on this gear and over here let's select menu let's create a new menu let's select the mobile as well let's give this a name let's click on next let's add items let's add home let's add an about us as well but since we haven't created about me page let's just add a custom link and for the url we'll put a hashtag and when we have created an about me page we can replace this hashtag with the about us link so for the link text let's put about let's add to menu let's add a technology as well put a hashtag and let's put reviews hashtag and we're done let's go back back again let's go to header now we want to put an account and the card icon here so over on the left let's search for card over here let's click and drag this out and you'll see the card here and then we want to drag the account as well right beside the card and if we want to change the icon for this tool let's click on this settings for the card let's select this and you can either do a pop-out card or a drop-down card let me show you how the pop-up card works so let's publish this let's go to the main page let's refresh so a pop-up card will look like this where all the items in the card will be listed here and if we select the drop down card and let's publish this let's refresh as you hover all the items in the card will be displayed here so this drop down card will give you an amazon view so we'll be using that now we are done with the desktop but we are not done with the mobile so over at the mobile for the trigger which is this three lines here so let's click and drag it over to the left and you'll see it here and then let's go back to the header let's click on cart and drag it to the right and we want to drag the account right beside the card as well so let's click on the settings let's change this to the trolley and we'll put it as the pop-out card and we forgot to change the account so in case you don't like this you can change it to either this or this it's really up to you and you can even put a username as well you can play around with all this but for me i'll just put the icon because it just makes this cleaner and we need to amend the desktop version as well over at the account let's click on this settings and let's change it to this and let's publish now the next thing i want to do is to make this hater a transparent header so let's hit back and to show you why i'm doing that let me add a background in a single product page so let's go back all the way and then let's go to woocommerce and single product layout over at the design for the content background let's select an image select image upload files and we want to select this background let's choose image let's publish and let's go to the product page let's refresh and you can see looking like this it's not exactly what i want so we'll change it to fix instead of scroll let's publish this and let's see how it looks so as you can see the background image will stay still as you scroll and that's what i want and the reason i said i want to make the header transparent is because of this reason personally i feel it looks better with a transparent background so let's go back all the way to the header let's scroll down all the way you see here the transparent header we want to enable transparent header we want to untoggle this so that the transparent header will take shape in the product page let's publish this and refresh and you'll see it looking like this so now we are basically done with the haters section let's start customizing the single product page from the team customizer [Music] so now let's rely on the live preview from the theme customizer we'll need to go to the single product page so let's go back all the way to the front and then let's go to woocommerce so instead of selecting this single product layout let's select this product catalog first so that it will go to the shop page and let's select this product and we have come to the single product page let's go back and let's select single product layout the other method to come to this page is basically to go to your live page and then just click on this customize and you'll basically land here so now i don't want this breadcrumbs to show and i need to give this a little more space between the logo and the content of the page so i will select extra title area and you'll see something like this so no worries about this let's go to design let's go to this product above area background let's click on this and we want to click on this and toggle it all the way to the back so that it becomes transparent the other alternative you see this letter a here let's change this one to zero and it will become transparent as you can see here and for the product above title font we want to change this to transparent as well as well as the category font we want to change this to transparent as well and you can see that the text is gone now and we have some space here but this space is a little too wide let's go back to general and over here the above container minimum height we want to reduce it to maybe 50 and this looks perfect now let's scroll down as you can see here the above elements basically the category text is still around we want to toggle this off so you won't see any text here even when you highlight it and let's scroll down further we want to make this add to cut button bigger so over here the add to cut let's put this as medium large and this looks much nicer now i want to add a notice here because i want to inform people that the wooden handle will look different from the image as we use natural wood so over at the extras let's expand this let's toggle the visibility on and as you can see over here free shipping on orders over 50 that's the default wording so i want to change that and then i like the rest of the conditions here so let's scroll down you can basically change the icon here as you can see but i'll leave it as that and for the payments we want to toggle this on as well and i want to toggle this this cover off and i'm liking how it looks right now but i want to remove this sku and category so let's scroll down further the product mentor i want to toggle this off so this will be gone so now the next thing is let's scroll down a little we want to toggle this off the show related products because we're only selling one product here unless you want to do upsells or cross sales otherwise i will toggle this off and i don't want to show the weight and dimensions of the product in the additional information tab and we are basically done here i want to add a sticky add to cut button at the bottom so let's publish this and we are done with this segment the next thing we want to do is to add some accordions right after the add to cart button [Music] so now let's close off this theme customizer and go to the wordpress dashboard now the way i'm going to add an accordion which is a good milk blog is not through the product page here as you can see there is no way that i can update the product description using gutenberg unless i add some codes to the team customizer so my method of customizing the single product page is through hooked elements so i will go to appearance and as you can see here under cadence we have this elements here and if you don't see these elements here let's go to cadence and let's scroll down this hooked elements we need to toggle this on so that we will see the elements here let's click on elements and let's add new so there are three types of elements here we'll be using the default so this will go to the default wordpress editor where we can use gutenberg blocks and if we select fix this is basically an option where we want to fix something on the page like for example if someone scrolls through your page up to a certain length you want to display a fixed element on your page you will select this fixed here and for the code option you're basically editing everything with html and css so since we'll be using gutenberg let's select defaults now let's give this element a name let's say this is calf knife accordion it doesn't matter what you put here because this will not be shown anywhere on the site this is just for your reference in case you're using hook elements on a lot of other pages and then the next thing you want to do is to go over here and click on this element settings for the placement let's expand this as you can see there are a lot of options you can choose you can basically hook an element to any of these places and for our purpose we want to select this after add to cart form and the next thing we need to do is very important which is this display settings because if you don't select the display settings this element we are going to create here would not be shown on any pages of your website so let's select a place to show we can either select entire sites which is not what we want we want to select single products so that it will show on a single product page and in case you have a lot of products you don't want to show it on all the products you want to specify the specific product to show on so let's select this and let's select individually select items and as you can see this is the product we want to show this accordion on let's select and we are done let's test this out let me put some text here and publish and over on the product page let's refresh and you can see the text is over here so whatever that you add on this element will be displayed here so over on the elements let's remove this tags and let's add a block let's search for accordion and here we go i will select this style let me add all the text first and in the accordion i have three questions so i will add an accordion item and these are the three questions i think my customer will ask so i want to answer them here so let me add an icon list let's add a block and let's search for icon we can see this icon list here let's select this let's hit enter and then let's copy this over on the next question let me add some text first let's right click and paste it here and let's change the text and let's do the same for the third question let's hit enter right click and paste and let's amend all the details here and we are done we need to style this so if you look down at the bottom left you can basically see the layers of the element let's select the according layer and over at the top right click on this settings and here are the styling elements so now let me close this off a little so that we can see the effects for the paint title color settings which is this on normal we want the title color to be white so i will select this the title background i will turn this to transparent and for the title bottle color i want to turn this white as well and you can't see any border yet because over here the paint title border for this paint title bottle width we want to put this as 1 and you will see the border here next let's go to the hover for the hover color i still want it to be white for the hover background i want it to be this color so that as i hover over you see it becomes this color maybe i should change this over text to be black so that as i hover you can see that the text is black over here next for the hover border let's put this as white as well and let's go to active which means when one of the pane is selected so for example this as you can see this is basically selected so for the active title color i want it to be white for the active background i want it to be transparent and the active border color i want it to be white as well so let's update this and let's refresh and as you can see this is looking quite decent already but now the thing is as you refresh this you can see that by default the first pane is selected and that's not what we want let's scroll up let's toggle this on so that when a page refresh or when the page loads all the panes will be collapsed so let's update this and refresh and you can see all the panes closed so let's select this this is looking quite decent and i like this and if we look at it in the desktop view this is looking quite decent and we're basically done the next thing we're gonna do is to insert a hook element over here so that we can have a section like this start with gutenberg blocks so let's go [Music] so now let's go back to the wordpress dashboard so let's click on this wordpress logo that will bring us to the dashboard and now over at the elements we want to add new if you're not on this page it's basically appearance and then under cadence we have these elements here and we'll come to this page and let's add new we want to select default we want to give this element a title and then let's click on this element settings for the placement we want to scroll down all the way to woocommerce product and let's scroll down further until we see the single product tabs let's select this so basically what it means is that this is the single product page tab so we want to insert the hook elements here and for the priority i'll put it as 9 because i want the hook elements to display before the tabs and let's go to the display settings and let's do the same thing let's hone into the single product and then i want to select individually select items this is the product we want to display these elements on and let's publish this sorry let's test this first so that we know we are placing the elements at the right place let's refresh so we'll work with this first and see what's the outcome so if we go to the mobile view we're at the right place so maybe when we add the elements in the desktop items will fall back to place so let's remove this block and let's first add a row layout let's search for row and this will pop out let's select a one column row and then we want to click on this change alignment we want it to be full width and then the next thing is we want to click on this settings we want to make sure the block is selected so that we can change the settings of the block let's first go to the dividers and let's select bottom and i'll explain to you what we are doing here so let's select the divider let's say that i want to select this and as you can see once i've selected that there's this curve that appears here so let's give this divider a color so let's say it is this color and if i update this and refresh you can see that we are creating a separator here and let's expand it out and as you can see the desktop version is working so cool next let us add another row layout let's select this one column row layout and let's do the same thing change alignment full width and for the background settings i want to change the background color to be the same color as the divider so that it blends and then let's scroll down further under the structure settings i want to toggle this on so whatever content i put within this row layout block would not take the full width so for example if i expand this out if i were to add an element and i didn't toggle that settings on the content that i put within the roll layout can appear at the side here and at the side here and if we toggle that setting on the max content width is basically from this border all the way to this border over here so nothing else will appear on the side so let's add a heading let's add block let's search for heading i want to select advanced heading let me align this center so the font size i want to change it to 50 and then next i want to add four columns here so that will look like this with four images side by side so over here we want to add a block let's select row layout and we want to select this four equal columns next i want to go to this box and click on add block and let's search for info and here we are we need this info box let's click on this so let's go over to the blog settings let's scroll down under container settings the container background we want it to be transparent let's scroll down further the media settings we want to change the media type to image so that we can upload an image so let's select this feature one now i forgot to do one thing let's scroll up further under the container settings you see now as i hover this gray background will appear and i don't want that let's go to hover the hover background i want to make this as transparent as well so that as i hover nothing will happen so let's scroll down further so the max image width we want to put it as 2 1 0 for the image border i want to put it as 2 and let's scroll down further the image border i want to put it as white and this i have to put it as 2 and for the border radius i have to put it as 200 and for the media padding i want to put it as 0. the image hover border we want to put it as white as well and now let's edit the title and let's open up the title settings the font size i want to put it as 25 and we are done with this let's edit the text settings which are the text over here so the text color we want to put it as white as well let's change the text let's put this as italic so instead of styling everything from scratch for the remaining three elements let's click on this options and let's copy and then let's go to the second box let's add a block select paragraph first let's right click and paste we'll do the same for the rest paragraph right click paste and now all we need to do is to amend the stuff within this info box so let's click on this let's go to media settings let's edit media let's upload files let's select feature number two maybe we want to add a title for example curve handle and let's copy this and put in the alt text to give this some seo juice let's select this let's amend the title and let's do the same for the third column let's go to media settings edit media upload files select feature 3 change up the text and let me fast forward this and we're done with this now over at the gray area here let's click on this add block let's select row layout let's select this one column row layout and as for the dividers we'll select top and let's select the divider and i'll select this design and for the divider color i want it to blend with the previous section and then don't forget to change the alignment of this row layout to full width and as for the background settings for this row layout i want to select the background color as the first accent color so that it will look like this but i need to shave the content of this block down otherwise you can see that whatever that i add here will basically touch the previous section so what we need to do is to select this padding and margin for the top padding if we add more top padding here this content block will be pushed down so for example if i add a hundred here we can see that this is shift down we want this to be maybe 150 and then let's add a header let's select advanced heading let's put in the text and then let's align this center let's increase the font size to 50 and for the hidden color we want to put it as this color and then next let's scroll down let's add an image here so let's search for image select image upload let's select this cuff knife dimensions so for now let's update and refresh the live page and let's check this out so we need to align this center so let's click on the image click on change alignment align it center update refresh and we're done now don't worry about the mobile view we will adjust this towards the end of the video so now if somebody were to be on a mobile view they can't actually see this so it's not good for the mobile user so what we need to do is to add three columns of text here that will reflect all the small text on the image so let's click on this add block let's select row layout let's select three equal column and then for this let's do something simple let's add advanced heading we're gonna put this as heading number three but for the font size i want to put it as 18 and let's align this center now for the background of this section let's select this section as you can see these are all the layers here so before that when we are clicking on this we have this advanced heading and then let's select this section over here so over at the background color and let's select this dark brown and then for the border radius is basically to control the curve of the border let's put this as 10 so as you can see now instead of a right angle we have a curved border so let's click on this advanced heading we want to put some space at the top so let's go to spacing settings and at the top we want to put a 20 pixels of padding and then let's click on the heading let's hit enter so that we can type some text here now if you want to go to the next line of the text instead of creating a new block you need to hold the shift key on your keyboard and then hit enter so that it will go to the next line so if you don't hold a shift key if you hit enter it will create a new line for you to create a new block but we don't want that we want the text to be on the same block itself so let's hit backspace on the keyboard or return if you're on a mac let's hold the shift key and hit enter let's put in the text shift enter again 10.8 inches and then next we want to change the text alignment to center and now we are basically done so let's click on this section let's click on this options and let's copy and let's go to the media block let's click on this add block over here we want to paste the styles let's do the same for the third block let's paste styles so next for this advanced heading let's copy this let's add a block let's say it's paragraph and let's right click and paste let's do the same for the third column and then next let's hit enter put in the text and then let's align center let's do the same for the right column and then let's change the text for the header and let's update this and on the live page let's refresh so this looks decent but if we open this up now the thing is we don't want all this text to appear on the desktop version or even on the tablet version because we can clearly see all the text on the image itself so on the desktop and the tablet version we will hide this so how we do that let's go back to the elements so over here let's select this row layout and once i click this you can see that this three columns are selected together with the row layout so let's scroll down all the way to the bottom where we see this visibility settings we want to hide on desktop and hide on tablet and let's update this and let's refresh and let's see if it appears on the desktop version and that section is gone which is cool next at a gray area let's click on add block let's add another row layout let's add another one column row layouts and let's change this to full width let's add a divider at the top let's select this and for the divider color we want to blend it with the previous section and here we go now let's go to the background settings for the background color let's select this brown but this time round i want to make it even darker something like this you can see it here so let's add some padding let's put let's put 150 pixels at the top so that the content will be pushed down let's scroll up let's click on this heading and let's copy this so let's add a new block paragraph right click paste so now let's add another row layout let's select this right heavy and then let's click on structure settings let's toggle this on and then i want to add a paragraph let's bold this align this right let's copy this open up a new paragraph right click and paste let's align this left so let's click on this row layout so that this entire row layout is selected the padding and margin for the bottom we want to put this as zero and then next i want to copy this and over here you can see this add block let's add a paragraph and then let's right click and paste let's do the same two more times and let's change the text and we are done with this one last thing we need to do at the gray area here add a row layout select a one column row and as for the dividers let's select top let's select this and for the color we need to blend with the previous section so let's click on anywhere at the top section and let's select the base row layout layer and then let's go to the background settings background color let's copy this color code and let's go to the new row layout we have created and go to the dividers and at the top the divider color let's paste the color code here so that it blends with the previous section and then next the padding and margin at the top let's put 150 as well and then we want to add advanced heading let's align this center and let's change the font size to 50 and then we're basically done let's update this and let's refresh so as you can see we are done but we forgot to put this as a full width so over here at the advanced heating let's select this row layout layer and over here let's change this alignment to full width let's update and let's refresh we need to do something about this but don't worry about that so basically over here what is happening is this is the final section before the woocommerce content over here this review is from the content of the single product page so now let's do something about this and this is the section where we'll optimize this page for mobile we'll put all these four columns two by two and that's basically it and same goes for this so let's go [Music] so now over here what we need to do is to click on this paragraph here and over here you can see that the paragraph layer is selected we want to click on this row layout here not this row layout at the base but the row layout above that base layer so let's click on this so what we want to do here is that over here you can see this is the desktop version and this is the tablet and mobile version so let's click on the mobile version so now as you can see here is stacking the columns against each other and that's not what we want we want to put it side by side so if we can scroll this down here you can see that this text is side by side now so let's do the same for the other blocks over here let's click on this paragraph and then let's select the row layout and then for the mobile version we want to put it side by side let's click on this and then the row layout as well let's put it side by side let's do the same we can even put like this which looks a lot nicer so let's update this and let's refresh this and as you can see this is looking a lot nicer here so the same thing here we can see that this text over here is too big so let's scroll down let's select this and over here you can see that we've selected the mobile version so the font size for the mobile let's put it as maybe 35 so if we update this and as we refresh we can see that this text is a little smaller so let's do the same for the specifications let's click on this we have selected the mobile version as you can see on the desktop version the font size is 50 because we have created it this way so let's select the mobile version the font size we want to set it as 35 on mobile so this as well and we are done now the thing is we want to put this four columns side by side so let's say i click on this info box and then let's click on this row layout layer then now we want to put it as a two column grid so as you can see right now it looks this way but don't worry about that let's update this first and let's go to the live page let's refresh this and if we scroll up we can see that it's looking like this it's a little cram here so what we need to do is over here for this column gutter which is the spaces between these two columns we want to change it to maybe a skinny column and then for the mobile padding and margin on the right we want to put it as zero and then next let's click on the info box and then let's scroll up to container settings for the container padding we want to put it as zero so now it looks a lot better so let's do the same for the rest let's click on this info box container settings the container padding make sure that the mobile settings is selected let's put zero let's do the same for the rest and let's update this and refresh and we are done this is looking good so now let's check this out this is the mobile view of the single product page created with woocommerce and gutenberg and this is the desktop version of it [Music] so now let's talk about this product tabs over here and by default if you have used woocommerce before you know that there is a description there are additional information and then there are reviews and i was able to remove the additional information and a product description without using any codes and i can even remove these reviews if i want to so let me show you how i did it so now we have to go to the woocommerce product so let's click on this wordpress logo which will bring us to the dashboard and then we want to go to products and let's select all products so this is the product let's edit it and if we scroll down further we can see this advance here let's click on this and then over here enable reviews we want to check this box off and then let's update this and then if we refresh the live page this section will be gone as you can see so we will still want that so let's go to events and let's check this box again and here we are but what if you want the product description and the additional information now the reason there are no product description or additional information is because we have left those information blank so over here at the classic editor if we type something here so as you can see i've typed something and it's because we have set the text as white so it blended with the white background and if i update this and then if i refresh this we'll see the product description here and here's the text we've just entered and then to activate the additional information all you need to do is to go to the shipping you can either enter this information here and let's update and the reason it is not showing is because over at the appearance and in the theme customizer let's go to woocommerce and single product layout if we scroll to the bottom we can see that this is toggled off meaning we do not want to show the weight and dimensions of the product but if i toggle this on and i publish this and if i refresh this the additional information is here as you can see so this is the toggle of the additional information unless you have more information that will display but it will not display the weight and dimensions and then for the description all you need to do if you don't want the description to be here just leave the wordpress editor blank and just update this refresh and it's basically gone we are left with the reviews so awesome now you know how to customize a single product page on woocommerce using gutenberg blogs without adding any extra plugins or any extra codes so i hope you have enjoyed this tutorial and you now know the power of using hook elements on your website you can practically customize your site freely with the knowledge of this video all it takes is just practice anyway thank you so much for watching this video and if you want more wordpress good book tutorials from me you can check out the playlist at the top and if you want to learn how to improve your site speed you can check out the playlist at the bottom all the best to you take care and stay [Music] safe

Channel: Jack Cao

Views: 8,421

Keywords: woocommerce product page, woocommerce custom product page, woocommerce product page template, customize woocommerce product page, woocommerce single product page customizer, woocommerce tutorial, woocommerce gutenberg editor, woocommerce gutenberg products block, wordpress gutenberg woocommerce, woocommerce gutenberg block, woocommerce gutenberg theme, woocommerce tutorial 2021, woocommerce single product page, how to create custom product page in woocommerce

Id: B6Gi5o5EN4E

Length: 48min 4sec (2884 seconds)

Published: Wed Jun 02 2021