This is a text tutorial that will walk you through the steps needed in order to set up a wordpress website and create an ecommerce website with WordPress. If you want an easy to follow tutorial on how to make an online store with WordPress, this will guide you, along with our video tutorials that show you everything step by step.
Resources
- Hostinger (hosting option – recommended) – https://nyctechclub.com/hostinger
- Flatsome theme – https://nyctechclub.com/flatsome
- Elementor Pro – https://nyctechclub.com/elementor
- Other Premium themes – https://nyctechclub.com/themeforest
Other hosting service providers
- Hostgator (hosting provider) – https://nyctechclub.com/hostgator
- Siteground (hosting provider) – https://nyctechclub.com/siteground
Getting Hosting and a Domain
- The first thing you need to do is get a domain set up. The site we recommend is an affiliate partner: Hostinger for Hosting and WordPress
- From there, choose the plan that’s best for you.
- I usually recommend the premium plan if you are just building one website.
- You can always upgrade later
- After you get your hosting, you’ll get a screen to create a new wordpress website
- Just go through the steps
- Create a new website
- Select any type of website that fits what you are making
- No need to install a theme or template
- Skip the plugin installation
- And find the domain that you want for your website
- Then let everything install
Once the website is installed with WordPress, click on the control panel to go to the hostinger dashboard
WordPress Dashboard
From the hostinger dashboard, you can click on the admin panel to go to the WordPress dashboard.
You should be redirected to the wordpress dashboard and this is where you can go to create all your pages, posts, upload images/media, and customize your entire ecommerce website with wordpress.
The first thing we can do is go to our wordpress settings to make sure everything is set up correctly.
Hover over settings > click on general
- This is where you can change the site title
- And also the email address associated with your ecommerce website for wordpress
- Click save when you’re done
Hover over settings > click on permalinks
- Change the URL structure to post name option
- Click save when you’re done
After the wordpress website settings, we can go to the theme settings
Hover over appearance > click on customize
- This is where you can go to change the layout options, the colors, the font style, and the page/posts/shop/product page layouts.
- The video tutorials walk through this in more detail but feel free to play around and change things and see how it looks on the preview screen
- Click save if you make changes and want to keep them
Customize Homepage
- To go to the homepage you can go to the wordpress website dashboard
- Hover over pages
- Click on all pages
- Find the homepage
- It should be set as the front page
- Click on edit
- To turn on the elementor page builder click on edit with elementor
- This will bring you to the elementor page builder where you can edit and customize your website using the builder
- The elementor page builder is pretty straight forward
- Just click on different sections to edit the modules
- You can click and drag in whatever modules you want for your ecommerce website
- In each module there will be tables for you to customize things such as the layout, design, and the advance spacing/colors options
- Click save on the lower bottom whenever you make changes
Integrate WooCommerce
- To have an ecommerce website we need to integrate with woocommerce to set up payment options and shipping information
- Go to the wordpress dashboard > hover over woocommerce > click on settings
- Go through the tabs to set up the settings
- You will need to add a plugin for PayPal payments. The one I like to use is PayPal for woocommerce
- Once you integrate it, it will redirect you back to the wordpress website to the payment settings
- Go through the payment settings to change where you want paypal to show up and what color buttons to use
- Click save
Create Single Product
To create a new product, hover over products, click on add new
This is where you go to put in the product information
- Title
- Long description
- Product price and other information
- Short description
- The image and category name and tags are on the right hand side
- You can also create a featured image if you click on visibility at the top near the publish/update button
- Check the featured product box
- Click publish once youre done!
Create Variable Product
- Creating a variable product is very similar to a single product
- The only difference is that you add variables (go figure 🙂 !)
- To add variables
- In the product data section, select variables
- From here, just go to attributes tab and type in the variables and the options
- Then save
- Go to the variations tab and click to add manually if you only have one price and then expand the section to type in the price and product information
- Click save
- And everything from the single product section above remains the same.
- And there you go 🙂
Customize About Page
- Customizing the about page is similar to the homepage
- Just go to your pages list
- Turn on the elementor page builder
- And customize away!
Customize Contact Page
- To customize the contact page just go edit it and you can do the same with the elementor page builder as the other pages
- The only difference here is you will have a contact form that you can add or remove
- To customize the contact form, you will need to go to your WordPress dashboard
- Click on WP Forms
- And click on the form you want to edit
- Once you save it, there will be short code you can copy and paste into your pages for your online store, or you can try to select the form if the module allows you to.
- You will see what you can do once you go back to the contact page and see how the contact form is inserted.
Create Blog Posts
- To create blog posts just go to the wordpress dashboard of your website and you will see the posts tab
- From there just click on add new
- And you can type your post
- Insert images or other content
- A featured image is possible to upload on the right hand side
- Click publish when finished!
Create Header Menu
- To customize the header menu, just go to the wordpress dashboard
- Hover over appearance and click on menus
- You can edit the menus or even create a new one
- Drag or select whatever pages or links you want to add
- Select header menu and other display locations if you wish
- Click save when done
- Now your header menu on your wordpress ecommerce website should show up
This is all you need to do to get an ecommerce website up and running! And with this tutorial you should also be able to make an ecommerce website with wordpress or an online store.
Make sure to check out the resources at the top of the page for more help!