Create E-Commerce Website Using WordPress

An E-Commerce website is a place where you can sell your products & receive money from your customers online. If you have an E-Commerce website, you will have a shop on the web which helps you to sell your products to a larger audience & in turn, helps you earn money and make profits 24*7.

But creating an E-Commerce website can be a daunting task for absolute beginners.

What if we say you can create your own Ecommerce website using WordPress, that too without any coding?

Well, by the end of the article, you will be able to create a WordPress E-Commerce website where you can sell your products, & your customers will be able to add those products to the cart & pay from your website.

E-commerce website using WordPress

Aren’t you excited to create your own WordPress E-Commerce website?

So, Let’s get started!!

We’re going to create an E-Commerce website using WordPress in just 4 parts:

Part 1: Launching Your Website

Part 2: Start Building Your Website

Part 3: Developing your E-Commerce Site’s Functionality

Part 4: Changing The Look Of Your Website

Steps to create an E-Commerce website using WordPress

Part 1: Launching Your Website

Launching your website refers to creating your website & making your website live on the internet.

We’re going to launch your website in just 3 steps.

Step 1: Choosing A Domain Name For Your Website

The domain is the address of your website, it helps your customers to come to your website easily by simply entering your domain in the search engine.

Once you’ve chosen a name, go to https://websitelearners.com/video/make-an-ecommerce-website/ & check whether your domain name is available or not.

image 1

If your domain is available proceed to the next step or else try choosing other names.

Step 2: Getting Hosting & Domain

Hosting is the place where you will store all files that are related to your website.

Go to https://websitelearners.com/video/make-an-ecommerce-website/, scroll down to step 2, and click Get Hosting & free Domain.

image 2

You will be navigated to the GoDaddy website where you can buy domain & hosting. GoDaddy offers a variety of plans that suits the needs of everyone, from an individual to a full-featured E-Commerce store. Choose a plan that meets your requirements, and then click Add to Cart.

GoDaddy Plans 1

You will be asked to select the term length for your online store. Term length is how long your website will be live on the Internet. Choose a term length of your choice & click Continue.

GoDaddy Term length

You will then be taken to the domain section where you need to enter the name that you’ve chosen in the previous step & click Submit.

GoDaddy Domain

Enter your payment information on this page & make payment to get the domain & hosting.

GoDaddy Payment

Upon successful payment, you will be receiving a verification email from GoDaddy where you need to verify your email address to activate your account. Open your email & click the link provided in the email & then click verify mail.

As you’ve bought domain & hosting, you’re just one step away to launch your website.

Step 3: Installing WordPress

As said above, we’re going to install WordPress on your site. Installing WordPress is so simple.  

Install WordPress by clicking on Add Site.

Set up your WordPress account by providing your Username & password here. You need to enter these details every time you log in to your site. Click Add after you’ve entered these details.

Screenshot 718

You can see that WordPress is successfully installed on your Website which means that your website is live now.

WordPress installed

Check your website by entering your website address in the browser.

image 7

Hurray!! You’ve created your first website & launched it on the web.

What are you waiting for? Let’s build your website into a fully functional E-commerce website.

Part 2: Start Building Your E-commerce Site

You can build your E-commerce site from scratch in just 2 simple steps.

You’re going to import a sample e-commerce site & you will edit it as per your requirements. So, let’s start by logging in to your website.

Step 1: Logging in to your website

To login to your website, type “/login” after your website address.

image 8

It will take you to the login page of your site. Now, enter the login details that you’ve created while installing WordPress & click Login.

login page

You will be taken to the WordPress admin dashboard. The dashboard is the control center of your website where you can customize your website.

After you’ve successfully logged in, proceed to the next step where we import and edit the sample sites.

Step 2: Installing a theme & choosing a sample site

A theme is a collection of files, templates & CSS style sheets that help in designing the front-end(looks) of our website. Simply, the theme helps you design your site without coding.

You need to install the Astra theme as it helps you to import the sample sites.

To install a theme, go to Appearance & click Themes.

image 9 1

Click Add New Theme.

image 9

Search for Astra in the themes library. Once the Astra theme is displayed on the search results, click install & activate it.

Astra

Now, click Get Started to choose a sample site from the sample sites library.

image 10

It will take you to the Select Page Builder page. Choose Elementor from the list. Elementor is a drag & drop page builder that helps you build your website’s pages easily.

image 11

You will be taken to the collection of sample sites page where you can find a variety of website designs. You can choose any website that you like to import for your website.

To import an e-commerce website click on All & choose e-commerce. This will help you choose only e-commerce website designs.

image 12

Click on a site that you like & it will give you a preview of how your site looks. Click on Import Complete Site to change your site like the sample site.

