Thanks for visiting our site. As a way of saying "thanks" here's a FREE course on how to make $688 a day online using FREE methods: 

(CLICK HERE TO ACCESS)


This guide will teach you how to create an ecommerce site using WordPress.

  • You don’t need to know any type of coding or programming
  • All you need is a computer
  • And you need time to learn and enjoy it 🙂


By the end of the video, you will have an online store and learn how to create your own website with woocommerce, wordpress and the Shopkeeper theme!

We need a domain and we need hosting to create an e-commerce site with WordPress.

We will first register the domain. If you are looking at a Godaddy tutorial, then you must follow these steps.

There are several different sources that I recommend for domains and hosting, but the best one must be Hostgator because –

  • Quickly
  • Reliable
  • cheap
  • Excellent customer service

Disclosure: Hostgator and our other affiliates (Godaddy) pay us a commission if you use our link or coupon code. No charge, so thanks in advance.

I recommend Hostgator to all your clients and they are great at helping you build and build a wordpress ecommerce website.

So, click this link to go to Hostgator and then choose between Hatchling and Baby plan

  • Hatchling – if you plan to build only one website
  • Child – if you plan to build more than one website and host them in this account

Be sure to use the discount codeNYCTECH30by 60% + percent.

Highest possible discount from Hostgator.

Please note that links to Hostgator are affiliate links, and the coupon code is the associated coupon code.

Now you want to go to the mailbox and click and open the email from Hostgator.

  1. Log in to your cpanel
  2. Click quick install or install wordpress with one click
  3. Select the domain you just registered and click Continue
  4. Enter your web site information
  5. Click Install
  6. Once everything is installed, you should have your login information for your new wordpress website that you will learn how to make.

Congratulations!

Click to log in to your WordPress website

Or go to your email and you will have your login information there

This is our WordPress dashboard and that’s where we’ll go to customize and create your ecommerce site.

This is a premium wordpress theme. But it pays off because Shopkeeper is probably WordPress’s fastest growing ecommerce theme. Don’t buy into other high-selling topics. They have been around for a long time, but it doesn’t make them any better.

So for this ecommerce guide creation method we want to get Shopkeeper theme.

So you can click on this link to go to Themeforest to download the Shopkeeper theme.

Saleswoman, saleswoman, saleswoman… I wrote this many times here for fun, and you also see the click link.

Follow the video to download all installed WordPress files. You can also activate the theme if you like!

After downloading the theme, I want you to make sure you have it compressed or it is a zip file, otherwise you cannot upload a WordPress theme to get started with your online store.

Okay, now you should have downloaded the seller theme! So now we want to go back to the WordPress website and install the shoppress shoppress theme so we can get started building an ecommerce website.

  • Go to your WordPress dashboard
  • Hover over Layout
  • Click Themes
  • Click Add topics
  • Click Download Themes
  • Click Select File
  • Find the shopkeeper.zip file (must be a zip file!)
  • Upload and activate

Now that the WordPress ecommerce theme has been activated, you should see a notification about installing some of the required plugins.

Click to start installing / activating plugins

  • Getbowtied tools
  • Woocommerce widget
  • Builder of visual composers
  • YITH Woocommerce Wishlist
  • WP Super cache

These are three must haves!

Then update them if you need to and then we can move on to the latest step and get closer to learning how to create our online store using wordpress. P.S. what kind of ecommerce site are you learning how to do with wordpress?

You can download the demo zip file here to create your ecommerce site here

Keep in mind that the images may not be the same as in the video on how to create a WordPress e-commerce site in 2018 because these images are copyrighted, but you should still use your own images to build your own online store.

  • Download everything
  • Go to your wordpress dashboard
  • Hover your mouse over the media
  • Click Add media
  • Upload your demo content

I will also show you how to upload images as we go through the creation of our ecommerce website in this video guide.

I usually only create one page at a time in my guides. But now I want to do all the pages we are going to make in this guide so that we have everything for our placement options and we can go back and edit these pages later.

  1. Homepage
  2. Blog Page
  3. About the page
  4. Store page
  5. Wishlist Page – Paste this into
  6. Contact page
  7. Cart Page – Paste this into
  8. Billing Page – Paste it into
  9. Question Page
  10. My Account Page – Paste this into
  11. Privacy Policy Page
  12. Terms and Conditions page

