Building Your Online Store With WordPress And WooCommerce

Building your online store with WordPress and WooCommerce is the best alternative to a paid platform like Shopify.

WooCommerce is a WordPress plugin. It needs to be installed and activated just like any other plugins in order to function.

The setup is easy and fast, you can set it up and configure it by yourself in an afternoon.

You can use it to sell

• digital products (e.g. software, courses, downloads, e-books),
• physical products,
• services,
• bookings (e.g. for appointments, or anything else that can be booked),
• subscriptions,
• other people’s products – as an affiliate,

Picking Your Store Theme

Theoretically WooCommerce works with any theme you currently have on your WordPress site. In reality, styling may go wrong, fonts may come out strange (Courier style), therefore you need to test it in each case.

One thing you need to pay attention to, in case of an e-commerce store is, to have a fast loading theme.

(Note: This post contains affiliate links.)

Davinci Theme

This is a free dropshipping theme by AliDropship.

Da Vinci 2.0 for WooCommerce is a profit-oriented theme. It is based on the templates with a time-proven efficiency, and it was carefully tested on our dropshipping stores owned by AliDropship before the release. So, I have no doubts in this theme’s capability to generate healthy returns for you!

Building A Foreign-Language Dropship Store

I actually built an Aliexpress dropship store using WooCommerce Alidropship plugin in Hungarian, it is called Gift Island.

I used the Ignition Theme by Thrive Themes, as you can see, it looks really beautiful.

If you have more cash, you can buy a pre-made dropship store.

STEP 1. Get a domain name and web hosting

In order to create an online store or any other type of website, you’re going to need these two things.

You can start out with a higher-end shared hosting, but when your traffic increases, you will need your own server or cloud hosting. Cloud hosting will also prevent your store from going down.

AliDropship hosting

AliDropship hosting is optimized for e-commerce websites. It only costs $48 per year, however you can only pay for a wh year. ole

• 3 GB disk space
• Unlimited bandwidth
• Free SSL
• Uptime guarantee of 99.99%
• 20 email addresses

Alidropship hosting support is relatively good and their service is on a 24/7 basis. They are equally ready to set up your website for you.

Users can either contact the support using the support email or start a live chat using the chat widget.

STEP 2. Install WooCommerce (FREE)

Just click the “Install Now” button next to the plugin, then activate.

You’ll see the WooCommerce setup wizard.

Create your store pages

Online stores are a particular kind of website, and they need certain pages to function properly.

• “Shop” – this is where your products are going to be displayed.
• “Cart” – this is the shopping cart where your customers can adjust their order before proceeding to checkout.
• “Checkout” – this is where the customers choose the shipping/delivery method and pay for whatever they’ve bought.
• “My Account” – a kind of a profile page for registered customers (they will be able to view their past orders there and manage other details).

All you need to do at this stage of the WooCommerce wizard is click the “Continue” button. WooCommerce will set up those pages for you. (You can rename these pages afterwards if you want to.)

Set up location

The locale defines where your business is located, currency, and preferred units:

Sales Tax

First, you can select if you’re going to be shipping physical goods or not. If you check the box, WooCommerce will pre-set the remaining shipping-related details in the settings.

WooCommerce has a very neat tax module, the best thing about it is that it helps you figure out the tax rates based on your store location (you’ve set it in the previous step).

If you’re going to charge sales tax (in most cases you are), just check the main tax box. As soon as you do this, a new set of boxes will appear.

Pick a Payment Method

Being able to accept online payments is at the core of any e-commerce store, WooCommerce really offers a lot in terms of the available solutions.

Here’s what you can choose from:

If you are setting up a foreign-language store, you can search for other payment gateway plugins used in your own country. There is a wide selection even for a language like Hungarian.

STEP 3. Customize WooCommerce

Set your permalinks

Similarly to WordPress itself, WooCommerce also uses a set of permalinks to identify products. Set these to your liking. I changed mine from “/product/” to “/store/”.

