CS6 – Building an Online Shop with WooCommerce

Timestamps

00:34 What is eCommerce
01:22 Installing WooCommerce
03:35 Types of Products
05:17 Adding Products
24:22 Designing your Online Shop Page
27:26 Creating Coupons
31:50 Configuring WooCommerce Settings
48:43 Connecting Facebook Pixel and Messenger Chat
52:35 Testing Purchases and Managing Orders

 

Lesson Notes

In this Lesson: we are going to discuss about

  • What is eCommerce
  • Installing WooCommerce
  • Types of Products
  • Adding products
  • Designing your Online shop page
  • Creating coupons
  • Configuring WooCommerce Settings
  • Connecting Facebook pixel and Messenger Chat
  • Testing Purchases and Managing Orders

 

What is eCommerce

One of the very popular businesses in the online industry is eCommerce. eCommerce is the activity of electronically buying or selling of products on online services or over the Internet. Some examples of eCommerce websites are eBay, Amazon, Lazada, and Shopee. There are a variety of tools when creating an eCommerce site like Shopify, Magento, and Squarespace, but for WordPress the popular tool used is WooCommerce. If you are a Business Owner who sells products online or if you are a Freelancer with clients in the eCommerce business, learning to build an eCommerce site will surely be a great edge for you.

Source: https://en.wikipedia.org/wiki/E-commerce

 

Installing WooCommerce

Let’s start by installing the WooCommerce plugin. It will ask for some information on the initial setup. After going through all the initial setup, we may now visit the dashboard and start adding products.

 

Types of Products

Before we start adding products, let’s understand first the types of product you can create with WooCommerce

  1. Simple product – A simple product is the most common and easily understandable product type in WooCommerce. A simple product is a unique, stand-alone, physical product that you may have to ship to the customer.
  2. Virtual product – A virtual product is simply defined as a product that is not a physical entity. For this reason, there is no need to ship such a product.
  3. Downloadable product – Similar to virtual products, downloadable products also don’t require shipping. They are available as downloadable file with a specified path or URL.
  4. Grouped product – A grouped product is a cluster of simple products clubbed together to form a single entity. The grouped product won’t have a price or a unique identifier of its own. The identity of the grouped product is created by a number of child products that have unique features of their own.
  5. External/Affiliate product – There are cases where you list a product in your store, but you are not the actual seller of the product. Your customers who wish to purchase such products will be redirected to the URL that you specify in the product settings.
  6. Variable product – This product type lets you add variations to the same product to create a complex, variable product. Each variation of the product has its own price, SKU, available stock, etc.

Source: https://learnwoo.com/woocommerce-different-product-types/

Adding products:

Go to Products → Add New

  1. Simple Product – This is the most basic product you can create with WooCommerce.
  • Create a name for the product.
  • Add a long description for your product. This will appear at the bottom of your product page.
  • Then add a short description for your product. This will appear beside the product photo.
  • Same with creating posts, you can assign a category and tag for your product.
  • Add an image for your product.
  • If you have more images for your product, you can add them on the Product gallery
  • Now let’s configure the Product Data. Select Simple product.
  • Under the General tab:
    • Add a Regular price for your product
    • You may add a Sale price for your product
    • You may set a start and end date for your sale price
  • Under Inventory tab:
    • You may assign an SKU code for your product. SKU refers to a Stock-keeping unit, a unique identifier for each distinct product and service that can be purchased.
    • If you want to add a stock quantity for your product, enable stack management
    • You may change the stock status of your product
    • If you enable the sold individually this will only allow one item to be purchased in a single order but this option is not recommended.
  • Shipping tab: If your shipping cost varies according to the weight or dimension of your product, you may enter the information here and assign a shipping class. We will discuss shipping settings later.
  • Linked products: You may add products for Upsell and Cross-sell
    • Upsells are products that you recommend instead of the currently viewed product
    • Cross-sells are products that you promote in the cart, based on the current product.
  • Attributes tab: Attributes are not needed for Simple products, we will discuss this in Variable products
  • Advanced tab:
    • Purchase note – optional note you can send to customers after purchase
    • Menu order – This is how your product is sorted in the cart
    • Enable reviews – You may enable/disable reviews for your product
  • Once you’re done setting up your product, click on Publish. Then click on View Product. You may also view your products under All Products.
  • When you click on Add to cart, it will show up like this on the upper part of your product page.
  1. Virtual products – This is a digital product and does not require shipping. This is where you can add your Freelancing/Business/Professional services like Virtual Assistance, Web Design, Graphics Design, Video editing, and many more. The process is just the same as creating a Simple product but for this, you have to enable the Virtual box.
  2. Downloadable products – This is also a virtual product but applicable for files that can be downloaded right after completing the purchase. These may be PDF, image, audio, video, or application files.
  • The process is also the same as creating a Simple product but for this, you will enable both the Virtual and Downloadable box.
  • Upload the file. Be careful when uploading large-sized files like video or application. You can upload it into another storage like Google Drive or Dropbox
  • You may set the Download limit and Download expiry.
  1. Grouped products – This is being used when you have a similar type of product with a range of different features. For example, you are a dealer of a Phone brand with different types of features such as 16GB or 32GB, etc.

