The Setup
Hello everybody, it’s Patrick from Woogo Stores – In this video series, we’re going to explore how to set up a fully functional shop using WordPress and WooCommerce. If you’re migrating from another host, this is probably not necessary for you, but you could still learn a few tricks. I will purposely only use free plugins for this series to show you how far we can go. Let’s dive in!
Here is a fresh installation of WordPress on my machine – let’s go to the backend to install WooCommerce.
I’ve downloaded WooCommerce – but do so if you haven’t already. Then activate it as you would any plugin. It will bring you to the setup wizard automatically.
The setup itself is pretty straightforward. Enter your address and click next. It will ask you several questions that look more for analytics and upsells than helping you, so your discretion is advised here. Keep in mind if you’re looking to sell subscriptions, you’ll need to buy an add-on.
Next, we are choosing the storefront theme for the demo products that are included. However, we will not stick with it as it’s too limited in its customization options out of the box.
I choose not to go forward with Jetpack as it vacuums many data to Automatic, the makers of WordPress.
Ok great! Now let’s go directly to the appearance menu to install the demo products that come with Storefront. Click on Let’s GO on this blue banner. It will bring you to the WordPress customizer. You can take the guided tour if you want, but we’ll skip it for now. Click publish and exit the customizer – Now it’s time to install Astra’s theme, which we will use for the rest of this series.
Click on Appearance> Theme > add new at the top. Type in Astra, then click install and activate. Great! Let’s customize the Appearance of our store.
The typography
As you can see, out of the box, it’s not looking incredibly awesome! So let’s fix that. First, let’s change the typography. Click “Global” and then “Typography”. Astra supports all google fonts out of the box, so you will likely find your brand’s fitting. I’m choosing Roboto for the body of our texts.
There are several options you can play with, know that Astra Pro adds a ton of customization options for only 49$ a year. It blends in performance, mobile responsiveness and great customization. We’re not sponsored by Astra at all. It’s just the best theme we found after hours of research for our customers.
Then I’m choosing “Comfortaa” for the headings, as that’s what we’re doing at Woogo Stores. Astra gives you the ability to have different fonts for the different heading sizes, but we like to keep it consistent.
The Colours
It’s now time to change colours! Astra supports a base theme colour, which is the primary colour of your brand and will affect link backgrounds. As you may have noticed, the links had the same blue colour by default, so we’ll change that for the same green as well.
We’re not changing the heading colour from the text colour, but you could with the option below – same with the background.
The Container
Next up are the container options. By default, it’s TWELVE HUNDRED pixels in width, which is sufficient for most modern screens, so we’re not going to touch that. Then I like the layout to be full width, contained as it’s more modern and gives more flexibility on the page layout. We’ll go over the other various page layouts and design in the next episode, so make sure to subscribe! You’ll notice that the grey background is no longer visible as the container takes the whole page, which is fine.
The Sidebar
Next, let’s take care of that ugly sidebar! not very appropriate – especially for the landing page. We have to go into the Sidebar menu, default layout and select “No sidebar.” Now you’ll notice that since we chose the Full-width layout, the cover page is stretching the entire width, which is perfect for achieving those Hero landing effects.
However, we probably want a sidebar in the shop section for the categories of products. We’ll use it to add various widgets such as price and attribute filters. To achieve that, select “Right or left sidebar” in the WooCommerce section of the customizer. You can also add a sidebar on the single product page if you want. However, we do not recommend that approach as it might distract a potential buyer who’s showing interest in a possible purchase. It’s critical to get as much of the way as possible and let them add it to their cart or create an opportunity for an upsell. We’ll go over that in a future episode.
The Footer
Next, we can explore the footer section. Astra allows you to remove the footer bar entirely, if you want, or change its layout. I like having text on the left for the copyright notice and a widget on the right, typically for social media links. But you can see that Astra gives you several options out of the box already. We’ll cover that in more detail in the next episode.
You can, of course, adjust the footer’s width, which will keep at content width and finally change the colour of the text or the background.
The footer widget section allows you to create an area above the footer bar reserved for, you guessed it, widgets! Astra comes with a section with four widgets by default. The Pro version has a bunch of different layouts available. Here too you can change the other colours if you want. I like having darker footers, so I’m leaving the default colours.
We’ll go over widgets in more detail in a future episode, but they are essentially a small bit of code that you can place in widget-holders such as sidebars. Your theme defines where you are allowed to place them.
Here I’m selecting many different premade-widgets to fill up space, but I’ll probably change that up later on.
The Logo
Now is probably a good time to worry about our logo and site identity! Go back to the customizer’s main menu, click “Global” and “Site identity.”
Ideally, if you can, upload your logo in the SVG format. SVG is fantastic for logos because they are tiny in size and scale indefinitely. Hence, you never have to worry about the logo looking pixelated on high-quality screens or phones. WordPress doesn’t allow by default, but this plugin, SafeSVG, allows the media library to upload SVGs. I’ll use a png for this demo, which is more broadly available. Make sure to get a high-resolution version if you can!
Thankfully you can scale down the high resolution with the slider called “logo width.” You can also have a different version of your logo when the site loads on mobile. It might be convenient for you if your logo takes up too much vertical space otherwise.
The favicon
Next up is the site icon, used in the browser tab and bookmarks. Make sure it’s SQUARE and at least 512 by 512. You have a little preview here on the right of what it’s going to look like.
Then I’m going to remove the site title, as it’s in my logo. Astra has an option to keep the name inline you need it. You can also add the tagline, change the typography and colours if you so desire.
The Shopping Cart
Finally, we’re missing one last critical item on any e-commerce website, the cart in the top right corner! Go back to the Header section, Primary menu. THen in the “Last item in menu” option, select “WooCommerce.”
Tadam! It added the little shopping cart on the top right corner.
I’ll quickly mention that if you want a transparent header, Astra supports that in the free plugin, but a sticky header, multiple headers and subheaders are part of the Pro offering.
That’s it! Make sure you press publish to save all your changes!
What’s next?
In the next episode, we’ll go over widgets in more detail and page design, like getting rid of that “homepage” title on the homepage. I’ll introduce you to a couple of high-quality free plugins to design pages easily.
If you liked the video, please leave a like and consider subscribing to be alerted of this series’s next installment. If you have any comments or questions, please leave them below. I’ll be happy to answer them!
Be safe and take care!
