Add to Cart Button | Tips and Tricks WP eCommerce

Simple Shopping Cart – Customize the Add to Cart Button Text via Shortcode

The wp simple cart plugin allows you to customize the add to cart button from the settings menu of the plugin. However, that change is applied globally to all your product buttons.

There is another option to customize the add to cart button text by using an extra parameter in the shortcode. This only applies the change to the shortcode where you are using it. This can be very useful when you want to use a custom button text just for a few products on your site.

You an specify the custom button text via the “button_text” parameter. The following example shortcode shows how to use it:

[wp_cart_button name="Just a Test Product" price="29.95" button_text="Add Me Now"]

You can also use this shortcode parameter in the product box shortcode like the following example:

[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" button_text="Add Me Now"]

It will create a button with custom text like the following example:

Showing a Shopping Cart with Product Image Thumbnails

In this tutorial, I will show you how you can show an image thumbnail of your product in the shopping cart when using the Simple Shopping Cart plugin. The goal is to create a shopping cart that looks like the following example:

Step 1. Specify the Thumbnail Image URL in the Button Shortcode

Specify your thumbnail image in the add to cart button shortcode using the “thumbnail” parameter. See example below:

[wp_cart_button name="Test Product" price="19.95" thumbnail="http://www.example.com/my-product-image.jpg"]

Step 2. Specify the Show Thumbnail Parameter in the Shopping Cart Shortcode

Add the “show_thumbnail” parameter in your shopping cart shortcode. See example below:

[show_wp_shopping_cart show_thumbnail="1"]

[always_show_wp_shopping_cart show_thumbnail="1"]

Now, when your customers add items to the cart, they will see the product image thumbnails that you specified in the add to cart button shortcode.

What If I am Using WP eStore Plugin?

There is a similar feature in the WP eStore plugin also. So you will be able to create a shopping cart with product image thumbnails if you are using that plugin also.

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

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

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 3 (Fancy 3)

Stylish Product Display 4 (Fancy 4)

Fancy Display Test

Price: $29.95

Stylish Product Display 5 (Fancy 5)

Fancy Display Test

Price: $29.95

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:

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.

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

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

$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:

Stylish Product Display 13 (Fancy 13)

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

Stylish Product Display 14 (Fancy 14)

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

Stylish Product Display 15 (Fancy 15)

Here is an example of this display template:

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:

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:

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:

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:

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.

How to Show Add to Cart buttons Using the WordPress eStore Shopping Cart Plugin

This is a step by step tutorial to setup an ‘Add to Cart‘ button for a Product using the WordPress eStore plugin to accommodate the selling of products from your WordPress site.

After you read this tutorial, you will be able to easily create “Add to Cart” button(s) on your product’s sales page and sell your products.

Setup a Basic ‘Add to Cart’ Button for a Product

Step 1) Think about the name, price and a little description for the product you want to sell.

Step 2) Configure the product using the ‘Add/Edit Products’ interface of the WordPress eStore Plugin. Take note of the ‘Product ID’ after you add the product (all the product ids can be found on the ‘Manage Products’ page).

Step 3)Design however you want to display the product on a Post or Page (the landing page of the product) where you want to sell the product from. I want to keep it very simple for this tutorial. So I am going to use the following as my product information:

Name: Demo Product One

Description: Demonstrates the Add to Cart button

Price: $1.00

Step 4) Now, all I need is the ‘Add to Cart’ button next to the product information so a customer can purchase it. To insert the ‘Add to Cart’ button that goes with this product, add the following shortcode below the line ‘Price: $1.00’

[wp_eStore_add_to_cart id=PRODUCT-ID]

Replace ‘PRODUCT-ID’ with the actual product id of the product you are selling in my case it’s 1 because this is the first product I just configured. So I am going to add the following text

[wp_eStore_add_to_cart id=1]

Step 5) The completed product display looks like the following:

Name: Demo Product One
Description: Demonstrates the Add to Cart button
Price: $1.00

Step 6) Finally, I am going to add the following shortcode in the post that displays the shopping cart when items are added to the cart. You can also use the sidebar widget to display the shopping cart. This will allow the customer to view their order and complete the checkout:

[wp_eStore_cart]

Feel free to hit the above ‘Add to Cart’ button to see how the shopping cart appears below this line and allows a customer to purchase the product.

You can copy and paste all the available eStore shortcodes from the shortcode references PDF file.

Common Pitfalls

The most common mistakes people make when using the ‘Add to Cart’ button’s shortcode and hence the button doesn’t appear are as following:

Use of hyphen (-) instead of underscore (_). Use wp_eStore not wp-eStore.
Use of lowercase ‘s’ instead of uppercase ‘S’. Use wp_eStore not wp_estore.
Forgot to activate the plugin from the plugins menu (Yes it does happen 🙂
Didn’t replace ‘PRODUCT-ID’ in the shortcode with the actual number.

How to use a Custom image as the ‘Add to Cart’ button

If you want to make the ‘Add to Cart’ button look nicer then you probably want to use a custom image for the button. WordPress eStore plugin allows you to specify a custom button image for every product. This way you can have nice call to action buttons on your product’s landing page.

When you configure the product, there is an optional product settings field called ‘Button Image URL‘ that you can use to specify a custom button image for the product.

I have uploaded a custom image to my site and used the URL of that image in the ‘Button Image URL’ field of the product settings and now the ‘Add to Cart’ button looks like the following (I have also embedded a picture in the post so the product display looks nicer):

Name: Demo Product Two
Description: Demonstrates Customized ‘Add to Cart’ button
Price: $1.00

The WordPress eStore plugin comes with a few different ‘Add to Cart’ and ‘Buy Now’ button images that you can use. All the images are included in the ‘images’ directory of the plugin. More style to the button can be added using CSS (stylesheet).

How to Display the Product in a Stylish Way

WP eStore comes with a few product display templates that you can use to display your product in a stylish way. Here is an example product display template:

Cool Test Product Two

Some test description of the product to show how this description field looks like. You can insert plain HTML in this description field too.

Available Qty: 44

Price: $50.00

Enter the following shortcode to display the product like the one above (9 is the product id of the product in this example):

[wp_eStore_fancy1 id=9]

Cool Test Product Two

Some test description of the product to show how this description field looks like. You can insert plain HTML in this description field too.

Available Qty: 44

Or Enter the following shortcode to display the product like the one above

[wp_eStore_fancy2 id=9]

You will have to fill out the Product Description and the Thumbnail image URL when configuring the product for this type of display.

More stylish display options are explained on the stylish product display documentation page.

How to Sell Limited Number of Copies of a Product

WordPress eStore plugin allows you to limit the number of copies of a product you sell. In order to sell limited copies of a product, simply enter the number of copies you want to sell in the ‘Available Copies’ field of the Product when you configure it.

The plugin will decrease that number every time that product sells. When the ‘Available Copies’ number reaches ‘0’ the plugin replaces the ‘Add to Cart’ button with a ‘Sold Out’ image like the following preventing further sales:

If you are having any problems please leave a comment below.