To create a grouped product

  • Same with before, add a long and short description, product image, category, and tags
  • Select Grouped product from the Product data.
  • We will publish the product, but we still have to create the child products that we will add to this Grouped product.
  • Next, we’re going to add a new product.
  • Type the Product name with the feature Example: iPhone 16GB
  • Add an image. You may skip adding the description, category, and tags
  • Add the price
  • Important step: Set the Catalog visibility to Hidden
  • This is because we’re not going to display the 16GB product in our shop but instead, we will add it inside the grouped product. Click on Publish and create another product for 32GB using the same step.
  • We will go back to our Grouped Product and Edit.
  • Go to Linked products and add the 16GB and the 32GB.
  • Update and View the product.

With a Grouped product you can let the customer select from the child products linked to the Grouped product.

  1. External/Affiliate product – This option allows you to list a product coming from another website. When a customer selects this, they will be redirected to the URL of the product you indicated. This is great for affiliate marketers or if you just want to promote the product or services from other websites. To do this:
  • Add the product name, image, category, and tags
  • Select External/Affiliate product from Product data
  • Indicate the URL of the product
  • Enter your preferred Button text
  • Add the Regular price, Sale price, and Sale schedule
  • When the customer clicks on the button, they will be redirected to the URL of the product you indicated.
  1. Variable product – This type of product is similar to Grouped products but with more complexity, because it allows you to add more variations, for example, you are selling shirts with different colors and each with different sizes. To do this:
  • Add the product name, product image, category, and tags.
  • Select Variable product from Product data
  • Go to the Attributes tab and click on Add
  • Enter the name of the attribute of your product, for example: Color
  • Under the Values field, input the different values for the attribution separated with the vertical bar symbol: |
    Example: Black | White | Gray
  • Uncheck the Visible on the product page and check the Used for variations.
  • You may add more attributes like Size for example
  • Save attributes
  • Go to the Variations tab
  • From the dropdown, select Create variations from all attributes and click on Go
  • An alert will be displayed. Click on OK
  • It will notify that variations are added.
  • All the variations are listed. It will show a note that variations (and their attributes) that do not have prices will not be shown in your store so we need to customize each by hovering on each variation then click the small down arrow.
  • Once you click on the arrow, it will show more options for you to upload the image, enter the regular price, sale price, schedule of sale and all the other info similar to adding a simple product.
  • Repeat the same for all the other variations.
  • When done, save changes of Variations then Publish the product.

 

Designing your Online shop page

We have now learned the different types of products we can create with WooCommerce. WooCommerce comes with a default shop page that looks like this. This page is not editable so we can create our own design of the online shop using Elementor. Before we proceed creating an online shop with Elementor, we need to have this plugin installed first: Essential Addons for Elementor

  • Create a new shop page then Edit with Elementor and look for the EA Product Grid element and drag into your page
  • Customize and Design your page as necessary.

Additional:

  • Don’t forget to add your shop page to your website menu.
  • We can add a Cart icon to the Header menu to be able to access the cart from your website easily, you may add a cart icon on your Header menu by going to the Theme Appearance. Select Header → Primary Menu
  • Set WooCommerce as the Last Item in Menu.

 

Creating Coupons

Aside from setting a sale for our products we can create discount coupons to encourage more buyers in our shop. Go to WooCommerce → Coupons then click on Create your first coupon. To add a new coupon:

  • Enter the name of your coupon
  • You may add a description for your coupon
  • Under the General tab, you can select from
    • Percentage discounts – apply a percentage discount to the entire cart.
    • Fixed cart discounts – apply a fixed amount discount to the entire cart.
    • Fixed product discounts – apply a fixed amount discount to selected products only. The discount is calculated per item and not for the whole cart.
  • Set the coupon amount
  • Check if the coupon grants free shipping
  • You may set an expiry date for the coupon
  • Under the Usage Restriction tab, you may set the following:
    • Minimum spend
    • Maximum spend
    • Check if the coupon cannot be used in conjunction with other coupons
    • Check if the coupon should not apply to items on sale
    • Select the products where the coupons should be applicable
    • Exclude the products where the coupon should be applicable
    • Select the category of the product where the coupon should be applicable
    • You may set the allowed emails who can use the coupon (this is useful for testing of purchase)
  • Under the Usage limits tab, you may set the following:
    • Usage limit per coupon – How many times this coupon can be used before it is void
    • Usage limit per user – How many times this coupon can be used by an individual user.
  • After creating a coupon, be sure to test it out if it works. On the Cart page, enter the coupon code and Apply
  • When the coupon code is applied, the discount will be applied in the Cart totals

