4.47 out of 5
153 reviews on Udemy

WordPress E-Commerce Development w/ WooCommerce & Storefront

Learn WooCommerce with Storefront and start creating amazing online stores! Let's build a complete & beautiful store!
Juan Pablo De la torre Valdez
1,272 students enrolled
English [Auto-generated]
How to install and create products in storefront
Add categories, tags, prices, sale prices & inventories to products
Create digital products to sell music, magazines, movies & more
Create grouped projects
Receive Payments with PayPal
Manage Shippings, Taxes, Customers & more
Use storefront in your online store
Create a Child Theme of storefront & customize it with CSS, Hooks and Templates
I will share with you a lot of codes to improve your storefront store
We will add MailChimp & AddThis! into our store
We will customize each page of WooCommerce

If you want to create an online store for your business or your clients this course is for you!

In this course you will learn WooCommerce basic and advanced features, such as creating products, categories, shipping, accepting payments with PayPal, variations and attributes & more.

We will install Storefront, a beautiful theme specially designed for WooCommerce, and we’re going to create a Child Theme to extend the functionality.

We will add AddThis!, MailChimp, Advanced Custom fields into our store, also we will use the Blog as marketing tool and show related products in our entries.

You Will learn how to customize Storefront with Templates, CSS and Hooks. This is course is packed with tips and codes to improve your site.


Project for this Course

Let's review the final project for this course!

The Course Materials Included in this course

Here's the PS file and the images used in this course !

Some Insights and things to keep in mind when developing an online store

The Basics of E-Commerce

Let's review the basics of e-commerce!

Define an Audience

When you are creating an online store is key to define an audience, doing this and you will be closer to success!

Security in your store

The most important in an online store is the security, let's see some considerations that you should keep in mind!

WordPress for e-commerce

Why you should use WordPress for e-commerce?

What's WooCommerce

WooCommerce is the best option, flexible, powerful, here's why you must use WooCommerce for your next project!

WooCommerce & Shopify

A lot of clients will tell you that Shopify is cheaper (notice CHEAPER not Better) than WooCommerce, but, this is true? let's see some examples!

Installing WordPress & WooCommerce

Installing WordPress

Let's install WordPress localy, i'm going to be using MAMP, but you can use WAMP, XAMPP, Bitnami or Flywheeel

Installing WooCommerce

Let's install WooCommerce 

Working with Products

Adding our first product

Let's become familiar with the WooCommerce Interface, let's create our first product

Adding a Description

You can add a description for your products, let's see how in this video!

Creating a Gallery in products

If you have several images of the same product is a good idea to create a gallery, let's see how  in this video

Managing Inventory on Products

You can manage the inventory of your products in WordPress too! let's see how in this video!

Adding Weights and Sizes for Products

Setting weights and sizes for your products will make more precise calculations when you setup a live rates shipping plugin, let's see how in this video!

Adding Up-sell and Cross-sell products

Here's the difference:

Upsell: When you want to sell a more expensive / more profitable product when the user is checking a lower price product

Cross Sell: when you want to sell a complementary Product

Creating a Product Variation

If you have different color and sizes for your products, is a good idea to create a Product Variation,  let's see how in this video

Adding more information for our variation products

Let's continue working with product variations!

Adding Global Attributes

You can also add global attributes, this will are attributes that can be used in any product

Creating a Downloadable product

If you wanna sell music, audios, images, logos, or something, Downloadable products are here!

Selling Grouped Products

Working with Storefront

Installing Storefront & the Customizr

Storefront, a beautiful WordPress theme specially designed for e-commerce, let's install this theme

Adding the Main Image Categories

When you activate storefront it comes with a section specially for the main categories, let's see how you can add the images there

Shipping Methods

Adding our Shipping Zones

Let's see how to manage shippings in WooCommerce

Adding a Flat Rate

Let's add a Flat Rate for the shippings!

Enabling Free Shipping

Let's enable Free Shipping for our store!

Customizing the shipping labels

Let's customize the shipping labels

Adding a Flat rate to shipping in other countries

Let's add support for shipping to other countries

Managing Countries outside of the Shipping Zones

Let's see how you can support all the rest of countries

Setting Live Rates with USPS

Let's install a plugin that will display some live ratos from the USPS

Adding a Shipping Class

Let's add a Shipping class and apply it to a Product

The WooCommerce Settings Tab

The General Tab

The general tab contains most general adjustments, but is really important too!

The Products Tab

In the products tab you can manage the inventory messages and more, let's overview this tab!

The Tax Tab

The Tax tab is really powerful and complex

The Shipping Tab

