Are you looking for a way to customize your WooCommerce product pages?
✅ Checkout SeedProd Here 👉🏼https://seedprod.com/
By fine-tuning your WooCommerce product pages, you can get more sales and improve your store’s conversion rates.
In this video, we will show you how to customize WooCommerce product pages without writing any code.
0:00 Intro
0:20 How to do this without coding
1:15 Installing SeedProd
2:00 Starting with a Theme
2:55 SeedProd Themes
4:06 Customizing a Theme
6:00 Editing a design
Related Links
►Don’t forget to subscribe to the channel and always stay ahead! https://www.youtube.com/user/wpbeginner?sub_confirmation=1
►SeedProd https://www.seedprod.com/
►WooCommerce https://woocommerce.com/
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
So you just built a woocommerce website And obviously it looks pretty basic now You can install themes on it and stylize Your pages but you still won't have the Ability to customize your product pages And other pages on your website without Touching code but what if there's a way In this video I'm going to show you how To customize the woocommerce product Page and other pages on your website Without touching a single line of code Let's begin so to achieve this feat of Customizing our woocommerce website Without touching a single line of code We'll be using a plugin called sepr it's A fantastic page builder for WordPress It has a free version which you can use To create landing pages but you offer The pre pro version and that is where All the superpowers of seed ploud will Be unlocked including one of the best Functionalities you can ask for the Theme Builder and the theme Builder is What we'll be using to customize all our Pages or technically any page you want Specifically in this video I'm going to Show you the product page but you can Customize any page on your website Without touching a single line of code It's absolutely fantastic so head to the Seed plot.com the link is on the screen And also in the description of this Video go check it out make sure to Purchase the right plan for your needs
If you're customizing just a regular Website and if you're customizing Woocommerce they have different plans so Make sure to purchase the pl plugin and You'll find the ZIP file under your Account and also your license key make Sure to have that ready and we'll start The process now so we're inside the Admin area of my website and it's a Completely blank WordPress install with Woocommerce so this is the homepage Completely blank and this is also a Product page I did create a demo product So this is the product page the default Woocommerce product page it's pretty Boring and we're going to spice it up With c do back into the admin area You'll notice I already have seat plot Installed and activated if you want to Do this you need to go to plugins make Sure go to add new and inside the add New options you'll see the option of Uploading your plugin and what you Should do is just take the zip file from Your computer just drag it here and Install the plugin and once it's Installed and activated you'll also see A notification hey enter your license Key just copy your license key from the Admin area from seat Pro website paste It in and seat plot will be activated on Your website and how you'll know that Hey you'll see a success message on the Screen now inside seat there are tons of
Different options that you can utilize If I go in the menu here you notice Landing pages team Builder setup Subscribers popups getting all those Options what should you choose with or What should you start with well you need To start with the theme Builder this is What you should be choosing and this is What I'm going to start with to explain To you how we're going to work with Theme Builder but just let let me give You a small preview of what the theme Builder does what the theme Builder does Is allows you to create as many Variations of your theme as you like Create every page or every template on Your site completely customizable based On what you like using the power of seed Plot and then make any changes Whatsoever now if that explanation Doesn't help then I'll just give you a Quick demonstration on how this works Now since I I don't have any theme Installed what I'm going to do is use One of seed pl's themes to spice up my Website and then tell you how to Customize it so what I'm going to do is Go to theme template kits and what this Will give me is seat PL themes that I Can use on my website to spice it up so I'll go to the woocommerce options Because that's what I'm look I'm looking For inside W Commerce you'll see all These beautiful looking themes that you
Can use to start customizing your site Or I say just import them on your site And then customize them even further now Even if let's say some of these websites Or some of these themes are not exactly What you are looking for in terms of Niche you have complete control over Customization ability so don't look at The Perfect theme find that suits or Find one that suits your needs and then You can import and customize every Aspect of your theme that's the entire Idea so let's say if I scroll and I say Hey this looks pretty nice if you want To preview any of the themes just click The magnifying icon here and a new tab Will be opened on the screen where You'll be able to just uh experience the Live version of the website including All these Pages this looks like a cool Website and it does suit my uh existing Honey and milk lettuce ebook so let's Say if I'm creating a juicing ebook or Any kind of juices I sell online this Looking looks like a great theme so I'm Going to import this on my site going Back to my website I'm going to just Click the right arrow or right button Here and this will start the import Process on my website it it might take a Few seconds maybe 20 seconds so let's uh Wait for that to finish and I'll tell You the next steps you need to do to Customize a site so the import process
Has completed and you'll see all these Options show up on the screen now you Don't need to understand what all of This is but I'll just explain so that You have some context on what we're Doing our theme is made up of different Templates for example when you look at This template the basic woocommerce Template it's a template that means that Any product that uh is present on your Store will use the similar format it's Going to have a picture here the title Here the image here the button here and By customizing the template itself all The different products will Automatically use the new template so Each of these options what you see here Is different templates on your site Which you now have control over which You can edit the default ones have Already been imported how about let just Let me give you an example if you want To change the product page or customize The product page you have that ability If you want to customize the shop page You have right here the single page that Means a blog post or sing any kind of Singl you have that option single post That means if you have a page on your Site like about page or terms and Conditions you can customize the Template here as well then the blog Index the homepage the sidebar footer And everything on your site is now
Completely customizable so instead of Customizing or thinking about uh a Specific page think about the template View of your website and now you have That customization ability now since This already has been imported we'll First enable this theme this is Important I'll click this enable seat Pro theme I'll enable this and if you go Back here this page is not refreshed yet I'll just refresh this and you'll Instantly see seat plots theme has now Taken over and the entire website looks Already very beautiful but let's say you Already are at this stage and now you Want to customize your website or Specifically let's say the product page Further now what is the steps you want To take well we going to head back to The admin area and you'll find the Appropriate template that we want to Customize since this is a product page We're working with you'll find the Product page template here which you can See right here and you see all these Options edit design edit conditions Duplicate don't worry about this just Open edit design what I'm going to do is Right click and open it up in a new tab And let it Load and this is the product page Template and this is the seed plots Editor the simplest way to explain this Is think of it as Lego blocks you can
Drag and drop things and you can uh make Sure any changes and it's completely Visual you don't have to touch any line Of code and it's very very intuitive to Understand I'll just give you a quick Demonstration of how you can start Making changes for let's say for example Now I'm here I'm looking at these things And most importantly what what think That look for on a product page are the Heading the pricing page the add to Guard button and the images I'm going to Give you a quick demonstration how you Can make any changes to your product Page specifically let's start with the Heading so what you can do is as you're Noticing as I'm hovering over certain Things things are being highlighted so All you have to do if you want to Customize a specific section is to click On it so if I want to customize the Heading make sure that Hing heading is Hovered or heading is being highlighted I'll click on it and instantly on the Left side you'll see all the options Related to The Heading are now open up And this heading is the product title so This is what you see here don't touch This part because the title is being Pulled for the specific title but what You can do is actually customize the Look and feel for example if you want to Change the font size let's say you want To make the font a little bit bigger
I'll just drag and drop this slider or Drag the slider little higher and make Sure it is huge and instantly you see The changes being reflected right here Imagine how difficult it is to do this With woocommerce and now SE is making it Easy like that and what I can do is also Change the alignment so I can go here And click this and now alignment is Right line or Center Line so easy and if You go to the advanced options you'll Have tons of different options to Customize almost everything so in Typography you can change the font types So I coming here and the font family is Default if I just go here you see all These different forms fonts being Already provided inside seat p and I can Just choose any font and it will be Instantly reflected on the page and then Even further I can choose the different Kind of Weights that the font supports Or I can chuse a completely different Font and also change the font size here Once again letter spacing I can make it Bold I can make it italics all these Options that were practically impossible To do without touching code are now Available right here so let's say this Is the font I'm going for and I'm happy With the heading style if I want to Change the pricing options and make sure That it also reflects easily or it's Very very I say easily visible and
Attractive then I'll just click on the Pricing options and the product price is Now also visible on the left where you Can customize it settings again you have Typography options here so if I go to Typography I can go here and choose any Font that I like but let's say if I just Want to change the font size here I just Change the font size right here now I'm Changing the typography of the pricing The base price but I can also change the Price of the sale price which is also What I'm going to show you but let's say For example I want to make this uh the Real price also visible so that Customers actually see that hey the Original price is this but this is what The price uh they don't have to pay Right so I can just do this so that this Is pretty large and I can also make it Bold if I like I can make it italics if I like I can make all these changes and I also change the alignment here if I Want to I can also change the sale price So you see the typography here this is Affecting the regular price if I want to Change the sale price I'll go here and Change the font size to something like This so now I can make sure that if you Have just a few products on your side You can make sure the pricing is Absolutely visible nobody can easily Miss it or nobody can miss it even if They want it to so this this is how easy
It is and if you also want to change the Colors you can go here and change any of The colors let's say I want to change This to a little brighter green I'll Just select this option and now it's Bright green same thing I can do for the Regular price or the yeah the regular Price as well so imagine this what I've Shown you is you can change the font Style you can change the colors the Typography the size everything that you Generally you want to everything is so Easy to add to the screen now I'm going To show you a couple of additional Things that you can do first I'll change The uh style of the button here they add To guard button you know add to C uh Button is the most important uh piece of Information on the page so let's click It and customize this so once you click It again the add to card button has been Enabled if I wanted to I can change it To Center Line I can change it right Line or I I can also make it full width Which also looks good but in this case It's not looking great so I'll just Stick to the center line you can also Add icons to the button so if I go here I can choose before icon and let's say If I choose glass since this is a Website about juicing I can choose a Glass like this and now now instantly You see the glass icon has been added to Add to cut so easy anything to do right
And if I want to I can just go into the Advanced options and again change the Typography let's not change the Typography this time I'll just change The um I say the font size so I'll just Increase this so if you make want to Make sure the button is absolutely Highlighted on the screen is that easy To do you can also change the font size If you want to and you can also change The quantity typography that means this Number right here you want change the Font just for that that's also possible And what if you wanted to make the Button a little round it so that it Looks softer just drag the B radius Around and now the button looks pretty Nice it matches the theme of the Quantity and I can choose different Styles of the button this is flat I can Have a 2d style I can also have a Wintage style I can also have a ghost Style and I can have a link style or Custom style I prefer the flat style so I'll just stick with it and you can also Change the background color so I'll give You a demonstration uh let's say if I Wanted to make make it red you can make It red but if you don't like it you can Go back to theme colors and select one Of these options which was this color so It's absolutely absolutely easy to make Any changes you can also add shadows and All these different options the options
Or possibilities everything that you can Do let's say in a Word document to Change the text styling you can do right Here with seed BL that's absolutely easy But what if you wanted to add more Things on the page which are not already Visible well that's where all the other Features of seed plot come into be so Once you made all the changes you want To go back to all the like said basic Option view just come here and click This nine dotted View which will take You to the blocks View and these are all The blocks that you have available or Think of them as Legos which you can Drag and drop on the page and they'll be Instantly added to the page throughout Your site Isn't that cool so let's say For example I wanted to add a reviews Block so I'll just search for Reviews and I say the business reviews Or I can find the r product reviews yes Let's go with a recent product reviews I'll just drag this widget and I'll just Move it around like this and you see This uh draggable or droppable box That's appearing this is showing that Hey if I let go of my mouse this is Where the actual product or actual Widget block will be added so let's say I want to add jit right here I'll click And let go I'll click here and I'll just Click apply and once the product has Reviews now you'll s start seeing all
The reviews here and if I go back I have Tons of different options to choose from So if you scroll this menu you have Template tags you have woocommerce Template tags that means thect product Price product meta product content short Description long description so let's Say we want to add the short description Just here just drag it here and let go And now the short description is added So that's how easy not only we can Customize the elements on the page we Can add new elements on the page as well So you have related products stock Information product data tabs that means Hey you have reviews you have all this Data you can add that the gallery images The product price so anything you want To add to page let's say if you wanted To add the product pricing once more on The screen after this happens you can Just take this and you can just add it Here and the product price will be Visible here absolutely easy to do Anything that you want with seat plot And that's how powerful it is so once You're happy with everything you're done For example obviously the product price Here doesn't make any sense I'm going to Delete this I'm going to let's say Delete the reviews as well and let's say The short description and all the font Size I or all the font sizes that have I Say changed are the changes I want to
Make I'm going to take a quick view here If I can find some something else let's Say additional information so I'm going To drag the additional information right Here I'm going to leave so if the Product has any additional information It it's going to show up here and below This I'm going to add the related Products widget so I'm just drag it here And drop it here and since this website Has just one product so there are no Related products but once you does have Much different products the related Products will now be visible here so in Just a few minutes what I've done is Make made changes to the theme made Changes to the title the size the fonts Here may add add to button added more Elements remove some elements and also Added couple of additional elements to The page which will help with Conversions and of course you have Complete control over whatever you want To do you can change virtually anything You see on the page can be customized if You want to change the background color That's completely doable if you want to Change this I've already demonstrated a Lot of these things vir anything you can Click on the screen is customizable and Of course we have many other YouTube Tutorials about seat plot so the details Of or I'd say some other YouTube Tutorials will be linked in the
Description this is just a overview of How you can make those changes once You're happy with whatever you've done Just click save and this template will Be saved now every product page has These new changes instantly that's all You need to do just let's go here and This is the o old uh product page that I Demonstrated when I install the theme It's not been refreshed yet let's click Refresh and see this page or this page Chang Live and instantly you see the changes Life see I'm not a great designer I Don't even have any code skills and I am Able to change anything on my site just By dragg and dropping clicking a few Buttons and that's the power of seed PR All right so yeah before you go uh I'll Just go give you a quick demonstration Of other things you can change with seat PL as well for example if I go here These are all the different templates on Your site right so if you want to change The single P page that means the blog Post design just open it up and you can Change the blog post design as well Let's say you want to have the title not Here you can make it left line you can Add a sidebar remove a sidebar make any Of the changes and all of this is easily Easily possible so it's not just Woocommerce or product pages you can Customize any of these things and one
Quick feature about uh SE cloud is you Can create uh multiple variations of Templates for different I'd say sections Of your website just for example if you Have multiple categories on your website For products multiple categories you can Create three variations of the product Page and with using conditions you can Ensure that every single page or every Single category has a different look for The product page this is also possible Just keep giv an idea of what you can do With seed plot again I'll give or link a Few description or I'll link few videos Down in the description which will Explain how to do this and of course if You want to learn how to do a specific Thing with sepr the comment Box is open You can leave your comments and we'll Probably make videos about it anyway Right so I'm YJ you're watching W Beginner and if you have any questions Make sure and leave in the comments Otherwise like share subscribe do all That good stuff so we can make more Videos for you all right take care and I'll see you in the next Video