Source: https://woocommerce.com/posts/coupons-with-woocommerce/

 

Configuring WooCommerce Settings

We are now going to proceed with the configuration of WooCommerce settings to complete the setup of our online shop. Go to WooCommerce → Settings

  • Under General Tab
    • Enter your Store Address
    • Select your Selling and Shipping locations and the default customer location
    • Enable taxes – for registered businesses
    • Enable coupons
    • Select currency options
  • Under Products tab: General
    • Shop page – This is the default Shop page created by WooCommerce
    • Add to cart behavior – Redirect to the cart page after successful addition means that the customer will be immediately redirected to the cart page every time a product is added. This is recommended only if you have one product in your shop.
    • Enable AJAX add to cart buttons on archives – This means that a product is being added to the cart without reloading the page
    • Placeholder image – This is the default placeholder image set by WooCommerce for products without images. You may create your own default placeholder image.
    • Select the Measurement units
    • Enable Product review and ratings
  • Under Products tab: Inventory
    • Select whether to enable stock management
    • Set the notification and threshold settings
  • Under Products tab: Downloadable products
    • Select the File download method and Access restriction for Downloadable products
  • Tax options – This option is only viewable if you have selected the enable taxes in the General settings
    • Select if your products’ prices are inclusive or exclusive of tax
    • Calculate tax based on which address
    • Shipping tax class – You may select the shipping tax class based on cart items so you can assign a tax class per product instead.
    • Select if the display prices are excluding or including tax
    • You may assign a Standard tax rate, Reduced tax rate, and Zero tax rate.
    • When you go to each of your edit products page, you will see a tax status and class selection. The tax will be automatically calculated upon checkout.
  • Shipping options – To enable shipping fees for your online shop, first, you need to assign a shipping zone. To do this, click on Add shipping zone.
    • Assign a Zone name
    • Assign the Zone regions – There will be a selection of cities when you click on the textbox
    • Click on Add shipping method
    • Select from the following shipping method
      • Flat rate
      • Free shipping
      • Local pickup
    • Click on Add shipping method
    • You may assign as many shipping methods as necessary. When you hover on the Title, you will see the option to Edit or Delete a shipping method.

 

Flat Rate

  • Select whether Flat rate shipping fee is taxable
  • Enter the cost of the shipping fee
  • You may customize the cost of the Flat rate shipping fee through the ff. steps:

 

Advanced Costs – The Cost field allows you to charge a flat rate per item, a percentage-based cost, or a minimum fee.

Available placeholders:

[qty] – Number of products in the cart
[fee] – An additional fee. This fee has two optional arguments.
percent – A percentage based on total order cost.
min_fee – A minimum amount. Useful when using percentages.
max_fee – A maximum amount. Useful when using percentages.

Examples

10 + ( 2 * [qty] ) – A base shipping cost of $10 plus $2 for each item in the cart.

20 + [fee percent=”10″ min_fee=”4″] – A base shipping cost of $20 plus 10% of the order total, which is at least $4.

Source: https://docs.woocommerce.com/document/flat-rate-shipping/

 

Free Shipping – You may give your customer a free shipping fee option. Make sure to select the requirement for free shipping

  • N/A – This option means that free shipping will be available to all customers
  • A valid free shipping coupon
  • A minimum order amount
  • A minimum order amount OR a coupon
  • A minimum order amount AND a coupon
  • Input the minimum order amount

 

Local Pickup – You may let your customers pick up their product at the store so ideally, there’s no need to charge them for a shipping fee.

When done setting the Shipping methods, you may go back to the Shipping zones and add as necessary. You may also manage the locations not covered by your other zones.

  • Payment Methods – Set up the payment methods you will accept in your shop. Enable the ones you prefer then click on Manage or Set up to configure each payment option.
    • Direct bank transfer – Enter the bank account details
    • Check payments – Enter the description and instruction when accepting check payments
    • Cash on delivery – Enter the instruction and shipping methods when accepting cash on delivery
    • Paypal – redirects customers to PayPal to enter their payment information. Enter the Paypal email address where the payment from your shop will go
    • Paypal Checkout – This allows customers to pay using their credit card or Paypal without being redirected to the Paypal website.
      Please note that this option requires a Paypal Business account. If you are using a Paypal Personal account, you may skip this option. If you want to switch to a Paypal Business account, you need to be a registered business first before signing up for Paypal Business.
    • To connect with Paypal, click on the Setup or link an existing Paypal account button and follow the steps in connecting it with your Paypal or you may manually input the API following the step from this link: https://support.oneeach.com/article/282-how-to-get-your-paypal-api-username-password-and-signature

 

