Please note that this course has been replaced with the new “Sell Your Digital Products with WP eStore“
In this video tutorial we will display our productsin a catalog and add the shopping cart. There are a variety of ways to display products in WP eStore and we will explore them all.
In this fifth lesson we will focus on all the different ways that WP eStore provides for exhibiting products. We’ll start by installing a “Bonus” plug-in that adds some flexibility to WP eStore, next we’ll gain an understanding of the WP eStore shortcodes. Then we’ll look at the various ways to show products and product categories. We’ll add our shopping cart and add Buy Now and Add to Cart buttons to our product pages. Finally we’ll do a little CSS editing to make the buttons look right.
In this lesson you will:
Install the WP eStore “Extra Shortcodes” Plugin – Watch the Video
- Download the plugin
- Login to dashboard
- Install the plugin
Understanding the Shortcodes – Watch the Video
- What are “shortcodes”?
- Get my “Cheat Sheet”
- Anatomy of a shortcode
- WP eStore shortcode overview
How to Display Product Categories – Watch the Video
- Understanding Catgory IDs
- Show all categories in a list
- Show all categories with thumbnails & descriptions
- Show a single category
How to Display Product within a Given Category – Watch the Video
- Product list style 1
- Product list style 2
- Product list style 3
How to Display Individual Products in a Post or Page – Watch the Video
- Understanding Product IDs
- A tabular list of all products
- A “stylish” list of all products
- Display style 1
- Display style 2
- Display style 3
- Display style 4
- Display style 5
How to Add the Shopping Cart – Watch the Video
- Change the column layout
- Add the Shopping Cart Widget
- Review the Shopping Cart functionality
How to Add “Buy Now” & “Add to Cart” Buttons to Product Pages – Watch the Video
- Add to Cart button
- Buy Now button
- CSS issues
How to Fix the Button Display with CSS – Watch the Video
- Open Firefox
- Open Web Developer & Firebug
- Find the correct selector to modify
- Find the correct selector to modify
- Model the CSS change in Web Developer
- Paste the new CSS into the custom.css file
- Upload custom.css and test
