Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

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:
simple-cart-add-to-cart-button-with-custom-button-text-eample

Customize the Shopping Cart Image/Icon in the Cart

The simple shopping cart plugin has a filter that you can use to customize the Shopping Cart image icon that is displayed at the top of the cart.

Code Example

The following code example shows how you can use your own custom cart image.

Upload your custom cart image via the media library so you have the URL of the cart image ready.

Add the following code block to your theme’s functions.php file and specify the actual custom cart image URL:

add_filter('wspsc_cart_icon_image_src', 'override_cart_image_icon');
function override_cart_image_icon($cart_img_src)
{
    //Specify the URL of your custom cart image
    $cart_img_src = 'http://www.example.com/uploads/my-custom-cart-image-icon.jpg';
    return $cart_img_src;
}

Simple Shopping Cart – Creating a Specific Checkout Page

The simple shopping cart plugin has cart shortcodes that you can use anywhere on your site to show the shopping cart (the customers can directly checkout from there). So you don’t really need a specific checkout page.

However, if you want to create a specific/separate checkout page then you can do that too.

A specific checkout page can be useful for the following:

  • Add checkout/payment related messages to give more guidance to your customers
  • Show/offer some upsell products on your checkout page

Creating a Specific Checkout Page for Simple Cart

Step 1) Create a WordPress page called “Checkout” from the pages menu of your site (You can give this page any title you want).

Step 2) Add the simple shopping cart shortcode on this page:

[show_wp_shopping_cart]

or the following:

[always_show_wp_shopping_cart]

Step 3) Go to the simple cart settings menu and specify the URL of this checkout page that you just created in the ” Checkout Page URL” field.

Step 4) Add a link to your checkout page in your navigation menu or the sidebar (so customers can click that link to go to the checkout page).

Optionally, You Can Do the Following Too

The following steps are optional so use them if you think it will be useful for you.

Step 5) Enable the “Automatic redirection to checkout page” option from the settings menu of the plugin. That will auto redirect the customers to the checkout page when they add an item to the cart.

Step 6) Add any special messages or up-sell product offers on your checkout page.

Step 7) Use the compact shopping cart shortcode on your sidebar so customers can view a summary of the items in the cart.

WP eStore – Shopping Cart Templates (Full Cart Display Options)

WP eStore plugin comes with a few pre-configured shopping cart display templates. You can use any of these templates (by using a shortcode) to show the shopping cart on your site.

All the cart shortcodes are listed in our shortcodes documentation page.

Shopping Cart Template – Default Option

The following is an example of how the default cart template looks like:

estore-shopping-cart-template-1

Shopping Cart Template – Fancy 1

The following is an example of how the fancy 1 cart template looks like:

estore-shopping-cart-template-2

Shopping Cart Template – Fancy 2

The following is an example of how the fancy 2 cart template looks like:

estore-shopping-cart-template-3

Shopping Cart Template - With Product Thumbnail

The following is an example of how this one looks like:

estore-shopping-cart-template-4

Compact Shopping Cart Templates

In addition to the above full cart templates, the WP eStore plugin comes with a few compact cart shortcodes also.

View the compact cart display options page to learn more about it.

Creating a Specific Cart Checkout Page

This page explains how you can create a specific cart checkout page for your site if you want to.

Shortcode Inserter Addon for eStore Plugin

All the shortcodes are listed on this page. You can copy and paste any shortcode into a standard text or shortcode block.

This addon is no longer needed. The main plugin has this functionality already.

The shortcode inserter addon allows you to easily insert eStore shortcodes into your WordPress post/page editor.

Using This Addon

Once you have actived this addon a tinyMCE button (eStore) will appear in your post/page editor. You can click it to directly insert any eStore shortcode. screenshot of the shortcode manager addon

Clicking on the “eStore” button will popup a window where you can choose the shortcode you want to insert.

Select the shortcode then enter any necessary ID value and hit the “Insert and Close” button.

shortcode-inserter-user-interface

Download the Addon (v1.1)

You can download this addon from the addon download area of our support forum.

Please note that some of these free eStore addons are developed by our users in the community. So they do not have any advanced customization option. The description above explains exactly what this addon does.

Simple Shopping Cart – Resize/Customize the Shopping Cart Width

The simple shopping cart is responsive, so it will automatically fit into the container you put it in. However, if you want to re-size the width of the cart shortcode output then use the following CSS tweak:

