Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

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.

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;
}

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.

WP Shopping Cart and WP Super Cache Workaround

If you are using the WP Super Cache plugin on your WordPress blog together with a WordPress Shopping Cart plugin (example: Simple WordPress PayPal Shopping Cart) then there is a good chance that you are experiencing some funny behavior with your cart plugin (example: the shopping cart doesn’t show the products after item addition).

The Problem

The reason behind it is that the WP Super Cache is a static caching plugin. It generates HTML files that are served directly by Apache without processing PHP scripts. So when a visitor on your blog adds a product to the shopping cart and is wondering why it’s not being displayed in the basket is probably because he/she is still loading the static HTML (cached) file of that page.

The Workaround

Go to your WP Super Cache plugin’s Advanced Settings menu and check the following two options then save it:

1) Don’t cache pages for known users
2) Late init

The following screenshot shows exactly what to do:

wp super cache workaround

Feel free to leave a comment if you are having any issues with this workaround.

Visit the WP Shopping Cart plugin page.