Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

How to Display a List of Latest Products

The latest products shortcode allows you to display any number of latest products (based on the date added to your store).

How to Display Your Latest Products.

You can use the eStore and the Extra Shortcodes add-on to display a list of your latest products. To do this all you need to do is follow the steps outlined below.

Step 1: You will need to have the eStore and the Extra Shortcodes add-on installed on your site.

Step 2: Create a page where you want to display the list of latest products. You can also use an existing page or widget.

Step 3: Place the below shortcode where you want a list of your latest products to be displayed.

[wp_eStore_latest_products number=5 style=1]

Parameters you can modify in this shortcode.

• Number of products (number) This is how many products you want to be displayed using the shortcode. Example: If you set this number to 5 the shortcode will display the 5 most popular products.

• Style (style) This allows you to use different fancy displays to show your products. You can see a full list of the fancy display templates here.

Related Documents

Product Display Template for Selling Videos

If you are selling videos from your WordPress site and you want to present the video product using a nice template then use this addon plugin.

You can configure a preview of the video that you are selling so your customers can preview it before purchasing the item.

Note: The video preview will need to be a YouTube video.

screenshot showing the video product template

Clicking on the “Play” button will preview the video in a lightbox window (see example below).

video-product-display-lightbox-preview

Installing the Video Product Template Addon

You can install this addon the same way you install any WordPress plugin:

  • Go to the “Add New” plugins screen in your WordPress admin area
  • Click the “upload” tab
  • Browse for the addon file (eStore-video-products.zip)
  • Click “Install Now” and then activate the plugin

Using this Addon

When this addon is active, You can easily enter some video specific information in the “Add/Edit Product” interface.

  • Video Preview URL: URL of the video that will be used as a preview on the front end (YouTube/Vimeo)
  • Video Duration: Duration of the video (It will also be displayed on the front end)

screenshot showing how to configure information for video product template

Since the video template requires a thumbnail for the video you will need to specify one in the Thumbnail Image URL field.

screenshot showing the thumbnail image url field of video product

Click the “Save” button to update the product.

Video Product Template Display

Create a new post/page and specify the following shortcode to show your video template:

[wp_eStore_video_product_template id=”2″]

Here, The value of id is the unique product ID for your eStore video product.

screenshot showing the video product template

Get the Video Product Display Template Addon

The price of this addon is $39.95

Please contact us to purchase this addon.

WP Shopping Cart – Stacking Multiple Product Boxes Side by Side

I received the following question today from one user:

I love the display box feature, yet I cannot get them to align horizontally on the page. How can I get more that one item per line?

In this tutorial I will explain how you can stack the product boxes side by side to display multiple products in one line.

Preparation

If you don’t know how to create a product box using the WP Shopping Cart plugin then read this page first.

CSS Tweaks

I am going to apply a few custom CSS tweaks to stack the product boxes horizontally.

Step 1) Grab this custom css plugin (it allows you to add your custom CSS code without modifying the main plugin).

Step 2) Lets make the product boxes narrower so there is more room to have multiple boxes side by side.

Add the following block of CSS code in the custom CSS plugin’s interface to define a maximum width of 250px for the boxes.

.wp_cart_product_display_box{
max-width: 250px;
}

You can use a different value if you want to make it narrower.

Step 3) Lets float the product boxes so they stack. Add the following CSS code just below the max-width that you defined in step 2:

float: left;

You should have the following combined CSS code and the boxes should be stacked side by side now:

.wp_cart_product_display_box{
max-width: 250px;
float: left;
}

Step 4) Finally, lets give it some margin to add some space between the boxes.

Add the following CSS code just below what you defined in step 3:

margin-right: 10px;

You should have the following combined CSS which is the final code

.wp_cart_product_display_box{
max-width: 250px;
float: left;
margin-right: 10px;
}

The Final Output

The final output should look like the following example (your product boxes will be aligned horizontally):

shopping-cart-grid-product-boxes-example

Our WP eStore plugin has more product display templates and better grid layout options. You can check the styles offered in WP eStore by visiting this page.

How to Show a Product Display Box

You can use the “wp_cart_display_product” shortcode to create a product display box on the fly when using the Simple WP Shopping cart plugin. This can be very handy to display your products on a post, page or sidebar easily.

Here is an exmaple shortcode that shows you how to use a product display box.

[wp_cart_display_product name="My Awesome Product" price="25.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product"]

Replace the values with your product specific data to show a product display box for your product(s).

The above shortcode will product a product display box similar to the following screenshot:

product display box example

Using a Product Box with Product Variation

Here is an example shortcode usage with product variation:

[wp_cart_display_product name="My Awesome Product" price="25.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product" var1="Size|Small|Medium|Large" var2="Color|Red|Blue|Green|Black"]

The above shortcode will display a product for sale like the following:

product box with variation

Using Shipping With the Product Box

Here is an example of how to add the shipping parameter with the product box shortcode:

[wp_cart_display_product name="My Awesome Product" price="25.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product" var1="Size|Small|Medium|Large" var2="Color|Red|Blue|Green|Black" shipping="5"]

Specifying an Alt Tag for the Thumbnail Image

You can use the thumb_alt parameter in the shortcode to specify an alt tag for the thumbnail image to be used in the product box. Below is an example:

[wp_cart_display_product name="My Awesome Product" price="29.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product" thumb_alt="Test alt tag for the thumbnail image"]

Creating a Grid Display With Product Boxes

Check this tutorial to learn how you can stack the product boxes side by side.

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.