Build Your Own Business Website header image

Lesson 5 – Customize the Display of the Product Catalog and Add the Shopping Cart

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

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

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one