Step 1) Grab this custom CSS plugin

Step 2) Add the following CSS code in that plugin.

The following make the width of the shopping cart 70% of the parent container:

.shopping_cart{
width: 70% !important;
}

Alternatively, you could use a pixel value like the following:

.shopping_cart{
width: 300px !important;
}

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:

shopping-cart-with-product-image-thumbnail

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"]

or

[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.

Adding a Shopping Cart to The Sidebar of Your WordPress site

Use the following steps to add a shopping cart to the sidebar of your WordPress site. This will allow your customers to see what items they have in their cart when browsing and adding items to the cart.

Steps to Add a Sidebar Shopping Cart

Step 1) Go to the widgets menu of your WordPress admin dashboard area.

Step 2) Add a standard text widget to the sidebar of your site. Your theme need to support sidebars.

adding-a-sidebar-cart-widget

Step 3) Use one of the following shortcodes to add the cart in this sidebar widget:

[show_wp_shopping_cart]

or

[always_show_wp_shopping_cart]

The first shortcode will only show the cart if there are any items in the cart. The 2nd one will always show the cart (even if the cart is empty).

Try them both and use the one that you like.

Below is an exmaple of how the cart should look on the sidebar:

how-the-cart-looks-on-the-sidebar

Adding the Cart to the Sidebar via a Template File

If you are a developer and you are trying to add the cart to the sidebar from your theme’s template file then use the following PHP function:

<?php echo print_wp_shopping_cart(); ?>

Simple Cart – Showing a Compact Shopping Cart

Sometimes you may want to display a compact shopping cart on your sidebar or in a post. This allows the users to see that they have items in the cart and they can click a view cart button to go to the full shopping cart page.

Use the following shortcode where you want to show the compact shopping cart:

[wp_compact_cart]

You can add this shortcode in a standard text widget to add the compact cart to the sidebar of your theme.

When there are no items in the cart, the shorcode will produce the following output:

compact-cart-shortcode-output-for-empty-cart

When users add item(s) to the cart, it will show a compact shopping cart output like the following:

compact-cart-shortcode-output-items-in-cart

Clicking the “view cart” link will take them to the page that you specified in the “Checkout Page URL” field of the plugin settings.

Compact Cart Style 2

This second compact cart uses a different style than the one mentioned above. It looks like the following example:

simple-cart-compact-cart-2-example

To use this compact cart on your site, use the following shortcode:

[wp_compact_cart2]

You can add this shortcode in a standard text widget to add it to the sidebar of your site.

Creating a Specific Checkout Page for Your Site

You should create a checkout page before using the compact cart shortcode. Here is how to do it (if you haven’t done it already):

Step 1) Create a new WordPress page

Step 2) Add the following shortcode to this newly created page

[always_show_wp_shopping_cart]

Step 3) Go to the plugin settings and specify the URL of this newly created page in the “Checkout Page URL” field.

Showing a Compact Cart In Your Theme’s Header

Add the following code in your “header.php” file to show a compact cart in your theme’s header area:

<?php echo do_shortcode('[wp_compact_cart]'); ?>

WP eStore Compact Cart Display Templates

WP eStore comes with a few compact shopping cart display templates. You can use these to show a compact version of the shopping cart on your sidebar.

You can add the following item to the cart and see how the compact shopping cart display looks like

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

1) Compact Cart Display Option 1

This compact cart will display here when there are items in the cart.

2) Compact Cart Display Option 2

Cart is empty (0)

3) Compact Cart Display Option 3

Cart is empty $0.00

4) Compact Cart Display Option 4

Cart is empty $0.00

5) Compact Cart Display Option 5

0 Items

How to Use a Compact Shopping Cart on Your Site?

You can use any of the above mentioned compact cart on your site by using a shortcode. Please refer to our shortcodes list documentation for details.

Remember that the compact shopping cart also requires that you use the full cart somewhere on your site. You can create a specific checkout page where you show the full cart and then use the compact cart in the sidebar or header area.

This page explains how you can create a specific cart checkout page for your site. When the users click on the “view cart” link inside the compact cart, it will take them to this cart checkout page.

Full Shopping Cart Display Templates

In addition to the above compact cart templates, the WP eStore plugin comes with a few full cart shortcodes also.

View the shopping cart display options page to learn more about it.