Some international clients prefer to use 3rd party apps like Stripe, Square, or Braintree to accept credit card payments. To add these to WooCommerce, look for the plugins and install them. It will be automatically added to WooCommerce payment method options.

  • Accounts & Privacy – These settings are for allowing customers to checkout as Guests or if they can create an account.
  • Email – You may customize the emails being sent for each transaction. Click on Manage to customize. When you scroll down the page, you will see the option to change Email sender options and assign a Header image and Footer text of the email, and change the colors as well. When managing each of the emails, you may change the Subject, Email heading, and additional content. However, the main content of the email can only be customized by modifying the themes. Note that this requires HTML and CSS knowledge to modify and you have to do this using a child theme to avoid losing content when the theme updates.
  • Integrations – Any integrations you have added to WooCommerce will be added here. If you have selected to install the Facebook for WooCommerce plugin, it will be displayed here. Facebook for WooCommerce is a great plugin to connect your store to your Facebook page and install Facebook pixel (used for FB ads) and add the Messenger chat in your site so customers can reach you easily through your Facebook page.
  • Advanced – These are some advanced settings for WooCommerce related to Page setup, Endpoint URLs, etc. that you may leave as is.

 

Connecting Facebook pixel and Messenger Chat

If you have a Facebook page, which is highly recommended so you can promote your business effectively through Facebook, you may connect your website to the Facebook pixel and Messenger Chat of your Facebook page. A Facebook pixel is used to collect the data of your website visitors and be able to retarget them through Facebook Ads. You may also connect the Messenger Chat to your website so your visitors can easily reach you to your Facebook page directly from your website. Before you begin, here’s what you need:

  1. Facebook account
  2. Facebook page – https://www.facebook.com/pages/creation
  3. Business manager account – business.facebook.com
  4. Ad account – business.facebook.com
  5. Create a Facebook pixel. Here’s how to do it:
    • Go to Events Manager – https://www.facebook.com/events_manager
    • Click Connect Data Sources and select Web. Look for the green plus sign found on the left side
    • Select Facebook Pixel and click Connect.
    • Add your Pixel Name.
    • Enter your website URL to check for easy setup options.
    • Click Continue.

Then, we can connect the Facebook pixel and our Messenger Chat to our website using the Facebook for WooCommerce plugin. Here’s how… (As demonstrated in the video lesson)

 

Testing Purchases and Managing Orders

Now that we have already set up our online shop and we are ready to accept orders and being a website manager, we act as the primary technical support of our online shop. To manage orders, you may go to WooCommerce → Orders. But before that, let’s make some test purchases in our shop to do that:

  • You may purchase and checkout using Bank payment
  • Or you may create a coupon code at with 100 percent discount and enable free shipping.
  • Select a product to add then go to the Cart page and Proceed to checkout
  • Enter all the required information. 
  • For testing purposes, select Direct bank transfer
  • Place order
  • We have now submitted an order and a confirmation email will be sent.

 

Now that we have submitted an order let’s check it on the WooCommerce Orders page.

  • Click on an Order:
  • You may view all the Order information here. Once you have verified the order, you may change the status to the following:
    • Pending payment – Order received, no payment initiated. Awaiting payment (unpaid).
    • Processing – Payment received (paid) and the stock has been reduced; order is awaiting fulfillment.
    • On hold – Awaiting payment – stock is reduced, but you need to confirm payment.
    • Completed – Order fulfilled and complete
    • Canceled – Cancelled by an admin or the customer
    • Refunded – Refunded by an admin
    • Failed – Payment failed or was declined (unpaid) or requires authentication

 

Portfolio

  1. Install WooCommerce and build an Online Shop with any of the ff. products: Simple, Virtual, Downloadable, Grouped, External/Affiliate, Variable
  2. Design your online shop page
  3. Create a coupon code
  4. Set up payment options (including bank payment for testing purchase)
  5. Set up a shipping fee (including free shipping for testing purchase)

Please send the URL of your online shop and the name of the discount coupon to webdesign@surgedigital.agency

Email Subject: WD – Portfolio 6

 

PORTFOLIO SUBMISSION GUIDES:

1. Video-On-Demand (VOD) Access
Submit your portfolios to courses@surgedigital.agency.
You can submit individually per coaching session or submit all required portfolios as one, in one email (attach your Google Drive).

2. VOD with Class Coaching
Send your portfolios to courses@surgedigital.agency.
Please submit individually per coaching session.

3. VOD with Mentoring
Send your portfolios to courses@surgedigital.agency.
Please submit individually per coaching session.

4. Premium Members
Submit your portfolios to courses@surgedigital.agency.
Please submit all required portfolios as one, in one email (attach your Google Drive).

 

CONTACT US!

For Technical Issues: members@surgedigital.agency

For Submission and Certificate: courses@surgedigital.agency

For any Concerns or Questions: info@thesurgemarketplace.com