Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

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(); ?>

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.

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]'); ?>

How to Enable PayPal API Access and Get the API Details

The following steps (with screenshots) show you how you can enable API access in your PayPal account and get the API details to use in your shopping cart admin/configuration screen:

  • Log in to your PayPal Business account.
  • Make sure your PayPal account is verified (you need to verify your account before requesting API credentials).
  • Click on the My Account tab (if you are not there already)
  • Click on the Profile link.
  • Click on the My Selling Tools link

paypal-my-selling-tools-link

  • Click on the update button in the API Access row

paypal-api-access-link

  • Click Request API credentials link.

paypal-request-api-access-screen

  • Select the Request API signature radio box.
  • Click Agree and Submit.

api-request-agreement-screen

  • Copy and paste the API username, password, and signature into your shopping cart’s configuration or administration screen.

You can also check this page on PayPal for instruction on how to get your API details.

Translating The WP Simple Shopping Cart Plugin

Method 1

You can translate the plugin from translate.wordpress.org site. Link below:

https://translate.wordpress.org/projects/wp-plugins/wordpress-simple-paypal-shopping-cart

Method 2

Alternatively, You can use the PO File editor to do the translation. Here is a step by step guide on how you can translate the WordPress Simple Shopping Cart plugin in your language.

1. Download and install Poedit (http://www.poedit.net/download.php)

2. Get the plugins POT file (wordpress-simple-paypal-shopping-cart.pot). You can find this file inside the “languages” folder of this plugin.

3. Run Poedit software (if it is not running already)

4. Open the POT file in Poedit. (Click the open link in the software then browse to the POT file location and select that file)

5. Select each translatable text and add the translation in the box that says “Translation”

6. Finish translating the whole file.

7. Go to File -> Save as to save your translations in a PO file.

8. When you are finished translating, go to File -> Save as again to generate the MO file.

Or you can set your Poedit to always compile a MO file when saving changes by clicking File -> Preferences and on the Editor tab check the Automatically compile .mo file on save box.

9. Contact us and send us the translated .mo and .po files and we will add it to the plugin.

WP Simple Shopping Cart – How to Sell Digital Downloads

WP Simple Shopping Cart allows you to easily sell digital downloads from your WordPress site.

Table of Contents

Video Summary

Example Shortcode

Here is an example shortcode that shows how you can specify a download link for a digital product with the standard add to cart button:

[wp_cart_button name="My Download" price="5.00" file_url="http://example.com/wp-content/uploads/my-ebook1.pdf"]

Below is an example shortcode that shows how you can specify a download link for digital item with the product box display shortcode:

[wp_cart_display_product name="My Download Product" price="5.00" file_url="http://example.com/uploads/ebook1.pdf" thumbnail="http://www.example.com/product-image.jpg" description="This is a short description of the product"]

Flagging an Item as Digital Only

To mark an item as digital-only, add the digital="1" parameter to the shortcode. Digital-only items do not require a shipping address during checkout. Here’s an example of how to use the digital parameter in the shortcode:

[wp_cart_button name="My Download" price="5.00" digital="1" file_url="http://example.com/wp-content/uploads/my-ebook1.pdf"]

Digital File Delivery to Your Customer

Once the payment is complete, your customer will receive a notification email containing the download link(s) for the items they purchased.

Below is a screenshot of the email your customer will receive:

screenshot showing how download link is sent via email by wp shopping cart plugin

PayPal IPN Feature Settings

You will need to make sure that you have enabled PayPal IPN feature in your paypal account. Log into your PayPal account and enable the IPN feature if you don’t have it enabled already. Check the how to setup PayPal IPN video tuorial.

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.

Table of Contents

Video Summary

Shortcode Example for a Product Box

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.

Using Blocks Instead of Shortcode

You can also use blocks instead of shortcodes to insert a product box. Follow these guidelines if you wish to utilize the blocks provided by the simple shopping cart plugin.

Sell Pay Per View – Setting Up Pay Per View Option Using WP eStore Plugin

Pay-per-view (PPV) is a type of service by which a customer can purchase events to view on your site.

You sell access to a post or page that has the content inside it. The content is available for view after the customer makes a payment. The content can be a video (embedded on the post or page), a digital download, images etc.

When to Use “Pay Per View” or “On Demand” Delivery Method?

There are 2 ways you can deliver digital content to your customers:

  • Direct download via encrypted file download option
  • Pay Per View / On-Demand Access to a webpage that has the content in it

Direct Download:
The direct download method means you are letting your customer download a file to their computer (this is the default method of digital content delivery)

Pay Per View / On-Demand Access:
This covers everything else that does not fall under the direct download category. This method is used to give a customer access to the content without a direct download (the customer views the content on your site via the browser). If you want to give your customer access to a webpage which contains the digital content (for example: a page with embedded streaming video) then use one of the “Pay Per View” methods explained below.

1. The New “Pay Per View” Method

The newly added “Using WordPress Permalink as Digital Product” feature can be used to configure better “Pay Per View” option:

2. Old “Pay Per View” Method

This method should not be used anymore as we will only support the new Pay Per View method (which is more robust) going forward.

The following video shows how to setup a Pay Per View model to sell streaming videos using WP eStore:

eStore Pay Per View

WordPress Simple Shopping Cart Video Tutorial

This page contains video tutorials for the Free WordPress Simple Shopping Cart plugin.

WP Shopping Cart Quick Usage Guide

Video 1 (Usage Overview)

Video 2 (Selling Digital Media Files)

Video 3 (Shipping Setup)

Video 4 (Displaying a Product Box)

Video 5 (Creating a Specific Checkout Page)

Video 6 (Showing or Hiding Shopping Cart)

Video 7 (Using Discount Coupons)

Video 8 (Using Product Variations)

Simple Cart Checkout Demonstration

Stripe Checkout Demonstration

Simple WP Shopping Cart FAQ

1.) Can this plugin be used to accept PayPal payment for a service or a product?

Yes.

2.) How do I get the buyer’s address for shipping purpose?

The orders menu of the plugin will contain the address for the order if the customer purchased physical product(s)

PayPal will also send you (the seller) a ‘Payment Notification’ email after the buyer pays for the product which will contain the buyer’s address.

3.) Can the shopping cart be added to a separate checkout page?

Yes. You can add the shopping cart anywhere on your site.

4.) Does this plugin have multiple currency (example: You can specify the currency you wish to accept) support?

Yes, as long as the currency is a supported by PayPal and/or Stripe.

5.) Is the ‘Add to Cart’ button (image or text) customizable?

Yes.

6.) Does this plugin use a return URL to redirect customers to a specified page (example: Thank You Page) after PayPal and/or Stripe has processed the payment?

Yes, you can specify a “Return URL” in the settings menu of the plugin.

7.) Can I set up variations with different prices using the Simple Shopping Cart?

You can only do variations that do not change the price of an item. The following article will explain more about using variations with the Simple Shopping Cart. If you want to use variations that have different prices you can try our WP eStore plugin for this. The following article will explain more about this.

8.) How can I change the “Check Out With PayPal” image?

Simply replace the image located in the “image directory” of the plugin (via FTP).

9.) How do I change the language of the PayPal landing page?

The language is determined by a PayPal based on the customer’s location. Note that the language you see in your computer/browser doesn’t determine what your customers will see.

10.) Can I use a compact shopping cart with this plugin?

Yes, view the compact cart documentation to learn how to use it.