If you’d like to make more drastic changes, such as removing the permalink base altogether, use the Premmerce WooCommerce Permalink Manager plugin. It has several other useful features, such as the automatic adding of the ‘rel = canonical’ attribute, which eliminates duplicate pages in the search results and is highly recommended by most search engines.

Now let’s go to WooCommerce>Settings and customize all tabs.

General

On this tab you can enable coupon codes, set your store address, which countries you can sell to, currency, decimal indicator..

Products

You can enable product reviews, ratings, set your shop page and add to cart behavior (whether or not to go directly to checkout.)

Tax

I recommend consulting with a tax professional or an accountant on what may be your best options, plus any applicable laws to your state, country or business.

Prices Entered With Tax – This option is perhaps the most important when managing taxes in your store, as it determines how you input product prices later on.

Taxes can be based on

• Customer billing address
• Customer shipping address (default)
• Store address

Additional Tax Classes – Tax Classes are assigned to your products. In most cases, you want to use the default Standard class. If you sell goods that require a different tax class (i.e., Tax, except zero-rated products) you can add the classes here. To get started, they include Standard, Reduced Rate and Zero Rate tax classes.

More on tax settings on the WooCommerce website.

Payments

This is where you can add the different payment gateways.

I don’t recommend using the provided PayPal standard for the following reasons:

• It sends you to the PayPal log-in screen and doesn’t show the credit card option
• Look at the bottom of the screenshot – it says “Cancel and return to Peter Nyiri” instead of the site name “FunnelXpert”.

Therefore I recommend using the YITH PayPal Express Checkout for WooCommerce plugin, which also provides quicker checkout with one-to-one connection to PayPal service.

After installing the plugin you need to set it up:

Check Enable and provide your PayPal API keys (you don’t need to fill in Live API Subject):

Scroll down and check “Show the funding icons“.

The section under “Custom Checkout” is important for us.

This is where you can add branding (your website name and logo.)

Set “Checkout Style” to “Billing (No PayPal Account)”. This way people who don’t have a PayPal account can pay with a card.

Check “Require instant payment”.

After setting up your payment gateway, test your cart page:

Then test your checkout page by clicking on “Proceed to checkout”.

Verify that the payment method shows up, then make a test purchase.

Now this is how the PayPal page will look like:

And the cancellation text now reads “Cancel and return to FunnelXpert”.

Accounts & Privacy

• Disable/enable guest checkout
• Disable/enable account creation on Checkout/My Account page
• Assign Privacy Policy page
• Set personal data retention

Emails

This is where you can customize WooCommerce transaction emails, such as New Account, Customer Invoice, etc.

The default editor will force you to edit these emails as horrible php code.

Therefore you should install and use Kadence WooCommerce Email Designer, which lets you easily customize these default transactional WooCommerce email templates. Edit the design using the native WordPress customizer for instant visual edits. Customize the text (including body text) or each email template in WooCommerce without editing code.

Advanced

You don’t really need to change anything here.

Make sure the pages assigned as Cart, Checkout, My Account are correct.

You will need to create and assign a Terms & Conditions page that your customers accept during checkout.

STEP 4. Add your first products

To be able to call your store operational, you need some products.

To start working with the products, go to your dashboard, then Products / Add Product:

Actually, before you do that, make sure you go to Products / Categories and change “Uncategorized” to a more sensible category name, something that makes sense for your store.

Don’t forget to add a description.

You can add a few more categories if it makes sense.

For each product, you will need to add the following:

1. Product name.
2. Main product description. This large field allows you to enter as much info about the product as you wish. Since this is WordPress, you can put not only simple text there but also images, columns, headings, even videos and other media. Basically, whatever you see fit!
3. Product data section. This one is where you set the type of product that you’re adding, and whether it’s a physical, a downloadable or a virtual product (services are considered virtual products too). As part of this central section, you also get tabs for various parameters of the product:General. This is where you get to set the pricing and taxes.
   – Inventory. WooCommerce allows you to manage stock levels.
   – Shipping. Set the weight, dimensions, and the cost of shipping.
   – Linked Products. Great for setting upsells, cross-sales, etc. (Think, “Customers who bought this also bought that.”)
   – Attributes. Set custom product attributes. E.g., if you’re selling shirts, you can set alternative colors here.
   – Advanced. Additional settings. Not essential.
