How to Create an eCommerce Website with WordPress
Share this article
Have you ever wanted to create an eCommerce website using WordPress? You’re not alone.
In this start to finish video tutorial, I’ll show you how to create an eCommerce website with WordPress in minutes, with the most amazing new tools for 2018.
This is simply the easiest and definitely the fastest way to create an eCommerce WordPress website. Find out how to save weeks of work, and have fun at the same time! We’ll be using WordPress and WooCommerce to create our eCommerce store, with the theme that’s creating a stir, Astra alongside the agency tools for the Astra theme.
This will enable us to choose from a gorgeous selection of already completed eCommerce WordPress websites, find one we like, then click a few buttons to import that full website into our website. With a few mouse clicks, we’ll have a stunning new eCommerce website with WordPress setup in minutes. It’s then a matter of changing out your logo, text and some images and voila, our new eCommerce website with WordPress is done.
The tutorial will cover setting up our eCommerce WordPress website in minutes on your very own SSD cloud server in a few clicks.
Don’t want to do it yourself? I build eCommerce websites, here’s what I can do for you.
Imagine building an e-commerce website in a few minutes with a few clicks without using any code. Today we're going to do exactly that. Don't go anywhere. We'll be showing you how to build an e-commerce website in a few minutes with a few clicks. What are we going to do is find a beautiful website using our pre premium tools. Select the design we want. We'll pull it into a fresh install of WordPress and literally get it ready to roll. In a few minutes we'll be building this stunning e-commerce website with a transparent header, a beautiful Hetero. Yeah, with the Hara header bid calls to action.
The next draw will ever section where we can shop different categories on our store, an extra whatever. Beautiful section we can obviously change any of this are for anything you want. We can change it up, swap it out. Any new section joe postcards or limit. Then we've got a beautiful grid section. Yeah, with products that we can shop directly on this route. We've got some information about our store and remember on any of these rides you can change anything you want. You can add in as many arrows as you want. I mean, we've got a beautiful photo on a shaIP edge. We've got a gorgeous clean store. We've got a beautiful grid layout for a store.
As you can see, there's a quick view when we took on that it allows our visitors to quickly see what's going on on that particular product and they can edit to called Rajya. You've also got to be to canvas menu. We have visitors controlled kit degrees easily and full-time. They can fulfill to the products pross that concentric product categories and drill down to exactly what they want. I can also fall to their products but color or we put the sauce, whatever it may be, that can select the crotch so clients can draw down to find exactly what they want and in the head. I'm very excited about this. We've got a little icon there that helps with conversions. We can see exactly what is in the cart. We can remove items from our code. We can see our subtitle quantities. Even over there, you can see the quantities that's currently in the court.
We can view our court and we can check out, so let's view our court and these are clean caught. Once we happy we can check out on our beautiful checkout page. We've got an optimized checkout page with two steps. This is all customizable. You can have it in one step or two steps, but I've optimized you can inter coupon code j if you're offering coupons in your store. Great Team, very simple. Once someone's inserted all the details you have that can proceed to payment and that's the beautiful ecommerce store that began to be building. Now keeping them on building an e-commerce store like this without using the tools that we'll be using will probably take us weeks, so we get two weeks of work. We're literally be selecting ecommerce store that we lock. In this case, this design, will they be pulling it into our WordPress installation?
That will be set up immediately for us. All the tools they need to do is change out the logo, change out a few links and images, and we ready to roll. We will be using WordPress, which is free, will be using woo commerce, which has free will then be using that as a theme or the extra pro ed on that's part of estrone agency bundle will also be using the extra premium starts plugging. That's what it's going to allow us to to put in Congress to in a few seconds. This is a high-level overview I'll be taking you from start to finish, going through all the steps of how to get your store up and running and won't be an exhaustive video. Otherwise we may sit chat for five or six hours, but I am going to do as part of this start to finish process and show you how to install your website on an SSD cloud server.
This is going to be optimized for WordPress and WooCommerce. It's going to be affordable. It's going to be an option that you can scale automatically. In fact, it's an option I use on my websites and my concrete sites are highly recommend and as I see it super affordable. Let's get started. In this section, I'm going to show you how to install your website. On an SSD cloud server, to do this, you go to cloud wise on the [inaudible] website, you can either click the get started for free button or the platform, but this is a free trial that doesn't require a credit card, so you can give this a full test on your website, absolutely free of charge, so let's get started and log into create a free account. Once logged into our target is dashboard will click the launch back. Well, now we are going to select the application that we want in this case where you're looking for rue commerce with WordPress, so we'll select that option.
Now we need to give our map are a big upon a name. I'm going to call this demo. In fact on make a lowercase demo account. Don't calm. I'm going to give my manage server a name of and then I'm going to give my project and I'm a test project one. In all these cases you can name it whatever you want and what's it, whatever's appropriate. Next weekend to decide what platform we want to choose a currently this digital ocean, linode, vulture, Amazon web services, Google Cloud Platform, and k y u p. As you can see on whichever one I select, I can select a service size and it show me. Show me the amount of that I'll be paying monthly as well as the hourly rate. If I change it, either the service size, the the color change, the rate changes accordingly. If I select a different provider, the rate also changes the, so depending on which provider choose, I can see exactly how much it's going to cost me.
Now for our puIPoses, yeah, I'm going to choose vulture, which is my favorite. Although you can use anything else you want Digital Ocean's perfectly fine learning whatever you want. I'll just find the [inaudible] servers, Bang for buck at this price point for, for my use of provides the best power, the best speed and definitely the best value for money. Like I said, if you want to use something else like digital, ocean or land, I please do. Go ahead. I'll select my provider and now I'm going to select my service size. For our puIPoses, one gig will be more than enough. If your website is a lot busier and it has a lot more traffic, all means selected. Two gig for Gig, whatever appropriate. I will say this though, a one gig server can support a suIPrisingly large amount of traffic next week and select our location.
Each provider has got locations all over the planet. Vulture has got 15 occasions, so there they are. I'm going to select USA Seattle for our demo. What you will do yet is look at your target audience and then select a point of prisons or super that's closest to your target audience to ensure that the browser will be as quick as possible and everything will be served as quickly as possible. So no matter where your audiences across the world, select the server closest to your audience and that's about it. Let's have a look. If I'm happy with everything looks good. I know what I'm going to pay the I even know what I'm going to pay on an hourly rate. So let's say for example, I wanted my server is a testing or staging server and I want to tear it up for a few hours or a day or week.
I could then work out this exactly how much it would cost me using this figure. Once I'm happy I'll click launch now. Now I'm getting a message saying my high-speed application where we will be ready in approximately 13 minutes. My server's ready. My application has been stalled. Now to excess it, I'll go to my dashboard is a list of all the servers. In this case there's only one. I'll then click on w w, W I'll click on demo account, my server. I can access it right away by clicking that button. That'll get me to the front end. Yeah, the login details to the baking. I can click that link to access it. And now the login details to the WordPress dashboard. Now this doesn't look pretty good and this is definitely not what I want to use our to use my domain, which is demo account does not WooCommerce, blah blah blah blah.
So what we need to do now is point our domain to our cloud server to that IP there. So having a domain is hosted, you'll need to go to their control panel and you'll need to point the domain to the IP number of your new cloud waste dedicated SSD cloud server. I'll show you how to do that. For the puIPoses of our demo, I'm going to assume that you're using c panel. If your provider uses a proprietary control panel, you'll registrar that is by all means, contact them, asked them how to do it, if they've got a tutorial to help you or even asked them. If they will do it for you, most likely they'll do it free of charge. OK, so what we want to do is first of all, head on over to our control panel in this guys. That'll be c panel once something c panel.
I'll scroll down till I get the domain section or clique zone editor. Now I'll see your list of all the hosting accounts that I've got or rather all the domains that I've got listed on my hosting account. In this case, it's only the one dimmer dash accounts to edit much zone falls. I will click on manage now. It'll bring up a full list of everything or every zone entry. Yet what I'm looking for is I'm looking for the [inaudible] entries. In fact, I'm looking for one entry. If you've got too many items list. Yeah, by all means, click on that. A little button there and it'll filter down to just your a records. OK, so that's what I'm looking for is the-account.com. And there's the current servers, Ip number. In other words, verse server, the hosting servers, Ip number. What I want to do is insert the cloud ways SSD clouds server IP number there.
So what are the doing is pointing my demo account, demo account.com, not to the current hosting account, IP number, [inaudible]. And then what you'll notice here as well, if you look carefully, you'll see that there's a scene I'm entry as well. So what it does is it points w w, w dot demo, dish account to Dima account [inaudible]. So if someone putting www, I hated my done my name, it will point it to demo account and demo account, Dema detriot counter points to whatever that IP number is. They're very simple. So it's also in that way if someone uses the www or uses your domain or excesses, you're your domain without the w, W, w they'll will arrive at your website. OK, so now what we need to do is get ahold of the Caillard ways, our server IP number. So what we do is go back to our cloud ways dashboard in our cloud ways dashboard.
That will be our IP number. So what we did was we went to servers. I'll do that for you. Let's just make sure there's a list of my servers. That's the specific server I'm looking for and there's one application on it, one website or click on the w w have find my website. In this case Demo Day account.com. I'll click that and there it is under excess details, the public IP number. All I need to do is click it to copy it and it's copied to my clipboard. Now we'll go back to our panel server and copying that IP number once again in the panel will found our domain name, demo-account.com. That's the record. I'll click edit now, remember got our server IP number one. We are now going to paste in the copied cloud wise is this cloud server IP number and there it is.
Once I'm finished I click make sure first of all that this is correct, very important, and then click save or record and that's it. Now when we type in [inaudible] dot com or w w w dot demo, dish account.com will go to a new cloud, raise, servo wanting to know. It'll take anything between probably one to 24 hours for your domain to propagate or for those changes to update across the Internet. Please do keep that in mind. Now what we do is we go back to our cloud server. We go back to our [inaudible] server dashboard anyway, so what we want to do now is change our domain name to reflect the actual domain. Now we do this in our cloud raise dashboard. Once again, I'll show you from the beginning, we click on servers on our specific server, click on w w, W in click demo to Chicago to come for the specific demo or those specific domain name rather, and then what we do is we click on domain management.
Want to just mention something here. What you want to do is make sure that your domain name is propagating to your cloud server, so when you type in your domain name in this account, in this case, rather demo at [inaudible] dot com, that'll display my web site that's on my card way server, so you may have to wait between one and 24 hours for this to propagate. Once it's done, we'll actually put in our our domain and they're in this case demo destruct account.com. Once I'm happy, I'll click save changes and that's it. I've updated my primary domain name. Now when I click on access details, that's my new domain name or their application euro, and now I can access my website, the domain name be very simple, very quick. I want to show you how to scale your server up and also want to show you how to install an ssl certificate on your server, so in your cloud is dashboard, click on servers on the particular server you want to work with to on w, w, w, and then find the particular domain that you want to work with.
In this case it will be again my Demo Account Dot Co. Now I'm going to click on ssl certificate and then yeah, I'm going to use a let's encrypt free ssl certificate. If you waNt to use a custom third party certificate, you certainly can just select it there and install it, but these let's encrypt certificates are free of charge and they're perfectly fine to use or putting my email address here and my domain or domain name. In this case it's the their hsa account, and then I click install certificate to install my certificate to simple as that. Now I'm going to show you how to scale your server up. it said that your service starting to get busy and you needed more power. This is what you do in your [inaudible] dashboard. Tick on ServerS, on your particuLar server, click on the server and then a vertical scaling.
That's what I'm currently paying for my one gig server, or simply move that over to two gig for gig, whatever I need and I'll kick scale. Now this is almost transparent and it takes maybe five to 10 minutes and then you've got more power in your server, so super simple way to scale your serve up giving an extra power almost immediately. Thank you [inaudible] for making it so easy. In this section, I'm going to install the extra theme and the [inaudible] agency package components, so what we need to do now is head on over to the astrocyte and get those components.
I'll have links to all the tools used in the description below, so what we want to do on the astrocyte is click the download now button to get the theme that'll take us through the pricing page. There's two options, annual or laugh, tom is a free version and an extra pro version will be using the agency bundle version because there's many components here that began to be using to pull in our website immediately and get it both literally in minutes. The processing on the bundle for annual is $249 a year. There's a lifetime option of $699. Once off, this last time option will be going away. A brainstorm force, which are the developers have said that this will be a for a little while longer and then they're taking it away forever, so if you don't like a recurring payments, by all means, grab their deal for what you're getting yet it's an absolutely awesome deal. You're gettIng everything in the free option. The pro option as well as extra per add on premium sites convert pro all in one schema pro ultimate add ons for beaver builder, w people failure add on for elemental. That's coming soon and all future plugins are really great deal, but it's quickly go through what you get in the entire deal.
This is only in the agency package. Get the extra pro air on that's got all these extra features, giving extra functionality to the astro theme, making it very powerful, the convert pro plugging and email opt-ins and lead generation plugin. You can use it for all kinds of calls to action pop ups, slide ins and so on. Really grateful for list-building ultimate add ons for beaver builder. This adds functionality to your billable the plug-in, very powerful. If you're using elemental, the ultimate add ons for elemental is coming soon. pets included the one schema pro ed schema, correct schema markup to your website, helping you with seo and ultimately helping google to understand your website content better and then rank better this way or the same kind of functionality to the elemental plugin that it adds to the beaver builder plugin. There could be the page builder and in the ready-made for website templates, these are ready made website professionally designed that you can pull into a new WordPress installation almost immediately.
It will save you probably weeks of work. As you can see, currently these other 30,000 people using astro and yeah, some of the people that use astra and recommend austra are highly recommend. Australia is an awesome solution. If you want to get an e-commerce website up and running very quickly, there is no better solution than astro. Now, before we get started off, bought the ester agency bundle the lifetime option with my own money. That's how much I believe in it. I cannot recommend it highly enough to recommend products that are believing that I use myself, so to get started select between annual and lifetime. In my case, I went to the lifetime pick on the good agency button. I'll then go to the checkout page, make sure everything's correct. I've got a discount code. I can enter it there. Otherwise I'll continue choosing between credit card or paypal into my details, their email address, first name, last name, and then I'll click continue to payment.
Once I've completed my payment and are going to the store page, this is where I can get everything that I need. Yeah, or the extra theme and pro ed on plugins and components. That's the extra premium sites that will be using. What we'll do is click on estrogens to download it. I'm also going to use a child theme, so click on esther child-theme to download a child theme. What's a child theme? I'll be taken to the child teenager generator. This is a free tool provided by extra. I'm going to use the advanced options, so let's call this now. The domain that I'm using is demo account, so I'm just going to call this demo account. Your business name was, for example, we have assist you could prescribe assisting there. Anything else you'd like childhood version? I'm going to just go with one. Zero zero author will assist in this case by all means, patrol business there, me author, url.
I'm going to put my website address there for the description. I can change this or leave it as is. I can put anything on one day. I'm just going to leave it as is for now and then I'm going to call this folder name, demo account. You can also quote, call this anything you want. Then there's an option here to add a screenshot. The dimensions will be 1200 by 900 and a mid size. that's a fossils of on mic, so I click choose file to select my file. Once I've selected my file, I click generate. Now what happens is estrogen will generate a child theme for me with all the cities that I've used here. It'll go to my local machine and there you go. Now, once I'm done, I want to continue getting the rest of the components, so I'll go back to your account downloads and orders. Now we've already got esther child theme. We've got the ester ester theme. Pardon me, and the extra child team we need now need the estriol pro plugin. from there, it's downloading and then I need the extra premium sites plugin and I'll click that and I'm going to click the ultimate add ons for beaver builder and I click that to install my estrodim, my extra child theme and the risks of the plug-in components that are new are going to my website into the dashboard that starts off with the theme. I'll go appearance themes.
I'm going to public ed knew I'm going to upload the theme and choose file. I'm first going to install my theme and then I'll click install. Now, not going to activate my theme because I'm going to activate the child theme, which I'm using. The reason we will use a child theme is if we make any changes to the theme itself, some customizations when their theme gets updated and it does get updated very regularly is a chance that we could lose those customizations. We then use a child theme where we make all our our changes and all the customizations, and then when the parent theme updates, in this case extra, we don't use those customizations, so this is best practice for WordPress, no matter what team using this is the way that you should do things. So to upload my child theme, I'll go return to themes page, click add new and upload theme, choose file, and then I'll select my esther child theme are called a demo account if you remember correctly.
Once it's the outer can still now, now I'm going to activate my child. things click activate. There it is. There's my. There's my child theme, which is activated, and of course there's my custom thumbnail. All it's very professional. Let's continue. Next we want to install the estrogen pro ed on. For the extra thing. To do that, we'll go to dashboard plugins, add new will, click upload plugin, choose file, and I'm going to install the air strip pro plugin, add on an arctic install. Now I'll activate this plugin that's asking me to activate my copy of the pro plugin. I'll do their chores first. Game to also install my extra premium sites plaguing, so click once again in the dashboard plugins, add new, I mean the new page, so I'll click add new upload plugin, choose file, and my extra premium sites. Plug in and I'll click install now to installer. I'm going to activate my plugin. Now I'm going to activate my extra premium sites. Octagon activate license.
The easiest way to get your licenses is go back to ostracize to con account. dominoes and orders. Once in your account page, click on account and licenses, and they are my licenses. I can copy and paste the license that I need. In this case, it's the extra premium hearts clawson's pasted in and activate and it's activated. As you can see now a need to activate my extra pro ed on license to do this are go to the dashboard appearance and esther options and it's around certain my license executive, the same procedure. I'll get my license, I'll copy it into today and I'll click activate and that's my license is now editor and you of course all the premium options that you don't get in the free thing. ThIs is what gives extra produce, phenomenal power. I'm not going to be activating any options here to because we're going to be using the ester ester premium salts, plugging to putting our entire website that will activate whatever's needed for it for the particular website, so nothing needed a job if I wasn't using the so premium sites, plugging there could activate whatever I wanted.
Yeah. All of these pro ed on modules to configure my store if I wanted it, and that's how we install the astra theme, the extra child theme, the astro premium starts plugin, and the astro pro ed on it. In this section, we are going to choose our new e-commerce website and we're going to install it with a few clicks. To do that, it's going to our dashboard. We're going to appearance and the astrocytes, astrocytes is the plugin that we've just Installed that allow us to put in a pre-made website in a few clicks. What we'll do now is we'll select a page builder that began to use. this will enable us to edit our pages on the back end. Those will be pages, for example, um, contact page, homepage, any landing page you can choose between elemental and beaver builder, who I example I'm going to choose b or boulder or click on that, and these are the list of websites that I can install with a few clicks. that is the selection.
As you can see, the mini solutions, you can filter between all blog websites, business websites, e-commerce or the free. And you can do a search. Now remember, everything with an agency badge can be used with austra agency, premium sites plugging. In other words, that agency package that we've just purchased any in store. You can also use these sites. Yap, the dinette, the agency badge with the free tools that won't have as much functionality that went through quite as beautiful and be as powerful, but they still work. Now what are we going to do is we're going to install this website here as the agency badge. As you can see, it's called brainstorm pro, so what we'll do is to start click details and preview and now to bring up a list of plug-ins that extra premium sites will install for us. That's a preview of what the website's going to look like.
So we need beaver builder plugin. The lot vision contact form seven ultimate ed for being older, we'd communists and astro we've installed already. Totally install and it'll activate these plugins for us. So what we do to continue his click install plugins, it's [inaudible] installing and activating the plugins required. Now, please remember If you do have a slow internet connection, this may take a few minutes. Astro premium sites has finished installing and activating all the plugins we need to remember, this is still a preview of our site. What we've got to do now is import the site into our fresh word press installation. To do that, I'll click import the site. Then I've got a warning here. I can just click ok to continue what is saying. Let's just go through the warning for what it's worth. If they're getting data importable, make your site similar to ours, please bear in mind it is recommended to run an import on a fresh word press installation, which we've done importing side does not delete any pages or posts I ever can override your existing content.
Now, the good reason to use it on a fresh site and not on a on an existing site, copyrighted media will not be important. Please instead, copyrighted media will not be important. Instead, it will be replaced with placeholders so we can click ok to continue. Once again, if you have a slight connection, this could take a few minutes. Please be patient. We're not done importing our new site before we have a look. Let's look at what are currently looks like and this is what it looks like with just the astra theme and esther child theme installed. Before we our website, now obviously I just haven't clicked refresh, which I can do, but in case we are on this page to view our site include done view site and that's our e-commerce website bolt with a few clicks. Now you may notIce one or two things that are a little out of place.
For example, on our demo site, we don't have that white bar. The menu bar is transparent. If you have a look at on the demo massage, you can see it's transparent. Most likely what's happening there. We need to flush a cash. very simple way to do this if you get this problem is, is the following. We can refresh the page in our browser by clicking control or command if are in the yoga. Sometimes it may even work by just refreshing the page without having to regenerate the cash so you can try either or and that's our install, an e-commerce website in a few minutes with a few clicks. Once again, say thank you to extra making it so simple.
In this section, I'm going to show you how to set up WooCommerce on your store using WooCommerce setup wizard. Now, if you're maybe we pull in our website using astro. Now what esther will do is it'll install WooCommerce for you and it will activate WooCommerce along with a few other plugins. Now what happens is when you get into the back end, you may not see the setup was it in a work? what I'll do, crystal will show you how to find the wizard. Once you've logged inTo the back of your store and indiegogo, stay positive through the process to find the WooCommerce set up. Was it in your WordPress dashboard? Go to WooCommerce and settings, and in the top right you'll see that help drop down. Click that and intellect setup wizard, and then the setup was it, but now we've got a six step set up process.
We can go through this visit and get our store set up in tom. Ok, step one store setup. What we'll first do yet is the way our store is biased. In other words, your country, and then we can give it an address and then you can carry on if you've got a second address line your city postal code and you can see, select your currency. She bought all kinds of options, a whatever your currency is and in what type of product do you want to solve our plan to solve. But physical and digital products are plan to sell. Physical products are applied to sell digital products to choose what's appropriate. In this case, I'm going to leave it on a plate, so both physical and digital products. Um, and it is another option. I will also be selling products or services in person. So if you're going to sell a lot or face-to-face, but woman's clickbait and in is one thing that I want you to take note of.
Um, this checkbox is on by default, allow us to collect nonsensitive diagnostic data and usage information. I'm sure it will be fun for you to allow this or keep a checked all it does a common data on how your store is used at helps them to improve the product. Personally, I don't like this and are always prefer to keep this unchecked. If you want to keep a check, go ahead not to move on to payment or click. Let's go and we'll move to the next step. On the payments page, there's three options. There are also many other payment gateways you can choose from. Those will be separate plugins that you can install. I'm going to use stripe payments are very simple to per nine percent for every transaction in the other fees that I know of. You can also click a checkbox creating new stripe account for me and it'll enable you to create a new stripe account if you don't have one.
Once you ready to continue now, shipping now will choose first of all, our shopping zone. I'm going to keep it on United Kingdom. That's where our store is located. On two kinds of of shipping out the box that you can choose a flat-rate shipping. So let's say for example, you want to charge $20 or 20 pounds, whatever it may be, you can give a flat rate for new. You want, you can then flat, right? I'm going to keep it on free shopping and then I'll work my shipping costs into my process. As you can see, you're not going to charge for shipping me. You wanted to deactivate it. By all means, you can yell and then location is not covered by other zones. Are not going to worry about that. I'm just shipping to my country or activate that an intuit your way to unit. I'm going to leave one kilograms.
You've got grams, pounds and ounces or dimension unit. I'm going to leave it on centimeters or this should also be millimeters, inches in yards. When you're always good to continue on the recommended extras page. We don't want the storefront theme installed. We already have [inaudible], so I'm going to deactivate that. Automated Texas powered by WooCommerce services. This is something you might want to consider. Discuss this with your accountant. Texas can be quite daunting and a complicated, especially in the United States with the state and local Texas. If you enable this, WooCommerce will work your workout, your Texas for you automatically. It's a very simple way to get this done. Could be very useful. For our puIPoses, I'm going To leave a deactivated, but by all means use it if it's going to benefit you. Now, pick, continue to move along. We almost ready. Step five will call us now.
Wants us team store jetpack. Jpa is usually, in my opinion, if you don't want to use jetpack, but all means just say skip the step I normally in, so Jeff Beck on mine sites. For the puIPoses of our dema, I'm going to click skip this step. We are almost ready. You can put your email in there if you want to receive notifications and then the next two options or what relate to choose other will create that first product and manually enter it. Otherwise we can import products using a csv fall. This is probably the one I would use an import pma products from a csu folly. In other words from a spreadsheet, but as we've already had products created for us by australian, I'm not going to use any of these. It's not necessary for now. What I can do like to own is going to mar, store, back in, and then ed, the new products that are wanting to have on my store to our will now click return to dashboard and that's how simple it is to set up your store for the first time using the woo commerce set up with one of the advantages of using extra premium sites or these beautiful websites that you can pull in a few clicks and that means that often is very little that you want to change because everything's been done for you.
This is a professional design. Professional designers are the things that I'll want to change, but overall I'm happy with everything. The way that it looks now this particular site is using two different hitters. There's a transparent head on the home page on the [inaudible] page about us and contact us and in the shop page is using a different header. So we'll have to edit two hitters to get the sock looking in the way that [inaudible] now want to change our logo there and I'll have to change it out in two places as you can see there. So that it reflects on both hitters. Ok, let's get started. Let's start with a transparent header. It's going into the customizer to exit the customizer. On any page of the website, you can click customize the dashboard. You can go dashboard appearance and customers in the customers on the homepage.
You may notice the page parklea. You can ignore that was, as you can tell, a friend end doesn't show. That seems to be a quirk of extra. I'm sure it'll get taken up shortly. First of all, let's change up the logo. Identity is two logos. Yeah. These are regular lager and are written logo. The regular logo will be on regular devices and the rates and the logo will be for retina and high definition devices or higher resolution devices. You change that art. We could change logger. We can then select from a media library or we can upload. In this case I've already uploaded it, so I'm going to select my logo and then I can crop the image. Can skip cropping. In This case, I'm going to skip cropping and then I'm going to click change logo from our retina logo change image. Rather, I'll select my image.
I've already uploaded it and I'll say, choose image. we've changed out the store lug In the start-up entity and that's correct, but this is a transparent header. Will have to change this out somewhere else. So to do that we'll get a layout hitter and then we'll go transparent header and these, that logo to change it up on going to upload falls. Before I do that, I mean, but this is transparent hedo. We've just uploaded a regular hitter which has got plaque ticks, so they'd like text on jajuan show, literally been visible. You'll just see the orange d, so we need to have a transparent logo or logo for transparent here. Um, in this case they texted us. So what I'm going to do is not upload the creative files. Now I'm uploading more transparent logo, pick, choose image and choose image. Now I'm going to upload my transparent retina logo, click change image.
Once again, I'm going to upload it matrix selected and click choose image. And there you go, and now you can see that's changed as well in the header. We can see it obviously because of ed white background, but it's probably shit. And just have a look at what it looks like on the front end that's on before our refresh. And there you go. Ok, so now that's the logo for our transparent hitter. Now in look [inaudible] about us and contact us. We've changed up the logo on the shop page. We still got the same logo, which is their core, will need to change that art. Now that is a custom header to do that. In our dashboard, we will go to appearance and real page hitters. These are custom mater, uh, displays on the entire website, so any, every indian, every single page on the website, but these exclusions that have been added, the exclusions or the home page about us page contact us page and look book 18 page.
So what that means is on those pages and any other pages we want to age. Now this logo won't show, but on any other page by default, this will be the logo that shows. It's have a look at what was done here and how to change it out, so we click on the edit button and we've got a couple of options. Yeah, I'll go through them very briefly. That's a center line page letter that is in line and that's no page, that's for landing page. These are background so we could chanGe our background there. in this case, it's their background there, so whatever you put in there that's going to change their background to to change their [inaudible] removed image and we'd upload a background of our choice. We can overlay this so there's a couple more options. We can have top paddinG, button padding, custom size, or we can even have it full screen, so every you wanted that.
You bought optIons for link colors, link kava colors, and then text color. In this case the title takes kelly's what the. That's what as you can see, and these are link color, so those. That's where we edIt those anyway and it's continuing to consolidate data and there is the logo that the honda exactly the same process. Now, let me mention that this has got a wide background in this menu bar, so we'll have our regular lager. Yeah, not the transparent logo, the walk ticks, but the logo with the black text, so I'm going to say remove logo and then select logo. These have already beeN uploaded previously so I don't have to apply new ones. I'm going to use the ones that already there in the media library. I'm going to select the logo I want and say select same thing. In fact, I think let's save a stick.
Just pick select logo and this is for my reckner logo. Select it and there you go. Those are my two logos. Change that now don't forget to update or you will not see the changes. Now refresh and is on new logo or some to rechange that both our logos or you'd like to mention a few more options. Yeah, you can have a custom with. Yes. You've got some options. Is the overlay color that you can edit a boarder bottom sides. If you wanted a border, the color of the border. Primary men, you could have colors. Yes. So they are more options here. Specifically you could put in a menu, yet your customers are sitting so you can effect all these settings in this particular meeting, netware you do them. And in the display rules. This I definitely need to talk about. This is very powerful.
This is how this was done. Ok. So the display on entire website, but yeah, all the exclusion. So do not display on the selection. Here is specific pages and those pages were home about contact look book. If you wanted to add another page, you can just type in anything you want. Ya. Let's for example, remove the homepage and re edit. I'll talk to you know and is my home page or click it and it's edit and that's how you'd any other pages. You could add as many exclusion rules as you want user roles, yet you could have this for all people, logging, visitors, visitors, administrator, editor, customer shop manager and so on. So there's definitely granular control. Yeah, that you can exercise and that's how you would do that. I don't think I mentioned the semi kobeck display on. So you could have this on all singulars entire website, which is what it is now, all our cuff pages that your blog and so on all posts or posts, archive and so on and so forth.
So you could select a multitude of ops options. Yeah. This means that you can have customer hitters for specific pages under specific circumstances, so you could set it exactly the way you want. You could create a new header by clicking the add new button and have specific things in a particular header that you want on a particular page. Very powerful stuff. I remember once you've got this, the way you wanted to update and that is our two hitters done our customer, the chart shows on the shop and then our transparent header which shows all the other pages. It looks good, but I see we've got a problem here. We're not scrolled down. it still shows the old logo. So this is a sticky hidden. yeah. We need to edit that. It's go back and talk them and they. We got sticky hitter. These are logos.
So basically what's happening is when not scrolled down, I can have a different logo, different songs, like a different colors. What if I wanted it to have a look that it's on the. Ok, well that would be on the front page. It makes sure that it's on the shop page as well. Exactly the same thing. So we need to know it. It's sticky logo or sticky header. Other same thing. Yeah, change image. Now let's have a look at what happens young. Currently this is a white background, so I'll need my regular logo with a black text.
I'm going to look for. There we go. Choose my regular lager and then change out my retina logo, choose my retina image and it's done. There we go. So now remember this is on my transparent. Hate us so much. Transparent here to shine you. I'll publish it quickly and they will able to look at exactly what it does. So I'll refresh. Here we go. That is now much stickier yoga, correct? In my head. Correct. So very simple to do that. It's just talk about one or two of these other settings as well. While we edited there we go so sticky logger with. We could have a custom with. Yeah, I think you can see. There we go. You can see it increasing, decreasing as our muses slotter so you can set it to exactly the way that you wanted to leave [inaudible]. I'm happy with it and in the sticky break background capacity, that's on one.
Now as you can see on decreasing it and then it becomes a little transparent. You got granular control. You might want something along those lines. I'm going to leave it is is for now, but that's where you do that and then enabled shrink effective. If the selected, it doesn't shrink, in other words, get smaller, still sticky but doesn't shrink, stays the same size so you can see it's a tour. All the lodge, our lock, the shrink effect. I think it just gives you a page, a little bit more space, but keeps all those nice history of menu or navigation items there. I'm going to enable shrink, shrinking, fake. Once again, I'd like to have as much space as possible from our visitors to view. There we go, much better all size and the shrink effect, the logo gets lucky smaller, and then you can have a animation effect where you can have a slot or fade, so it'll slide in, auto fading.
There's none at the moment. I'm going to leave it as is. I'm happy with it. And then you can also say hot on. Scroll down to what that happens is going on, scroll down, but as soon as you scrolled up comes the. An thick big might be very useful. So what happens now is you. You can give you a visit up as much real estate to the kit as possible. As soon as he scrolls up the menu once again, so they'd something you might want to consider. And then I'm going to leave it as is. I think it looks good now on display on we can have this on desktop and mobile or we can have it on desktop only or mobile one. I'm going to leave it on desktop and mobile. I'm very happy with it. And then one thing, I don't think I've mentioned it, wherever you see these icons in the customizer, it means that you can view it on the desktop, on tablet, on mobile.
So currently it's on desktop. If I click on tablet, this is what my sock will look like on tablet and that's what my sock will look like on a mobile phone. Keep that in mind and then I'll go back. We can also have controls. If you want to have a really good look at what's happening, then just clip that back to show the controls. Once again. Anyway, I'm happy with it. I'm going to publish a. Before I do that, let me mention while we are on those mobile editing options where maybe you see that little icon, the with respect to these settings. Yeah. This means that this is what the setting is for desktop itam. If I wanted to eat at the mobile or the tablet option rather clicked it once again and I got a tablet and then I could have a custom logo with, for example, or whatever they're sitting might be.
I can have it on tablet. Oh, near in other words, I can have a different seating on tablet. I can sit there to whatever I want on tablet and then I can go to mobile phone and I can set it to whatever I want. Marble fund so you can draw down and have your your settings on the specific devices inhabit for. In other words, it's device specific, very handy and very useful to make your socket look exactly the way you want it on a specific devices. Once you happy which are. I'm going to click publish and I'm going to click and once again to go back to desktop and there we go. That's done to look at my store or maybe with it. There's not much I want to change. I think the next thing I'm going to do is I'm going to edit my foot term and my foot's on wages, so that would be this area.
yeah. Now This is not using extra themes, footer widget options that using a custom layout that gives us a lot more options. That cr that was done in the dashboard. We got to appearance and we go custom louts maze. Us talk footer that set to display on the entire website and that's where it's been hooked in to edit it. Now remember, we can create new custom layout, so once again the same with a customer. We could have specific footstools for specific pages or specific areas of our website with whatever content we want. This is super powerful and extremely flexible. Ok, to edit. Let's click on edit in. See it's using the beaver builder, paypal there. This goes through this page and to what's going on. You allowed that's using hooks and that's the specific book and the action the foot to before priority can leave basically what their priority is.
Let's say you had three or four or more than one custom layout and you're using that hook there. What you would do is then decide on the priority which one would come first if you wanted this one, if you had a second one in your to this one before that one, you'd make this one nine, and in the next one you'd make 10 and this would display the above that one or before that one. So what that means is, let's say that this was the one you wanted before and you have another one, this one show, and then below that the next one we show if it was using that same hook. So that's what that means. That's how you'd use that. Once again, spacing options need to ebony. Yeah, you can have some space at the top and the bottom as your display rules, etc.
Display an entire website, but jay, you could literally have a display on a specific page or set of pages or all carbs. You'd be very specific on how you wanted this done. You can add display or exclusion rules, for example, don't show on a specific page and then it would be excluded on their page is user roles as well, where you could decide to show it to all users, logged in, users only, only logged out, users, administrators, editors, and so-on and so-forth and customers and so on. Very powerful stuff. Ok, now once we are happy, they're, we'd click update. I'm happy with everything. I'm not going to click update now because I want to edit it and this is where we are actually going to edit what is India now? So I will click launch page builder. Now I can edit this footer with my page.
In this case, people boulder. If you chose elemental, you'd be editing it with elemental and yeah, you can put anything you want our change out my logo. Yeah, so I'm going to click on that. We're going to click on remove to remove the logo. I'll select a photo now go into my media library. Let's have a look at the color there. There is a light color so it's fine for me to have my dog logo. Not much transparent logo. That's one that I choose there, which is my dog logo. That one of the honda. I click on select photo.
Now this photo or this leg or this [inaudible] by one [inaudible]. Yeah, you can set a custom size of one 60 so I can have a little bit more control over the size of my leg. I'm happy with that. [inaudible]. I'm going to leave it as-is, but I'm happy to save now. I've changed doc my logo now, unless I wanted to change out some texture, put on, put a little bit of info back, my store, the article that into any texts that I won't jump, but I'm happy I can save an email. Most socIal buttons or social icons now could change the march as our one. Let's go eat at the first one, but wanted to review anything or just click the little x there on whatever I wanted. If I wanted to change it out, I'll just click on edit social share or maybe with facebook, but they are other optIons and it's an icon or you can put in a fight today.
I'm going to leave it an icon. I'm happy with that. Icon styling. You can change the colors. Yeah, and the hover color and I'll click save and I'd go on editing [inaudible] you now remember this is a sharing back. This is not your store or your businesses. Social media pages. This is if someone wants to share this page or your store to their facebook or their twitter or google plus or pinterest or whatever it is, just keep that in mind. That's why you don't see any links via. Once I'm api, I'll click say, yeah, we've got a menu. Let's see what was done there. This is a woo commerce menu, rather rude comments widget these night talkable, which I'm happy with. You can leave it as is or put a tablet in. Yeah, well let's put a tagline and see what it looks like.
I'm going to say shop. There we go. So their chop and then the order buys. Name chuck product counts. I chose only products I've got in each category. Show hierarchy. If there was a parent child relationships here, in other words, if they were subcategories, children or the current category, ok, that doesn't apply to this. And then audience attributes. I think that's a good thing and that's by the way, sorry I didn't mention is a product categories, WooCommerce widget may. With that, I'm going to click save and then have a look at this menu. Ok. This particular item is a youtube playlist, home shop page, lubricating page about us and contact us page, everything they could edit another art to me if I wanted to put another page in yet optic save. Now, the reason they haven't gone with a menu yet is because this is using the free version of boulder and if you have a look yet on the standard modules, there is no menu item here, so they've used a worker on to get cost that if you want to purchase the paid version or the protrusion of the bubble, the balloons, you can go ahead and then you'll have a lot more options in a way.
Let's, before we do that, let's have a look at this button. You abb baton you offer. I can change the text there. I can put my link in there. It's our wanted them to go to the store. I'll just click select and I'll say, store the results. Let's trust shop. That is the shop that is my shop page or select debt and there is the your out and I'll click save.
Now, if I want to preview this, by the way, in beaver bolder pee on my keyboard to the menu and say, preview liat is my backroom. If you see in the bottom left there, take a look and you'll see our. I'm not going too much shopping to get out of the preview. Other continue editing or pee on my keyboard and it's gone to the last option here. This is an image carousel, but using gallery for a couple of fighters. It's sliding through them as you can see there. That's the size of the photo. Let's go with medium and never look at the quality. Shit improved quite a bit here. We got much better. You can have some spacing, which is not an issue. It's a one column and it's still one column. Put options. Yeah. What happened when you click, if you want to share captions, carousel images to scroll one at a time or tests or autoplay images on scroll, so it will automatically start. Or does somebody have to pick something? This is on autoplay. This is the speed. Fifteen hundred milliseconds, which is one off seconds. Infinite loop, which means it just continues to scroll, lazy load, so
I'll be there at the y so that you can go to this the next day or the previous image or the next image and everything else is very self explanatory. Hobby effect, nothing. You can have an overlay from lyft from rod. We'll slide in from the nieto. Rock bottom or top zoom in or zoom out. Once I maybe I'll click save and once again this is a high-level overview so I'm not going to spend a lot of time on specific settings. This is otherwise a video. It could be like three or four hours long so it's just a quick view like a bird's eye view of what to do, but if you follow everything you'll be able to get your store up and running in no time. Once I'm happy with my photo, which I am going to click done and publish and that is my foot too.
Awesome to have a look to refresh their. That is my full term, I'm happy with it except that you can see that these images are not the same size or rather the scroller grows and shrinks. There's because the image sizes are not consistent, so if you were to use images, yeah, try and make them all the same size and then you won't have that happened, so that's hard to get around that. other than that, I'm happy with everything. Yeah. Now show you a little light on how to edit a specific page and then you'll know how to enter all the pages on your website using beaver builder or elemental of using elemental. This tutorial though, obviously will might incumbency in the mentor at all yet. I think I'm going to bring other elemental tutorial shortly. Anyway. Let's continue. In the customizer is now have a look at our shop page and what options we've got to do that.
I'm going to go to WooCommerce. I'm going to go to my shop page. First of all, we've got to stoner to stay. Anything you put in here and you say enable store notice will be shown site-wide. Let's do that quickly in. See what it does, this demo stores for testing puIPoses only four fold and I can dismiss it and there could be that notice their safety had an issue with your store or it was important. I just wanted to give. You can enable the. I'm going to disable it and I'm going to say publish. Next we look at product catalog. This would be our product catalog, our store page. Do we want to show products or categories or show products and categories on a with show product one and they all need a little bit more information on what an option is. You just have on that lIttle question mark and it will give you more information.
Next category display, so that would be a category. Let's click on the filter and select the category. Or example. Let's go to women's shirts. On women's shirts. Do we want share products or subcategories or show product's subcategories and products. I'm going to leave it on [inaudible] product. I'm happy with the way that looks, and in default, product sorting. This will apply to everything you wanted. A custom ordering and name or popularity. Pardon me, according to sales, every dreading sort by most recent or pop process, sending or so per prosthesis in select what you want, I'm leaving it as is once you're ready to publish and then product images your with your thumb now or your main image with 600,000, over 300. I'm happy with everything there. It's going to a single product and have a look at what it looks like to make sure that cropping very self explanatory.
It looks good. Nothing needs to be changed where I'm happy with the way that it handles images in WooCommerce. If you may change as could publish on going back next, let's look at the layout, layout and woo commerce and let's go to general cell notification default. Let's go back to our store page. First of all that [inaudible] education applies to the sale badge is a default. Then is a custom string nazis sale. I've said a custom string and its value, so it shows you what you're saying is in this case, minus [inaudible] minus 14 percent, minus 12 percent for all art sims that are on sale. I'm going to leave it as is or yes, I'm. Well, let's first change back to default. Can take it off is what if you want while don't see why you went to that. Next, we've got a circle.
In other words, the style is a circle outline, square, square outline. I'm going to leave it at circle. Lack the look of that. Now this is something that I'm very excited about. Your header code icon, which is that our team over there, so you've got options. You can have a default. You can have a coach, you can have a bag, you can have a basket, and in the store we outline in full. So let's change it to, for example, um, let's have a bag. Nets have an account. I'm going to leave border radius at four. Look at the change there. So you've got these kinds of options. Yeah. Let's save that and see what it looks like in action on the front end. That's what it currently looks like from the refresh. And that's what it looks like. We could have the cortical in there.
I'm going to leave it as is. I'm going to click publish, let's move on. Next, we've got shop. We own our shop page styles. We can choose grid view, which is what it's currently set to, or list view. I'm not very fond of list view, but perhaps if we had less products, we've still got for the on our desktop that is desktop view, so let's drop it down to three and see what it looks like or how they could work, but are still preferred grid view. I'm getting back to grid view account at grid view with three columns. Remember now you can change these columns for desktop view. That would be for tablet view. I'm leaving it on three in find view. I'm going to leave it on to hang. Go back to desktop view, so that's how you would do that. Products per page. Very simple one, two, three, four, five, six, seven, eight, nine, 10, 11, 12, 13, 14, 15, 16, 17 and 18. If I've got more than 18 products, it'll paginated to second page in through pageants and opinion on how many products I've got. So you could select the omni product you wanted. Then product image. Hostile, let's hit zoom and fades, zooms and it gets slightly lotted fades. Other options or swap images. Say if you had, for example, more than one product image that could swap out the image for the second image.
It's able to at what that looks like. There we go. You can see it in action. The I'm going to leave it on the zoo, fed, and then we've got display page title. I'm happy with this blank page title display breadcrumb. They as the breadcrumb. I'm a big fan of breadcrumbs, a busy shop on a big trip rather with lots of products, lots of categories. The breadcrumbs makes it easier for your visitors to never get display. Toolbar is the toolbar the yonder. That's for your sorting selected. I'm going to leave it as is and then shop product structure. Now let's have a look at the audio category title writings process, and in this is great opp, which is short description air to caught. Now The first thing I want to do is I want to view it to court. As you can see, there's to quote button here, so I'm going to click on the eye to make the air to code button visible and there's my add to cart button, so let's have a look at the order as you can see the order. Yeah, matches the audi. That joy to cart button, short descriptions grayed out. It's not selected process. The is your cross writings. There's your product ratings, tackle your product title and then your category that your product get degree. I'm happy with where things are there. If I wanted to change the audio or disabled some of these, I would just click on that. It'll our back. nigga wanted the writings disabled. I click on there and the [inaudible] will go away.
In this case I do. You want the writing, so I'm going to make them visible. Now let's say that you want to swap the audio or you do is grab onto something and you drag it. Now the title will be above the category. Now the chocolate is about the kit degree pre-release previously was swapped around. I'm happy with it. Lit ii product styling, content alignment that's left aligned so we could have at the center or right aligned. It's up a little bit about. Looks like center could work as well. In fact, I'm going to leave it on center is an inbox shadow the vets for your particular product.
You can see a box shadow there. Now there it is when there is no box shadow, so let's say that I went through to make that one pixel by the way, so I went through to make the three. That's currently one. When have on it gets more pronounced, thick could work. That doesn't look bad at all. The look of it. I think I'm going to leave it as is and then you'll back out. I don't think I need to change. You inhale on the buttons. Yeah. Mentally the buttons are easy, but you could give it more padding. Yeah. Vertical and horizontal. So vertical and horizontal painting. If you want to fund the buttons on your, your store shop pagination, it's go down to him and look at that. These are pagination currently said to numbers or we could have infinite scroll, so when someone gets to the bottom instead of seeing numbers and they click on a number to go to the next page, they can click on a load more, but now that event to trigger infinite lighting so you can say click, so there's someone has to click the learn more button, or if you say scroll when they get ya automatically, it'll just scroll in, load the new products you prefer.
I'm going to leave it on number four now and then I've got a star yellow circle or square. I'm going to leave it on circle. That's my pagination. Quick view. That's the view. There are love this feature. I think this is a very important feature that will help you to convert more visitors. So our quick view options are on the image, on image, click off the summary. I'm going to leave it on image. Now what happens, you can obviously disable it as well. I wouldn't do that, are really love this feature. So what happens now is if I wanted more information about this product, if I didn't have a quick feedback, I would need to click the product to go to the product. So I leave this page, so I click there or click that, whatever. now I can click the quick view button and it brings up a modal window with information about the product.
And right now this is not. Not a particularly good example because there is no additional information. Yeah. What I can now do is have a look at it, scroll through my images, I would have more texts, zhao, abutment product, and if I'm happy I can air to ottawa instead of having to go to the page. So what it does is it listens resistant to a purchase. It's a very good way to to convert more visitors into actual clients. I'm going to leave it as is. I'm happy with the way that looks. That looks really good. Impact our next features off canvas softball. It could be that feature there that says filter. So off can came the sidebar trigger off canva sidebar. It's with a baton. It could be able to back knee off canvas button, link text, it says full target, change it to whatever [inaudible], so you could, for example, say, let's just say categories.
I'm going to leave it at fault, but this is how you do it. I'll say categories and it'll change their texts to get degrees. Whatever it is makes most sense to what you selling your products. I'm going to leave it at fulton. It's taken effective filter. There's no sidebar with categories selection or filters or anything along those lines. This is an off canvas menu. If I click it, it brings up a off cannabis sidebar and then I can have voltage for process control down to more specific product categories. I can filter by color depending on how my shop is set up, so there's options where visitors can find exactly what they're looking for and when they're happy they can pick the x to get out of that. So what it's done is it's given me a lot more space and it's focusing members is on my product.
Now I'm going to show you how to add new folders or edit these folders that are in here. To edit that you go to your dashboard, you got appearance and widgets now off canvas voters, so we've got product photos, photo products, pardon me, poweIPress fault about price you can put in any hitting you on there. It's on the front end. Just so that we are exactly clear. So these are process sets, the off campus photos, photo, I can change the text there or deleted. And then there's product categories, product categories. That's what title show product count, shahraki children of the current category. That's a useful option. Tevya, and then hard into categories. So let's first look at what it looks like on the front end. That is the product categories. There we are in the shop page that's showing relevant categories. They're ok because we've say we've clicked one show, children of current category.
if we were in a specific category yet and this sub categories that would only show the children. So the options yet would be relevant to what your visitors senior. It's very useful tab and the last but not least, it's full tobaccowala by tobaccowala and the attribute is color or size. Remember it's this is a woo commerce product for two years, so it will be specific to what your particular product is and then the display top his list or drop down map with lists were top or I'm going to leave it on all once. I'm happy if I'm editing changes. Save sets your full tobacco. Yeah, so specifically related to what's going on yet your visitor can select exactly what they want you to click on it to see how it works. Let's say they wanted to go to men's jeans, click on men's jeans. Now I'm at the men's jeans page.
I could of course do executive the same thing and go somewhere else if I wanted to. Now I'm in purses and handbags, so that's how that works. Quite simple and then our shop, our content with that is the actual width of your store or maybe with the default. You could also have a custom with the bleeding in as-is. Once I'm finished with was hitting, so I'm happy after click publish and we are done. Let's move on. Single product, let's go to a single product and have a look. I'm going To go to the blue jeans, basically jeans. Now my gallery lab, the option number one is a vertical that would be there. It's vertical or horizontal at the bottom. Yeah. We'll just select horizontal. I'm happy with vertical image with 65 percent, so that would be the word thea. It's play around with it and see what it does.
Now it's on 40 percent. There we go. Ok, so it's made the image smaller. I'm going to get back to 65 percent. I'm happy with the way that it is that. There we go. Ok, so back to where it is. I'm happy with it. Going to leave it as is disabled breadcrumbs that's been disabled on this page. We've still got them over. They. I'm happy with a bread crumbs in the header as is. And then single product structure, very similar to the shop page title, which is our taco writings. These no ratings on this. That's not changing our process, our process. Short scription yeah, we've got that. They add to cart back and very important obviously in your meter, which be your category itself. If you wanted anything not to share, you click on the I. You want to rearrange the order, you will just drag it to where you wanted. I'm happy with everything the way that it is and then enable agents air to caught our lack this function, so what happens is we're not clicking obligated to court and I refresh the page or the page doesn't reload em. Everything happens. Rodney, and then enable image zoom effect. There we go and win a ticket at zooms.
I'm happy with it. Product navigation. Yeah, we can disable it. Circle, circle, outline, square and square outline. That would be that little button over there. Now I would say play around with this. Have a look at what it looks like and you can either disable it or they are your options. I'm going to leave it as is for now. Product description, [inaudible]. There could be these temps, yo [inaudible] vertical. We could have it horizontal as well. The vertigo when they leave it as is, but that's what horizontal looks like. It's going back to ventricle next week. Got related and sell products, display related products. Most definitely split up sells years columns for. We've only got three related products. That's why we only got three days and you can see by the way that effect in action there are really like the look of that. It's clean, but it's really looks good.
Um, number of related products for maximum or not for electric products such as three. I'm going to leave it on auto. I'm happy with it. As is when I'm finished, I click publish. Let us continue beyond. Now on cod page enabled [inaudible]. I'm going to leave it on enabled upsells checkout page. Ok, let's go to a checkout page to see what we are up to you. Let us add something to cart. I'm going to view caught as you can see that there's more cross and I've one autoimmune marcotte. Ok? I'm going to first of all proceed to check out to view the page. This is very clean, very crisp, lock it, it's simple. Now let's have a look at what we've got ya. Yeah. We've got a one page checkout. We've got to option four to two step checkout on one page checkout. We can inter coupon code into details yet and we can place our order is a little summary snapshot of our water and we will take place.
Order not. Don't worry about that. We just haven't set up our commerce on the back end. That's why that's not true, but I could literally place my order right now. This is a one-step checkout. If we click on two-step checkup, it'll break this price this into two steps. As you can see, step one and step two. This is a little simpler in. Could help with your conclusions. I would say test it for a month on each and see which is more effective, but what happens? Yeah, you'll visit tool on step one which is billing details. You'll visitable into the billing details there and then they'll proceed to payment. So let me add a few things in here and let's proceed to payment.
Now can review my order and I can play smart order and that's the thinking. Beyond that, it's got back well, let's leave it on auto pay checkout for now. Now, display order note. If I select that now and display what are nights, it'll leave a little note box here. Put my visit. All my customer are the two top, you know, custom night display coupon field. Someone has a coupon where they can add the coupon, the. If you went to a discount coupons to your sato offer, discount coupons, that distraction free checkout. What that does is it moves a little bit of plataea on the page to help your visit to concentrate or focus more on a cell so it should our conversions. It's kicked on that and see what it looks like and that's my distraction checkup mean you've gone focusing mothers to on actually completing this transaction.
I'm gOing to de-select it, but by all means tested maybe for a month with and without distraction free and see if it helps your conversions. But does barlean's go with what works? Use labels as place holders. Now, currently there's no labels in the placeholders. You can see that the label is above the box. It's a this use labels as placeholders and see what that does. That's really neat. Now, so what happens is my label is in the box as a placeholder, so I'll tuck my name. They learn. Ok? The last thing about that is once you've got information and yet the placeholder shows at the top, so gives you context about each box. I think this is very useful. Our lock and I'm going to leave it as is a persistent form check data. Let's hop on you and see what data is retained, the checkout form fields, even if the visit to exit into your, to the checkout page so it'll keep all the information. If someone were to file for some reason why the reload this page, I'll leave it as is unchecked checkout for with these default in these accustomed so you could have this as a default with or you could have it as a customer with and tweak it to your liking. Ok, that's our checkout page. Or click publish first of all, and that is our checkout page. Done. Yeah. There's a couple more little things that I want to do. Let's go to the homepage.
Visual scrawled to call. Scroll to top by our gut allowed to edit that and scroll to the top. I cAn display it on desktop and mobile or desktop. I nema. I'm going to leave it on desktop and mobile for now. I can have it at the rod or can I have it on the lift to. In other words, I could ever there on the left. Now this is very useful to have this kind of control. Let's say that you are using a live chat function on your website. Now, very often a large check will be on the rotting inside and I've seen many live chats and they don't give you the option to move it to the safety of your live church yet the scrawled to top button. We definitely cover the live chat or vice versa. So yeah, with Australia having these options, you could just move this to the lift in the area is so you could have your live chat on this side and you scroll to the top on that side are called to top button, especially on longer landing pages.
Makes it very useful. Then yeah, you could have the icon size outgrown our combat ground radius. In other words, let's say I went through making it around, I could probably make and I think [inaudible], let's make a [inaudible] that you'd they we go and now it's rounds. You've got there kind of control you and then you could have a color. The icon icon, background color icon, have a color when you hover on it, and then the icon, the background color. I'm going to leave it as is, except I will leave a clue around when I'm happy. I'll click publish and those are the settings and change that I want to make. Now let's go have a look at the front end. Again, I'm happy with most all the way that it is quite happy with the functionality.
What I want to do now is show you how to edit pages. Now, this would not be the shop page. We've edited all the shop elements in the customizer. This will be, for example, for the home page of the lookbook, [inaudible] page, the about page, the contact us page. Let's look at our. We do that little bit of time page as an example. what I'll do is I'll click on the page builder to bring up a page builder. This is, we will edit and make changes to the homepage and all the other pages, and this is our edited in beaver builder. The first thing that I want to do is change out this background. To do that, click on the settings icon. It'll bring up my settings. Yeah. Now what I'm going to do is I'm going to dock verse on [inaudible]. On the side are conducted on the inside, you see that it lights up the walk and docket on this side are preferred on the right, so I'm just going to bang it into the side d and the docs not won't be over my content and harder, so that's a nice way to do that.
So first thing we want to do is change out the row background image. Now we will really clicked on the row back row settings icon and it's brought up the race sittings. What we'll do. Yeah, scroll down. Now we've got all kinds of options. Yeah. This is not an in-depth thievable the tutorial. This is a high level overview of how to get extra up and running with a pro version. What are they induce? Just show you a couple of quick options. You've got the type of background currently say fighter fighter. You can have a color, you can have a video or you can even have a gradient, but I'm going to do you say remove to remove this image and then I will go and select photo and select a photo of my choice and I'm not going to do it. In this case I'm going to leave it as is, but that's how would do select the photo and say select photo and then that's our change up my 30. Yeah. Not to edit actual elements or click on the element itself. This is using an infobox module.
There's my winter. The hitting is my title and they he saw change on whatever I want. You can tweak it to my heart's content, cha. When I'm happy I click save. In fact, I need to get that link so click on it again and then I'll click on link. I can have a button here. I can have text and make the complete box clickable so it's all what tricks on anywhere there that it'll be. It'll go there. I'm going to leave it on, but now he's my text view collection. At the moment. This is not dying any way I want this to go to my store, so I would send them directly to my store. What I'll do is click select and click shop.
My shop page selected and there is your help, so if I click on p to preview, if you check the bottom left there when I hover on it and it's going to my shop, not p to continue editing, all the continue editing back in debt, I'm going to leave everything else as is mistook the next row. These all columns in it them in a very similar way. It's edit. This column are first of all, I will click on the icon there and then I'll say column settings, yo my column settings. Currently it's [inaudible] would know. This is a nice that column there too. I'm getting a 50 percent with ya. I won't get into detail on that. Now I'm just going to edit it. I would remove the image in head, a new image. That would be a background image. As you can see, a photo and I changing are exactly the same principle we just did on the above and when I'm happy I'll click save and then I want to edit that title there that, but a mock up is just to break that into two.
In other words, woman's collection. There's a break there. Woman's and collection. There's a break between the two. When I'm happy I click save. I'll do the same thing for men's collection. Same thing for new collection. I'll swap it out chart and then let's have a look here and our link. We need to change out that link as well. On the infobox. This free shipping on all orders are can change that up wherever I want and it's got a link. That's a baton view collection. Now where do I want this to go? Let's say for example the looks like men's shoes or men's apparel or something, so let's go over a look at what we want to do that it's got our front of our store and see where we want to send them. So let's have a look at where we want to send them photos.
Mean shoes and there's the your out for my main shoes, so I'm just going to copy that url and then in the link I'm going to put it in there and I'm going to take save preview, which is p on my keyboard at the bottom there. I'm going to the product category and choose mean in my store to pee again to get out of the preview will continue editing and that's how to do that. Just go on to the next row. Exactly the same thing in to change on whatever you want. Now this, yeah is an image. It's not a background image. We've got a background image there and then we've got an image here in this actual column, so we'll click on the image itself, we will remove it and we'll edit to edit that background. We'll just go do that oc on me for the row and then we'll change out their sites are there for something else and I just want to mention something.
yeah, this is a small little image. It's 15 by 15. Let's hit on repeat the tall. So in other words, a small union to just. Paul's a center position and it scrolls and these no skating, so that's how that was done at city towel. Keep that in mind when are maybe acting save, and that's my row next. We've got a beautiful product grid area on our featured products row. It's. Yeah, this was done. First of all, it's click on the element. Yeah. This is a short card. We need to make this a bit bigger so we can see what's going on now. Ok. They've used the short code. You have featured products with four columns and the limit is eight. So what this is doing in woo commerce, let's go to the back end in car. They got this in the back end under products. It's got to all products, all products that have got that star on those. A featured product. So what do you do to feature your product? is clicked the star and it becomes blue. So that is a feature product. So what they've done? Yeah. Were there particular short code is they said featured products in four columns and the limit is eight. So maximum of one, two, three, four, five, six, seven, eight. And there till they get there that you could make a three columns about just putting in a three there.
It's do that quickly. Now, keep in mind that if you make their limited eight, he gained to have a little bit of an issue, then it save it. First of all, I would have to make their non. If I've got three columns so that look good. We've met at eight, so 23, four, five, six, seven, eight. So this click on it to edit it. So you need to make that nine or six for example, and you want or [inaudible] opinion on the product you've got. I'm going To leave it on for an eight. I'm happy with the. They have active click on save and it'll refresh that data. That was done. Very simple. remember, this is a high level overview. I'll bring out another video with a more detail detail options on how to drill down and get the settings exactly the way you want them.
Next we'll do feature products. The heading, you'd click there to change it. It's changed one of these express delivery. there's the texts, there's my heading, and then it's got an image or an icon which will be there. That'll go over there or click on image or icon there, and then to replace it or remove it, you could remove it or replace it. We simply click on there and then we could go and select whatever we want and when we finished, we selected. I'm going to cancel. I'm happy with that. It'll track and in the background style is simple circles, square design, your own. You could go crazier and you could have the Arkansas is bigger or smaller or leap. All as is. You could change the color. Yeah. Now, let me show you a little trickier in but boulder. Let's say that I wanted there to be, for example, my orange color.
Now I could just go and first of all, select a color there I have, I wanted gun. Select the color. What I'm going to do is tapping my color. That is my orange color. Now are don't want to type in my orange color every single time, so what I can do is add this as a color preset. To do that, I'll just keep that plus button there and now it's been added as a preset, my particular color, so let's say that I want to select that color, just kind of preset and then my colleagues so I can just click that button and select the same color each and every time. Ok, I'm don't want to our engine, in this case, I like that gray color, so I'm going to say cancel and it's going to revert back to the way that it was, but that's how you change it. If you wanted to, let's say you wanted to change the background color, they you'll just click on that spinner. There is the color. You could go and change this to whatever you want the background and when you have pick, click save. In this case I'm going to leave it as is. I'm going to cancel and that is it. That is how you edit a page and beaver builder. once I'm happy I click done and publish.
Now to reiterate the pages that are created with beaver builder on this particular bolt is my homepage, my lookbook, 18 page, my about us. Contact us, the shop is not using beaver builder page poll that was done in the customizer, so keep that in mind. You'll edit those pages with the page builder and the shop. You're editing the customizer. One last thing I think we need to do is to look at our foot to. Yeah, we'll do that in the customizer. It's not 14. The customer auto layout footer. It's called done inevitable with what we've got there. Now if we were using the footer widgets, we would click on the footer widgets, but we're not using the foot to widgets. We are using the page builder and the custom layouts to hook the senior. If you remember previously I showed you that, so yeah, the photo we just saw disabled, but you could edit the foot to widgets.
Yeah, so that for now we'll leave it as is to end if my foot when I click on football, it's currently say to a sidebar sod which saw assad. Yeah, we've got a section one, section one. We get to section two, which is that they buy fsc to custom text and you can edit this to what you want. I'll show you how to do that. Now you could, for example, putting a foot to main yang select footer menu. Now I need to sign the menu. You my dashboard and appearance and main use. That would be my foot to menu. So I would say creating humane. You give more mania, name, create menu and putting anything on wanted yet. So pages, particular posts, custom links, categories, whatever I wanted. So let's say for example, let's just put a page in your. For what it's worth. Let's say we wanted caught and checkout in. Yeah, in maybe shop, I'd say add to menu, I would say footer menu, and I'll say save menu. So those are the three items.
I could rearrange his order, the audio, just by dragging saved my menu. They need the customiza up selected foot to menu. If I save it now publish a drama and go refresh it on the front end, the front end, they is my menu of assigned this case. I wanted like that. So I'm going to remove it, but that's how you would do that. So I'm going to sell what my customer takes. I'm going to leave it as is, so it's got my copyright notice in a copyright notice current year, which is the current year, so short code and in the credits, so I'm going to put my store. Your alinia. You can put anything you want. Job. This is why I'm going to do list guys, dema account, and I'm going to call my store name, which is demo account. Now let's say your store was, for example, a diy store.
You'd produce store. Yeah. Well let's actually just going to put this story so that it's not confusing, but are using these store or.com, and this is clear, my apologies if it is unclear. I was just using dema dessa counter [inaudible] is the as an example, but they. That's how diy store in there. That was your store, your l and then on section two also custom text title. My title that I made was if you remember was e-commerce with word press in minutes, but to change your site title, you can either leave that there and go change your site on the back end like I showed you previously, or you could just. Nina, entirely up to you. I'm going to leave it as is and then football with content with which lines up nasca. Yeah. Walker could have a full width which would push it all the way to the site. I'm going to leave it on content and then foot to top football. Top border. Apologies. It's one pixel county. That little line over there. I could change the color, make two pixels or three pixels to make a thicker. I could make it zero. Remove completely. So you've got that kind of option. Will control the one-time maybe with every article publish and that is my football's done. Our refresher to make sure everything's right.
Yes. Smart football is correct. I am happy with it also, and that's of a website with an ecommerce tool using WordPress and estrogen in minutes. You made it to ended up video. Congratulations and thank you. I've enjoyed this bolt as much as I did. I'll have links to all the tools use in the description below. If you liked this video and found it useful, please do subscribe to my channel. Please give me a lot as well, and then of course then forgetting that notification bell and you'll be notified each time I upload new videos, a marathon from web assist that x, y, zed, where ecommerce websites. Have a good day. See you soon. Bye for now.
Share this article