Now select all options & click import.

After the sample site is successfully imported click on view site to see your website’s new look.

image 13

Now, let’s check how your site works. Click on a product & add it to the cart. Click on View Cart to see the items you’ve added & now you are able to proceed to checkout.

So, your site is a fully functional WordPress e-commerce website. Now, let’s go to the next part where you can develop your site’s functionality.

Part 3: Developing Your E-commerce Website

Have you seen your store? Is it full of sample products? And currency? Is it not like yours?

Don’t worry we will set up all those things in this part.

So, we’re going to do this in 4 steps.

Step 1: Delete The Sample Products

To delete the products, go to your dashboard & click on Products.

image 14

It will take you to the product section where you can see all the products that are listed in your store. As you want to delete all of them, select all & choose Move to Trash from the menu & then click apply.

Once you’ve clicked apply, all your sample products get deleted. Check your store by refreshing it once.

image 15

Now, as you deleted the sample products, let’s see how you can add new products.

Step 2: Adding A New product

Adding a product to your website is a simple process. Click Add New in the products section.

Here, you need to enter your product’s name, it’s price & a little description about the product.

Product name

Having an image for a product helps your customers see the product before purchasing it. So, you need to add a product image. To add an image for your product, click Set Product Image & drag your image here.

Image

Once you’ve added all these details, click publish to add the product to your store.

image 17

As you’ve added the product to your store, you can verify that by refreshing your store.

image 18

As you can see that the product had been added. If you want to add some other products, repeat the same process.

Step 3: Changing Your Currency

You can see the default currency on your product page. You can change your default currency to your currency by changing currency options.

image 19

To change the currency go to your dashboard & then go to Woocommerce & click on settings.

It will take you to the store’s settings page where you can change all your store’s settings.

Scroll down to the Currency options section & click on Currency & then select your currency. Once you’ve selected your currency click Save changes.

To verify whether your currency is changed or not, refresh your product page.

image 20

You can see that the currency has been changed.

Now let’s try to buy the product. To buy a product you need to add it to the cart, & click view cart & then click proceed to checkout.

You will be taken to the Payment page. Here, enter your billing details and select Place Order. You can see that it is showing that there are no payment methods available.

image 21

But, what is a payment method? Let us explain, the payment method is a way in which your visitors/customers pay for your products.

So let’s proceed to the next step where you can see how to add the payment method.

Step 4: Adding Your Payment Method

In order to set up your payment method, you need to create an account in Stripe. Stripe helps us to receive payments whenever your customer buys your product/s.

To create an account go to stripe.com & click start now.

Enter your details & click Create your Stripe account.

Stripe create

Once you’ve created your account, you need to activate your account to receive payments. Click on start to activate your account.

Here, enter your business details & then enter your bank details. Once you’ve entered all the details, your account is activated.

Now you need to connect your stripe to your website so that your customer/visitor can pay for your product. Now, you need to install Stripe for the WooCommerce plugin. To do that, go back to your admin dashboard. Go to plugins & click on add new.

You will be taken to the plugins page, search for Stripe For WooCommerce here. Once the plugin is displayed, click install & activate it.

Plugin

Once you’ve activated it, click settings. Here, you need to paste the API keys from your stripe account.

image 23

To copy the API keys, go back to your Stripe account & click on the API keys one by one. Once you’ve clicked the keys, it will be copied automatically. You can now paste the keys here & click save changes.

The moment when you click save changes, your stripe account gets connected to the website.

So all set for purchase. Now, try buying a product from your store just like your customer buys a product from your site.

Go to your store & click on the product that you want to buy. It will take you to the product page. Now click Add to cart & then click on View Cart to see the products that you’ve added to your cart.

Click on proceed to checkout. It will take you to the payments page. You have noticed something new, haven’t you? Yeah, your payment method is successfully connected to your website. Now, enter your address, card details & click place order.

Upon successful payment, your order is confirmed. This is how your customers buy products from your site.

Are you worried about how to know if someone places an order from your website? Don’t worry, Let’s see how we will know when someone places an order.

When someone places an order, you will receive two emails to your email(that you have used for creating this website) one from WordPress & the other from Stripe like this.

image 40

Now open your email inbox & open the email that you’ve received from WordPress. You can see that you’ve received all the details about the order.

image 24

Now, open the other that you’ve received from Stripe. Here you can see the details about payment.

image 25

This is how you know when anyone purchases a product from your site. After receiving these two emails, you can start delivering your product.

Now you’ve seen how you know when a customer buys a product, but how your customers can track the product after they’ve purchased from you. So let’s see how your customers can track their products.

