WordPress E-Commerce Development w/ WooCommerce & Storefront

Let's review the basics of e-commerce!

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

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

Why you should use WordPress for e-commerce?

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

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!

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

Let's install WooCommerce 

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

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

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

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

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!

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

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

Let's continue working with product variations!

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

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

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

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

Let's see how to manage shippings in WooCommerce

Let's add a Flat Rate for the shippings!

Let's enable Free Shipping for our store!

Let's customize the shipping labels

Let's add support for shipping to other countries

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

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

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

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

The Tax tab is really powerful and complex

Let's take a look at the shipping tab

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

Let's review the last 3 Tabs

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!

Let's see how you can configure PayPal Express

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

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

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

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

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 :)

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

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

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

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

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

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

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

Also we have a 3rd menu specially designed for mobile

So let's add some CSS to the Main Navigation

Let's add some CSS to the Mobile Menu

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

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

Let's add some CSS into the main category images

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

Let's use one of the shortcodes included in Storefront

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

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

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

Let's add the final touches to this new section

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

So let's style this banner section!

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

Let's create some new fields with advanced custom fields

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

Let's add small function to print the fields

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

Let's add some CSS into our new fields contents

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

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

Let's print all the content from the loop

Let's add some CSS to the Blog entries

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

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

Let's style the MailChimp form

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

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

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

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

So let's change the number of columns per page, this way you can achieve any design