4. Short Description. This is the text that gets displayed on the product page under the name. Works best as a short summary of what the product is.
5. Product Categories. Group similar products together. E.g., “hats.” Works just like the standard WordPress categories.
6. Product Tags. An additional way to help you organize your database of products. Works just like the standard WordPress tags.
7. Product Image. The main product image.
8. Product Gallery. Additional product images to showcase its awesomeness.

Once you’re done setting all of the above, click on the big Publish button – your first product has just been added!

After adding a handful of goods to your database, the products section in the dashboard should look something like this:

STEP 5. Customizing Your Store Page

The next step is to customize the store page in the WordPress Customizer under WooCommerce. (See screenshot below.)

I can customize the following settings:

• How many products per row
• How many rows per page
• Font size
• etc.

At this point my store still looks bad. The product title fonts are huge, they look ugly.

I am using some simple CSS to fix this. Depending on your theme, you may need to place this code to a different place. Just look for Custom CSS in your theme settings – I found mine in the Customizer.

Changing the size of the menus, as the font is too small or too big:
.menu-item a {
font-size: 18px!important;
}

Changing the size of the font of page title on the store page:
.post-type-archive-product .page-title {
font-size: 23px;
}

Changing the size of the font of the product titles:
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 23px !important;
}

You may also need to go to the Widgets area in the customizer and add a Product Search widget and a Category widget (to show the different product categories) to the sidebar of your store page.

STEP 6. Cart And Checkout Pages

Make sure when you edit these pages that set their format “Landing page” instead of “General”.

This will remove the menu, the sidebar and the page title.

Use the following CSS code to put the content of the Checkout page in two columns:

#place_order:hover { background-image: linear-gradient(25deg,#7ed026 0%,#00aeef 100%)!important; }

/* 2 column layout */
@media (min-width: 981px) {
  .woocommerce { overflow: hidden;}
  .woocommerce:after { clear: both; }
  .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { width: 100%; }
  .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { display: none; }
  .woocommerce .col2-set, .woocommerce-page .col2-set { float:left; width: 48%; }
  #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review { 
    float: left; 
    width:48%; 
    margin-left: 4%; 
  }
}

STEP 7. Customizing My Account Page

The WooCommerce My Account page looks horrible.

The page is created with the [ woocommerce_my_account] shortcode and it can only be edited through php.

The first thing I did was hiding the WooCommerce navigation bar that filled half of the screen by adding the following CSS:

.woocommerce-MyAccount-navigation { display: none; }

Then I added a custom menu that included all the vital links to my courses, affiliate program, etc.

By default the page displays the following text:

Hello Peter (not Peter? Log out)

From your account dashboard you can view your recent orders, manage your shipping and billing addresses, and edit your password and account details.

There is no free plugin to change this.

The template file for the my account dashboard is located here –

wp-content/plugins/woocommerce/templates/myaccount/dashboard.php

You can edit this file to change the text of the dashboard.

<?php
/**
* My Account Dashboard
*
* Shows the first intro screen on the account dashboard.
*
* This template can be overridden by copying it to yourtheme/woocommerce/myaccount/dashboard.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.6.0
*/

if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly
}
?>

<p><?php
/* translators: 1: user display name 2: logout url */
printf(
__( ‘Hello %1$s (not %1$s? <a href=”%2$s”>Log out</a>)’, ‘woocommerce’ ),
‘<strong>’ . esc_html( $current_user->display_name ) . ‘</strong>’,
esc_url( wc_logout_url( wc_get_page_permalink( ‘myaccount’ ) ) )
);
?></p>

<p><?php
printf(
__( ‘From your account dashboard you can view your <a href=”%1$s”>recent orders</a>, manage your <a href=”%2$s”>shipping and billing addresses</a>, and <a href=”%3$s”>edit your password and account details</a>.’, ‘woocommerce’ ),
esc_url( wc_get_endpoint_url( ‘orders’ ) ),
esc_url( wc_get_endpoint_url( ‘edit-address’ ) ),
esc_url( wc_get_endpoint_url( ‘edit-account’ ) )
);
?></p>

<?php
/**
* My Account dashboard.
*
* @since 2.6.0
*/
do_action( ‘woocommerce_account_dashboard’ );

/**
* Deprecated woocommerce_before_my_account action.
*
* @deprecated 2.6.0
*/
do_action( ‘woocommerce_before_my_account’ );

/**
* Deprecated woocommerce_after_my_account action.
*
* @deprecated 2.6.0
*/
do_action( ‘woocommerce_after_my_account’ );

/* Omit closing PHP tag at the end of PHP files to avoid “headers already sent” issues. */

Modification

I did the following simple modification with the first printf section – you can change the text to whatever you want to:

<p><?php
/* translators: 1: user display name 2: logout url */
printf(
__( ‘Hello %1$s,<br/><br/>
Welcome to the membership area.<br/><br/>
From the above menu you can view your recent orders, manage your billing address, edit your password and account details, access your courses and the affiliate program.’, ‘woocommerce’ ),
‘<strong>’ . esc_html( $current_user->display_name ) . ‘</strong>’
);
?></p>

I removed the entire second printf section:

<p><?php
printf(
__( ‘From your account dashboard you can view your <a href=”%1$s”>recent orders</a>, manage your <a href=”%2$s”>shipping and billing addresses</a>, and <a href=”%3$s”>edit your password and account details</a>.’, ‘woocommerce’ ),
esc_url( wc_get_endpoint_url( ‘orders’ ) ),
esc_url( wc_get_endpoint_url( ‘edit-address’ ) ),
esc_url( wc_get_endpoint_url( ‘edit-account’ ) )
);
?></p>

This is the result:

I created the menu with Thrive Architect, and I could make the page fancier with a background picture, etc, and maybe later I will.

Right now the main thing is that I have a dashboard that includes all the links the user needs.

Adding A Buy Now Link To A Sales Page

If you are selling a product, such as an online course, you probably want to set it up in such a way, so that whenever someone clicks on your Buy Now button, the chosen product gets added to the shopping cart.

Here is a video that shows how to do that:

You build the sales page with Thrive Architect, then add the following code:

https://funnelxpert. com/cart/?add-to-cart=id (where id is the WooCommerce ID of the product).

WooCommerce extensions

One more thing that makes WooCommerce such an impressive e-commerce solution is that there are hundreds of extensions and plugins available.

Here you can see the the official official add-ons that have been approved by the WooCommerce team, however there are many more available by other developers.

WooCommerce Checkout Field Editor

Checkout Field Editor for WooCommerce plugin provides an easy way to customize (add, edit, delete and change display order) your fields displayed on WooCommerce checkout page.

WooCommerce Wallet

The WooCommerce Wallet plugin allows customers to store their money in a digital wallet. The customers can use the wallet money for purchasing products from the store. The customers can add money to their wallet using various payment methods set by the admin.

WooCommerce Unlimited Upsell Lite

WooCommerce Unlimited Upsell Lite gives you the ability to offer an upsell product at the point of checkout based on the contents of the customers shopping cart.

WooCommerce Lucky Wheel

WooCommerce Lucky Wheel gives you the best way to collect emails from customer visited your store. The plugin offers your customers to enter their emails and take a chance to win a discount coupon by spinning the wheel with WooCommerce Lucky Wheel.

Custom Order Status for WooCommerce

WooCommerce has certain order statuses, but you may need more. As an example, there is no “Shipped” order status, only “Processing” and “Completed”. Custom Order Status for WooCommerce lets you add custom order statuses to WooCommerce.

Building A Dropship Store

As I mentioned before, I built my own AliExpress dropship store using the AliDropship plugin.