After they purchase a product, they’ll receive two emails to their email one with the order details & the other with their account details.

Now open your email inbox & open the first email that you’ve received from WordPress.

image 26

You can see that there is a password given to your customer. If your customer wants to login back to your website, they can go to your site & click my account. Now they need to enter their email address & the password that they’ve received through email.

It will take them to the orders page. This is the place where they can get tracking information about their orders.

If they want to add/edit their addresses, they can do that by going to the addresses option present on the left side.

image 27

This is how your customers can track their orders & update their account details if they want.

Now you’ve successfully finished setting up your store with a payment method.

Do you feel that your website doesn’t look good? No worries, we can change the look of your website so easily.

So let’s go to the next part, where we change the look of your website.

Part 4: Changing The Look Of Your Website

As already said, Elementor is a drag & drop page builder that helps you build your website’s pages easily. So let’s change the look of your website using Elementor.

Step 1: Editing The Content On Your Page

If you want to edit any page’s content using Elementor, just go to that page & click edit with Elementor.

image 28

You will be taken to the editing section where you can edit your page’s design. Now, if you want to edit the heading, you need to select the text. After selecting the text, start typing the text you want.

Elementor heading

Similar to heading, if you want to change the text of the button, select the text & start typing. If you want to edit any text, repeat the same process.

button

If you want to change any image, go to that image & click here. Now, click on the image in the left side panel & then drag & drop your image.

You can see that the image has been changed. Once you’ve made all the changes, click Update.

image 29

Now, let’s verify whether the changes have been updated or not? To do that, go to your site & refresh it.

image 30

You can see that the changes have been updated. This is how you can edit any page’s content.

Now, if you scroll down your homepage, you can see that there are no products in the featured products section.

image 31

So, if you want to add products to your homepage, we can do that easily.

Let’s go into the next step where you can see how to add products to the homepage.

Step 2: Adding Products To The Home Page

To add products to your homepage, go to the dashboard again & click products.

image 32

You will be taken to the products page where you can see the products that are present in your store. Here you can choose/select the products that you want to display on your homepage by clicking on the star icon next to it.

After clicking the star icon, the products will be automatically added to the homepage. To check that, go back to the site & click refresh.

Screenshot 539 1

Now you can see that the products have been added to the homepage. This is how you can add products to the homepage.

Now that we have customized the website, we will now change your website’s logo.

Step 3: Changing The Website’s Logo

To change the logo, you need to click customize.

image 33

It will take you to the customizer section where you can edit your theme’s default settings.

You can see that there are various blue icons on the screen. If you want to change anything, click on the blue icon that is lying next to it.

image 34

So, if you want to change the logo, click the blue icon next to it.

image 35

Now click the Change logo in the site identity section.

image 36

If you want to display your title as a logo, click on the remove logo. Now scroll down & select display title.

Once you’ve done with the changes, click publish.

Do you want to change the menu? You can change it easily in the customizer section.

So let’s go into the next step where you can see how to change the menu.

Step 4: Changing The Website’s Menu

To change the menu, click on the blue icon next to the menu.

image 37

You will be taken to the menus’ section where you can edit the menus that are present on the website.

Click on the edit menu. You will be taken to the menu section where you can edit the items that are present on your menu. If you want to remove any page, click on the arrow & click remove.

menu remove

You can see that the page is removed. Now if you want to rearrange the menu, you can do that by dragging the pages as you want.

Menu rearrange

You can see that the menu has been rearranged. Once you’ve done with the changes, click publish.

image 38

After you’ve clicked publish, the changes will be updated to your site. Refresh your website to see your website’s new menu & logo.

This is how you can change any menu on your website.

Conclusion

Now you have created your own E-Commerce website using WordPress for your business. With WordPress, there are thousands of features you can add on to improve your website. You can easily include these extra features with the help of plugins.

But there are thousands of plugins available in WordPress, and you may easily get lost in them. So, Check our blog where we recommend 15 Best E-Commerce Plugins to use on your WordPress website.

If you want to know how to add the coupon codes to your website, please read our article on how to create coupon codes: https://websitelearners.com/add-coupons-to-your-e-commerce-website/

If you want to learn more about WordPress please visit our youtube channel: https://www.youtube.com/c/WebsiteLearners/videos

Karthik Tatikonda
Karthik Tatikonda
Add a Comment
Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

 

WordPress Course

Do you want to learn WordPress to build any kind of website you want? Then this is the only course you need to take.

View Course

Beginner's Guide to SEO

SEO isn't as difficult as you might think. Learn how to start growing organic traffic to your website with our easy to follow video .

Watch Video

Ready to get started?

Sign up for our WordPress Course today!