In this video, we’ll be showing you how to make an ecommerce website using the Astra Theme an WordPress.
This is going to be a super easy and fun tutorial that let’s you learn how to use wordpress while also building a really professional online store.
The steps below are the same as the video on our youtube channel. And links may be affiliate links to other services or products where we get a fee if you use our link. Thank you in advance.
IMPORTANT! If you need Hosting and Domain use this link to go to hostinger our top recommended resource for hosting and domains.
We have other links as well if you want in the resources section.
Step 1: Domain and Hosting
Go to Hostinger to register your domain and hosting
Step 2: Activate SSL Certificate
Just with a simple click or two. The video has everything you need. If we have to install a plugin, we’ll do that together.
Step 3: Install WordPress
easy so not going to type out too much here. Just watch the video 🙂
Step 4: Install Theme
We are going to use the very popular free version of the ASTRA Theme. You can get it using the link here for Astra.
Once you download the theme, let’s go back to the wordpress dashboard and install it.
Once it is installed, feel free to check it out.
Step 5: Setting Your Website Up
- Now click on the get started button at the top of the website
- Select Elementor Pagebuilder (its the best in my opinion)
- Now just choose a starter template that you like
Step 6: Settings
Now we have the website set up, and we’re going to customize it in a bit. But first I want to go through our settings.
We’ll cover website settings and woocommerce settings
First lets go to the general settings to fix our site title, sub headline, website url and default pages
Now to Woocommerce
- Put in your address in the first tab
- Change the dimensions in your second
- Turn on taxes on the third
- Add shipping zones in the fourth
- Add your payment options in the payment tab
- Check boxes to turn on creating an account in the account tab and make sure to update your privacy policy!
- Emails tab is to change your email notification settings
- Integration – nothing to do here
- Advance tab – set terms and condition page and other pages
Step 7: Theme Settings for Layout
Appearance > Customize
Step 8: Images, Pages and Posts
Just a tour of the wordpress back end to show you how to do some stuff.
Here are some demo images if you want to use them. They don’t match the website that well but will give you a good idea of how to use images and upload them to your online store.
Step 9: Using Elementor – Homepage
In this section, we show you how to the elementor pagebuilder to edit and add different sections.
The template is beautiful, so we will not have to customize it too much, but you will be able to!
- Tour of the pagebuilder
- Edit Slider Background Image / Color
- Spacing (padding and margin)
- Adding/Editing Text (formatting and spacing)
- Edit Images
- Edit Buttons
- Product section (to be done after this section)
- Parallax Scroll Sections
- Add new section
- Icon boxes
- Logo carousel
- Testimonial section
- New products section with short code
- Contact form integration
Now that we know how to use the elementor page builder, you can customize your homepage if you want. But I think it looks pretty good!
Step 10: Learn how to Create Products with Woocommerce
Go to the dashboard and click add products
There are different types of products we can make
- Single products
- Variable products
- Affiliate products
- Digital products
We cover them all once here. You can always rewatch this section.
Step 11: Blog posts
Just here to show you how to make some blog posts and add featured images. We’ll also talk about changing your username for the author and also how you can change your password for security purposes.
Step 12: About Page
Here we just remind you how to use the elementor pagebuilder to move things around and customize your ecommerce website.
Step 13: Testimonials Page
Now lets go over the testimonial page. Similar to the other pages, all we have to do is make some customizations with the elementor page builder.
Step 13: Contact Page
Before we talk about the contact page, I want to cover the contact form so we will do that using WPForms.
Then we will go over customizing the contact page. Really easy, just again, use the builder to customize it so your customers can reach out to you with questions.
Step 14: Header
Dashboard > Appearance > Menu
Make sure you set the menu as header
Step 15: Footer
Dashboard > Appearance > Menu
Make sure you set the menu as footer
Congratulations!
You just learned how to make your own ecommerce website with wordpress.
If you want to upgrade to the pro version of the Astra theme you can do so, using this link.
I hope you enjoyed this wordpress tutorial!
Make sure to give the video a thumbs up, a comment and subscribe and turn on your notifications.
If you need more help, let me know!
Cheers and see you next time!