We’ll just make two pages fast so we can go through our settings and choose the right pages for the WordPress e-commerce website we’re creating.

We’ll come back to these pages later when we build an online ecommerce store.

  1. Hover over the page
  2. Click Add New
  3. Title
  4. Choose a look if you want right away
  5. Publish

We now select the ecommerce settings for the wordpress theme we are using (merchant).

You can customize your settings the way you want, but I’ll show you what we choose for the online store we’re building.

  1. Go to your wordpress dashboard
  2. Hover over the seller
  3. Click Customize

Below is each section and what we have selected. We’ll quickly go through this in the video guide, so if you need to, you can see what we’ve chosen here and go at your own pace.

You will see a bunch of settings tabs here. We will pass them along.

Header (Update width and height)

  1. Choose the look you want for your logo and menu
  2. Choose the color and size of the header font
  3. If you want to make the header transparent on all your pages, you can do so here by clicking Enable Header Transparency (Global)
  4. There are several options here. If you have a transparent header, when you scroll down, it will change colors if you choose a color (tip only)
  5. Change the dark opacity to black # 000000
  6. Select the header background color

Header elements

  1. I leave everything as default here (includes wish lists, shopping cart and header search icon)
  2. Feel free to enable and disable everything you want, or upload your own wish list, shopping cart and search icon

Logo (Width and Height Update)

  • Here’s where you can upload your logo. If you don’t have one, will we create one together after selecting the WordPress website settings?

The upper bar

  • If you want to have the top navigation bar and message, then click enable
  • You can then choose the color of the top bar and the font color
  • Be sure to include the text you want for your text in the top bar?

Sticky Head

  • If you want to have a header attached, click enable. That way, the header will always appear at the top of the WordPress website, even if you scroll down the page

pedestal

  • The footer tab lets you choose whether you want the footer to be transparent and to have icons on social networks
  • Footer color code on the wordpress demo website: # 042368
  • You can also include the copyright text
  • We will use the following copyrights for the demo site (you can change them as you wish)
  • Turn the back button on top
© NYC TECH CLUB

You can copy and paste the above text. All you have to do is change the website name and text between> and

Blog

  • Choose the layout of your blog page
  • For Layouts 1 and 2 – If you want to have a sidebar for your blog page, you can enable it here.
  • We use an endless plugin to load posts

Store

  • The Shop tab lets you select several options for shopping pages
  • Enable quick preview
  • There are no real changes to the default options

Product Page

  • We keep the default options
  • If you want to zoom in on product images, show related products, have social share icons and product reviews on product pages – leave everything as it is
  • If you want, you can make any changes to the product page (just click Enable and Disable what you want to change)

style

Here you will choose the colors of the WordPress site, so this is one of the more important tabs. For the e-commerce demo site, we use the following color codes:

  • Body text color – # 545454
  • Title Color – # 000000
  • Main theme color – # ef6700
  • Body Background – #ffffff

Typography

From this tab we can choose which font we want for our online store. Check out the fonts selected for the ecommerce demo website below (all you have to do is paste this information into the right sections) –

  • Main font – Poppins
    • Select Half Bold 700
    • Font size 21
  • Secondary Font – Yantramanav
    • Select Half 600
    • Font size 16

Social media

  • Whatever social media icons you want to display in the footer and navigation in the top bar – all you have to do is enter the web address of the social media sites (your URL on your page)

Custom code

Import Export

Website identity

  • Add “Fashion has never been better” to the tag

menus

Widgets

Home page settings

  • Set up static pages for your homepage and blog page

WooCommerce

  • Product Catalog –
  • Show products
  • Show both
  • Go to your settings in the wordpress dashboard
  • Click generally if you want to change the site title and tag
  • Then add www. to the website address and wordpress address
  • Click Save and sign in again
  • Now go to Settings> Permalinks
  • Select the permanent connection structure you want
  • Click Save

Now we’re going to create a custom logo – how cool is that?

  1. The first thing to do is visit this site: Logomakr
  2. In the upper left corner there is a search bar.
  3. Enter any type of image you want your logo to be
  4. Then find the picture you like
  5. Then go to the top right corner and resize
  6. Make sure your logo is within white space
  7. Click T on the left if you want to add text to your logo
  8. Make sure all the text within the white space also matches
  9. You can change the colors of your logo by highlighting an image or text and clicking on the color table in the lower right corner
  10. Once you are satisfied with your logo, go to the top right corner and click on the disc
  11. A new page will appear. Right-click and download the logo
  12. Then go to the download folder. Double click the logo and export it to PNG.
  13. The logo should now be saved as a PNG image

Now we are back and starting to adapt the pages we created earlier in this lecture on how to create a WordPress website for free in 2018.

  1. Go back to the wordpress dashboard and hover over Pages and click All Pages
  2. Find the homepage you created and click it to edit it

Now let’s learn how to create our homepage for a WordPress website. The steps below will guide you how to create your entire homepage. Don’t worry if everything doesn’t show up right now. We haven’t created the entire website yet, so there will be some missing parts.

  1. Make sure the page is set to full width
  2. Make sure you hide the page title
  3. Click the back end editor to turn it on
  4. Add a new row
  5. Select line and stretch content (no dips)
  6. Make sure the row is full width
  7. Click + and add a slider element (full height, large arrows to navigate, 8 seconds)
  8. Add a slide (66px, 16px, 24px)
  9. Add more slide pictures (68px, 16px, 24px)
  10. Add a new row (default, full width)
  11. Add a blank space element (50 pixels)
  12. Adding a text block (H3)
  13. Add a new row (default, boxed)
  14. Add row within row (default, full width)
  15. Change the columns in the row to 3
  16. Add captions to each line
  17. Add a separation line (gray, middle, border, 4px, 100%)
  18. Add a new line with a blank space element (20 pixels)
  19. Add a new row (default, full width)
  20. Add a text block (H1, paragraph)
  21. Adding a Product Element (15, 5)
  22. Add a new line to the call to action (default, full width, # 000000 background colors)
  23. Add a row to the row and select an option in the boxes
  24. Add a text box and change the font to white
  25. Click the Page Update button

And that’s it! Now you just made the homepage for your wordpress website. How was it? Congratulations on learning how to make your first wp wordpress 2018 website. Keep going!

Let’s go and create or customize a shopping page for our woocommerce wordpress site.

Woocommece creates a few default pages for you, and the shopping page may be one of them. If that’s the case, we don’t have to recreate the page, but if not, then we have to create a new page and set it up in our woocommerce settings.

Let’s go and see if we need to create a new page for our wp wordpress site.

  1. Go to wordpress dashboard> hover over page> click all pages
  2. Make sure there is a Store page
  3. If not, open the page and title it Shop
  4. Now go to your woocommerce settings and click on the product tab
  5. Set up a store page there

That’s all we have to do! Now we’re done with the shopping page and all that and we can start adding products

You should now have a bunch of products for sale on your ecommerce site. So if we go to the shopping page, it should look pretty good.

  • But I have one more thing I want to do – add a sidebar with a few cool options. To do this, we must do the following:
  • Go to your WordPress dashboard> hover over layout> click on widgets
  • We are going to drag some widgets (boxes on the left) to the Side Store bar

Let me show you how you can create non-variable products for WordPress for your woocommerce e-commerce site.

If your online store contains products with only one type of product that does not have a size or anything, then this is called a single product.

  1. Go to your WordPress dashboard> hover over product
  2. Click add a new one
  3. You will now be on the product page
  4. Go ahead and title your product
  5. Add a long description (which will appear at the bottom of the product page)
  6. By default, an individual product should be selected
  7. Enter the price and all you want in the cards
  8. Add your short description that appears next to the image of the product you are selling
  9. Add your own pictures
  10. Add your categories
  11. Add your tags
  12. If you would like this product to be featured as a featured product on the homepage, go to the most recent tab next to the publish button and open it and click the highlighted button
  13. Post the product

Creating a variable product for your online store is almost the same as an individual product, but this time you will go to the drop down option that talks about one product and choose a variable product

Then what you want to do is go to the attributes tab and click on it and add the attributes

  1. Click on adding custom attributes and name the variable (such as size or color)… then type in colors and separate them with | … Not a comma, but a line like Little | Medium | Big
  2. Then check the box that says variations are used
  3. And click Save
  4. Now go to the variation tab and click add attributes or add custom attributes
  5. Then click and expand and add your prices
  6. Click Save when done
  7. The rest is the same as an individual product -> images, category names, tags
  8. Click publish when done

If you want to add attributes and save them so you don’t have to keep repeating them … follow the instructions below –

  1. Go to the WordPress dashboard> hover over product> click attributes
  2. Add a new name for your variable (attribute)
  3. Make a handkerchief of the same name (all lowercase letters)
  4. Just select the TEXT type from the drop-down menu
  5. Click the Add Attributes button

Now what you want to do is click an attribute if you are not redirected to that page and add individual variables

  1. Just add a name and a snail
  2. And click on adding a new one

And now you know how to save time ?

Extra: You can also add different types of products – not just individual and variable products. There are also downloaded and associated products you can create!

If you do not want to create featured images or small category descriptions for category pages, skip this section on the wordpress e-commerce site.

Go to your wordpress dashboard> hover over product> click on categories

  1. You can create a new category here, or if you already have one, you can move it over and click edit
  2. Go ahead and name your category
  3. Put the grg in the same name as the category (in all lowercase letters)
  4. Just add a description
  5. Upload a header image
  6. Click to add a new category or update the category

Now we will learn how to create wordpress about a page

  1. Click to add a new page
  2. Click to hide the title of the page
  3. Change the page to full width
  4. Turn on the Page Builder
  5. Add a new row (default, frame + add 200px top lining)
  6. Add a text block to the page title (H1)
  7. Add separator (orange, center, border, 3 pixels, 10%)
  8. Add Empty Space (32 px)
  9. Add a new row (default, full width)
  10. Add a row within the row (default, tentative)
  11. Add a text block for the section you’re working on
  12. Add a new row (default, full width)
  13. Add separator (gray, middle, border, 1px, 80%)
  14. Adding Blank Space (50px)
  15. Adding tex block (h2)
  16. Adding a New Inner Row (boxed)
  17. Change the row to 3 columns
  18. Add one image for each column (thumbnail, center)
  19. Add a text block for each column box
  20. Add Empty Space (32 pixels)
  21. Add a new row (default, full width)
  22. Add separator (gray, border, middle, 1px, 80%)
  23. Adding a text block (h2)
  24. Add Empty Space (32 pixels)
  25. Add the inner row and select 3 columns (default, indicative)
  26. Add a text block for the title
  27. Add some icon boxes to each column (# b39964)
  28. Add a text box below
  29. Do this twice more for the other columns
  30. Add Empty Space (32 pixels)
  31. Add new row (default, full width, # dd4040)
  32. Adding a text block (h2)
  33. Add button (flat, square, large, center, classic orange)
  34. Add a blank space
  35. Click the update button

Now you have learned how to make your own wp wordpress website 2018. Keep learning free to create a WordPress website!

Previously, we created a new page on our WordPress ecommerce site, but if you need to create a new page, just hover over the pages and click add a new one on the wordpress dashboard

  1. Make sure the page is a full-width template and hide the page title
  2. Add a new row (default, full width, 200 px for top padding)
  3. To add a page title (H1, center), add a text block
  4. Add separation element (3px, 10%)
  5. Add a text block for your store and contact information
  6. Add a new row (default, full width)
  7. Add a google maps element

You do not need to do this section immediately if you do not have the articles you want to publish. But since I want to show you what your web site will look like after you have posted some blog posts, I will show you how to create a few blog posts.

  1. Go to your Control Panel> POSTE> Click Add New
  2. Bookmark your blog post whatever you want
  3. Enter the content you want and change the text formatting if you like
  4. Once done, you can add a blog blog category if you like
  5. Add a picture to the Featured Image section at the bottom right if you want the thumbnail to appear on your blog homepage and blog post

This is how you create blog posts

This section is NOT covered in the video guide on how to create a wordpress ecommerce site

First, make sure that the formatting of our blog page is correct.

  • Go to DASHBOARD> Saleswoman> Customize
  • Click on Blog
  • Select the settings you want or can use next (which I use in the guide)
  • I choose to disable the sidebar … but you can enable it if you want

If you want to have a sidebar, you’ll need to add widgets to your blog posts. Do the following:

  1. Go to your WordPress dashboard> Layout> Widgets
  2. Drag any widgets you want into the sidebar area
  3. Be sure to click save on each widget you drag

Not everyone needs a FAQ page, but I think it’s a good idea for any online store, and woocommerce and wordpress make it very easy. Let me show you how this is accomplished.

When creating a new page, make sure that the template option is full width and deselect the page title

  1. Turn on the back editor (default, full width, 200 px top layer)
  2. Add a text block for your title
  3. Add a text block to the page title (H1)
  4. Add separator (orange, center, border, 3 pixels, 10%)
  5. Add Empty Space (32 px)
  6. Now create a new row (row settings: default, boxed)
  7. Add a text block for the section title
  8. Add a new row within the row and select two columns
  9. For each chapter, add a question and answer text block
  10. Add 16px blank space
  11. Now add another row if you like and select two columns
  12. For each chapter, add a question and answer text block
  13. And add another blank space of 16px and repeat
  14. Add extra blank space to the bot before calling for 16px more space
  15. Add new row (full width, background color: # dd4040)
  16. Add a text block to the call to action
  17. Add button (classic, square, classic orange, big, center)

Now create a new page – DASHBOARD> PAGES> ADD NEW

  1. Title of the page with the provisions of the Privacy Policy make sure the page is full width
  2. Remove the checkmark to display the title
  3. To add a custom title> push + and add a new line
  4. Click on the pencil to edit the line -> we want to add 200px to the padding above so that the title falls below the header menu
  5. Now we want to add a text box> press the + button and add a text box. We want to add our custom title here. We will put a “Privacy Policy” for the demo site
  6. Add a separator> + button> separator below the text box. Change color and make border width 3px and element width 20%
  7. As a friendly reminder, always remember to click Save
  8. Add a row to the row and change it to a width box
  9. Add a text block to your privacy policy
  10. Add Empty Space (32 pixels)
  11. Confirm post / update after done!

The Terms and Conditions page will show you how to do, it is very similar to an excerpt of the privacy policy page, adding extra text blocks for all your terms.

  1. Once you’ve created a new page, deselect the title display
  2. Change the page template to full width
  3. Add a new row
  4. Add 200px for the padding above
  5. Add a text block for your page title
  6. Add a separation line with 3px and 20% width (orange)
  7. Add a new row within the row and change it to a box
  8. Add a text block to your first term
  9. Add a separation line (1px, 100% gray)
  10. Keep doing this until you have completed all your requirements
  11. Add a blank space of 32px at the bottom
  12. Press publish
  1. Go to your WordPress dashboard
  2. Hover over Appearance> click Menus
  3. Create a new menu and title it
  4. Click Create Menu
  5. Add items to the menu
  6. Click the main navigation
  7. The Save menu
  8. Now create a new footer menu and name it Footer
  9. Add menu items
  10. Click the footer menu
  11. The Save menu

Make sure you have the following pages

  1. Shopping cart page
  2. Checkout page
  3. My Account Page
  4. Wish Page

If you do not have these additional pages. Create a new page and add the following text to each

  1. Cart Page – [woocommerce_cart]
  2. Payment Page – [woocommerce_checkout]
  3. My Account – [woocommerce_my_account]
  4. Wish Page – [yith_wcwl_wishlist]
  5. Then go to the Woocommerce settings
  6. Billing Card – Set up the Shopping Cart and Check Out page
  7. My Accounts tab – Set up the My Accounts page
  8. Click save for each card

Click the publish button on the wordpress dashboard

Congratulations on completing this video guide !!

PLEASE INCLUDE A COMMENT AND APPLY! We will also be posting follow-up videos for this video, so watch them!

Thanks for visiting our site. As a way of saying "thanks" here's a FREE course on how to make $688 a day online using FREE methods: 

(CLICK HERE TO ACCESS)



Source link

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here