WordPress E-Commerce Development w/ WooCommerce & Storefront
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.
Let's review the final project for 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
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!
Installing WordPress & WooCommerce
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
Working with Products
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!
Working with Storefront
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 install a plugin that will display some live ratos from the USPS
Let's add a Shipping class and apply it to a Product
The WooCommerce Settings Tab
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
Payment Gateways and Discounts
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
Creating a Child Theme of Storefront and How to Customize your Store
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!
Working with Menus in Storefront
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
Customizing the Front Page
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
FRONT PAGE: Adding a new section from a specific category
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
FRONT PAGE: 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
So let's style this banner section!
Let's print some fields from ACF instead of the hard coded HTML
FRONT PAGE: Adding the Main Icons with features
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
FRONT PAGE: Displaying the latest 3 entries
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
FRONT PAGE: Adding MailChimp
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
Working with the footer
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 :)
Customizing the Shop Page
In order to print a more detailed pricing, let's see how we can integrate 3 digit numeric code into all the prices