Let's take a look at the shipping tab

The Checkout Tab

The Checkout tab has some nice adjustments, in this video i'm going to show you an overview

The Accounts, Emails and API Tabs

Let's review the last 3 Tabs

Payment Gateways and Discounts

Receiving Payments

Receiving Payments will define the success for your store, check for a solution that works well in  your country, but also is important to know the fees!

Configuring PayPal Express

Let's see how you can configure PayPal Express

Payment Gateways plugins available

Let's review some other options avaiable to receive payments!

How to create coupons

In this video let's see how you can create a coupon and the options available

Creating a Child Theme of Storefront and How to Customize your Store

Creating the About Us & Contact Us Pages

Let's create more content  the About Us and the contact us pages

What's a Child Theme

A child theme is a safe way to modify an existing WordPress theme, so let's review the basics of child themes!

Creating and Activating a Child Theme

Now that we know what's a Child Theme let's create a child theme of storefront

In the course materials for this video, you will find the finished version just in case that you ran into trouble :)

How to Modify the appearance of your online store

When you're working with WooCommerce you have 3 ways to make changes in your store

Using CSS

So let's see a small example of using CSS!

Using and overriding Templates

Overriding template is less common in my experience, but let's see how you can override a WooCommerce Template

Using Hooks

Hooks are the most powerful and common way to modify an online store, let's see how we can make some changes

Using the Customizr

Another way but less powerful and more limited is the customizr, let's add the final changes before jumping into the code!

Working with Menus in Storefront

Creating the Main Menu

In Storefront you have 3 different menus available, let's create the Main Navigation first!

Creating the Social Menu

The Secondary Menu is great for a Social Media Menu, let's create some links

Creating the Mobile Menu

Also we have a 3rd menu specially designed for mobile

Styling the Main Menu

So let's add some CSS to the Main Navigation

Styling the Mobile Menu

Let's add some CSS to the Mobile Menu

Customizing the Front Page

Adding a Google Font and Styling the headings

Google fonts is great, free, with a great collection of fonts, let's see how we can integrate this fonts into our store

Displaying the featured image on the front page

Let's add the featured image in the main content area of the front page, a coupon for all our visitors

Styling the Main Category Images

Let's add some CSS into the main category images

FRONT PAGE: Adding a new section from a specific category

Creating a new Section for displaying products from specific category

Let's add a new section to display 3 products from an specific category

Using WooCommerce Shortcodes

Let's use one of the shortcodes included in Storefront

Adding more products to this category

Let's add more products to this category to display something better

Passing values to shortcode

When working with the Shortcode you can pass different attributes, let's see some of them

Styling our new section

So let's add the CSS for this new section that we have created

Finishing our new section

Let's add the final touches to this new section

FRONT PAGE: Adding a new banner section

Adding a new Banner Section

Let's add a new section into the front page, something that enforces the message that we want to give to our visitors

Styling the new Banner section

So let's style this banner section!

Using Advanced Custom Fields for dynamic content

Let's print some fields from ACF instead of the hard coded HTML

FRONT PAGE: Adding the Main Icons with features

Adding the fields with Advanced Custom fields

Let's create some new fields with advanced custom fields

Adding the Content to fields

Let's add some valid content to this fields before printing anything

Writing the function where the Icons will be printed

Let's add small function to print the fields

Printing the fields

In this video i'm going to show you how to print this fields

Styling the Fields

Let's add some CSS into our new fields contents

FRONT PAGE: Displaying the latest 3 entries

Creating the 3 blog posts

We need at least 3 post to continue building this website, so let's create them!

Querying the Database to display the 3 posts

In WordPress you can create Custom Queries, let's use WP_Query!

Printing all the content

Let's print all the content from the loop

Styling the blog entries

Let's add some CSS to the Blog entries

FRONT PAGE: Adding MailChimp

Creating and Printing the MailChimp form

Let's add mailchimp into our store, mailchimp is great since it offers a great starting plan for new businesses!

Styling the form (Pt 1 of 2)

Let's start working with the CSS for our mailchimp form

Styling the form (Pt 2 of 2)

Let's style the MailChimp form

Working with the footer

Adding Widgets into the footer

In storefront you have 4 different widgets zones into the footer, so let's use some of them

Changing the footer text and information

Let's change the footer text and also add some HTML to style it easier

Styling the Footer

So let's add some CSS to the footer :)

Customizing the Shop Page

Displaying prices with 3 digit numeric code

In order to print a more detailed pricing, let's see how we can integrate 3 digit numeric code into all the prices

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.5 out of 5
153 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


10 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion