Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

Create a Grid Display for Your Products Using the WP eStore Plugin

You can show your products in nice grid display using the WP eStore plugin. First, make sure that you have the following installed:

  1. WP eStore
  2. Extra eStore Shortcodes Addon

Fancy Display Templates that Support Grid Display

You will need to pick which fancy template you want to use for your grid display.

The following fancy display templates can be used to make a grid layout

  • Fancy 3
  • Fancy 5
  • Fancy 6
  • Fancy 11
  • Fancy 13
  • Fancy 14
  • Fancy 17

You can find an example of all the Fancy display templates here.

Steps for Making a Grid Display

Step 1: Install the WP eStore plugin and Extra eStore Shortcodes Addon (if you haven’t done it already).

Step 2: Choose which display template you want to use. Lets say you want to use fancy display template 3.

Step 3: Choose which category display option you want to use. You can see all the options here.

Step 4:  Now, create a new WordPress page or post and use the category product display shortcode (using your preferred display template) and it will automatically show all the products from that category in a grid layout.

Example: Below is an example shortcode that will show all products from category 1 using the a grid layout:

[wp_eStore_category_products_fancy id=1 style=3]

Using the style parameter you can modify which display template you want to use for your grid layout. In this example we are using the fancy display template 3:

estore-product-grid-display-example

Note: You can also use the display all products shortcode found here to show all your products in a grid layout.

Stylish Product Display Options for WP eStore

This page has a list of all the different pre-configured product display templates and styles that you can use to display your products when using the WP eStore plugin.

Note: You are not restricted to using one of these product displays if they don’t suit your needs. You can design your own product display in a WordPress post or page then use eStore’s simple “Buy” button (there are shortcodes to embed plain buttons on a post or page) to facilitate the purchase of the product (very helpful when designing an optimized sales/landing page).

Stylish Product Display 1 (Fancy 1)

Demo 1 and Demo 2
Demo 1 and Demo 2
This is a test description. This description is here to show how the description of this product looks like. You can insert plain HTML in this field too. Some more text to fill the shopping cart product description.
Available Qty: 30
Price: $15.99

Stylish Product Display 2 (Fancy 2)

Test Product For Fancy Display
Test Product For Fancy Display
Some test description of the product to show how this description field looks like. You can insert plain HTML in this field too. Some more description of the product goes here. Damn! This product display looks good.
Price: $59.95

Stylish Product Display 3 (Fancy 3)

Test Product For Fancy Display
Price: $59.95

Stylish Product Display 4 (Fancy 4)

Fancy Display Test
Price: $29.95
View Details
Some test description of the product to show how this description field looks like. You can insert plain HTML in this field too. Some more description of the product goes here. Damn! This product display looks good.

Stylish Product Display 5 (Fancy 5)

Fancy Display Test
Some test description of the product to show how this description field looks like. You can insert plain HTML in this field too. Some more description of the product goes here. Damn! This product display looks good.
Price: $29.95
Details

Stylish Product Display 6 (Fancy 6)

Price: $59.95
Test Product For Fancy Display

Stylish Product Display 7 (Fancy 7)

If you wanted to show a very simple and plain product display with name, price and the purchase button then this template will come in handy. This display can be useful for users selling mp3/music/audio files too. Below is an example of how this template looks like:

fancy7-product-display-template-example

Stylish Product Display 8 (Fancy 8 )

Below is an example of how the fancy 8 product display template looks like. This display template is useful for audio/music/mp3 file sellers.

estore-fancy8-product-display-example

Stylish Product Display 9 (Fancy 9)

Fancy Display Test 2
Price: $37.00
Some test description of the product to show how this description field looks like. You can insert plain HTML in this field too.

If you don’t specify a description for a product then this display will become a very compact one with just name, price and a buy button.

Stylish Product Display 10 (Fancy 10)

Fancy Display Test 3
Fancy Display Test 3
This is another test product to show how the fancy display looks like. This product has multiple images which are shown below the main thumbnail image. You can insert plain HTML in this description area too.
Price: $37.00
Price: $29.95

Fancy10 is a lot similar to the popular Fancy1 display except it has a section to show the additional images below the main thumbnail. The images will show in a lightbox when clicked. The default Add to Cart button has a nice elegant style too. You can still use a custom button image for the “Add to Cart” button just like any other displays.

Stylish Product Display 11 (Fancy 11)

Fancy Display Test Product Four
Fancy Display Test Product Four
$49.95$39.95

Stylish Product Display 12 (Fancy 12)

This one is just like fancy 8 template but it uses our compact audio player plugin for the audio file preview. Below is an example of how this display template looks like:

fancy 12 product display template

Stylish Product Display 13 (Fancy 13)

Here is an example of how this display template looks like:

fancy 13 product display template example

Stylish Product Display 14 (Fancy 14)

Here is an example of how this display template looks like:

fancy14-display-template-sample

Stylish Product Display 15 (Fancy 15)

Here is an example of this display template:

estore-fancy-15-product-display-template-example

This is a very compact product display template that only has the product thumbnail image and the product name. This display template can be very helpful when you want to show a product on your sidebar or footer area (where you don’t have a lot of space). If you fill out the “Product details page” field of the product then the name will be linked to that page.

Here is an example of how it looks like when you stack a few products using this display template on your sidebar:

estore-fancy-15-product-display-template-example-stacked

Stylish Product Display 16 (Fancy 16)

This template doesn’t use any product image thumbnail in the template. So this one should be good for users who don’t want to use an image for their product(s).

Below is an example of how this display template looks like:

estore-fancy-16-product-display-template-example

Stylish Product Display 17 (Fancy 17)

This template uses just the thumbnail image, product name and the add to cart button. It it good for using in a grid display layout.

The following screenshot is an example of how this template looks like:

estore-fancy-17-product-display-template-example

Stylish Product Display 18 (Fancy 18)

This template uses a vertical/portrait thumbnail size so it will be useful if you use a vertical image for your product.

The following screenshot is an example of how this template looks like:

estore-fancy-18-product-display-template

How to Use the Stylish Product Display Templates

To display a product in any of the above styles you simply have to use a Shortcode (to display it on a post or page) or use a line of PHP code (to display it from your theme files e.g. footer.php). All the available shortcodes and PHP function references can be found here.