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.

Simple Shopping Cart – Adding Values to PayPal Custom Field

The simple shopping cart plugin has a filter that you can use to add extra data to the PayPal custom field.

Note: The plugin already uses the PayPal custom field to pass some parameters to PayPal. So you should append your data to this custom field (to make sure you don’t erase the custom data added by this plugin)

Code Example

The following code example shows how you can append data to the custom field (add this code to your theme’s functions.php file or a custom plugin).

add_filter('wpspc_cart_custom_field_value', 'append_my_custom_data');
function append_my_custom_data($custom_value)
{
    //Append my data using query parameter
    $custom_value = $custom_value . '&my_data=XYZ';
    return $custom_value;
}

This will pass your data along with the cart’s custom data to the PayPal’s custom field.

NextGen Gallery – Stacking More Product Boxes Side by Side

In the sell-photos-from-wordpress-site tutorial you learned how to sell your photos using NextGen Gallery and Simple PayPal Shopping Cart. In this tutorial I will show you how you can stack more product boxes side by side.

The following screenshot displays the products with the Add to Cart button in a NextGen gallery. In this example it created a two columns layout. But you may want to have three or more columns (depending on your design needs).

gallery-product-boxes-default

Setup Steps

Step 1: Create Your Custom Code

The plugin has the following class “ngg-gallery-thumbnail-box” that allows you to customize the displayed thumbnail box. In the following example 30% was added to the width tag so 3 product boxes can stack side by side.

Note: You may have to adjust this value to fit your width.

Custom Style Code:

.ngg-gallery-thumbnail-box {
float: left;
margin-right: 5px;
width: 30%;
}

Step 2: Add Your Custom Code

NextGen plugin has an area that allows you to add custom CSS code.

Go to Gallery -> Other Options -> Styles click on (Show Customize Options) link.

Make sure you save your changes.

adding-custom-css-code

The following screenshot displays three images aligned next to each other in the gallery.

gallery-product-boxes-with-more-columns

In the above example only three columns were created. You can have more columns if you want, just change the width percentage to a smaller number.

 

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

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

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?

Paypal will 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.

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 PayPal currency. Please see the following list of PayPal supported currencies.

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 has processed the payment?

Yes.

7.) Can I do 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 will need the eStore 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 cookie in the subscriber’s browser. If there is no PayPal cookie, the default language is U.S. English. “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.

The language is determined by a PayPal cookie in the subscriber’s browser. If there is no PayPal cookie, the default language is U.S. English. “The language you see in your computer/browser doesn’t determine what your customers will see.

11.) Can I return my customers to a Thank You page after payment?

Yes, view the thank you page documentation to learn how to use 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.

WordPress Shopping Cart – Additional Resources

WP Shopping Cart CSS

The following CSS classes have been included in the plugin. You will just have to update the CSS in the style sheet file (wp_shopping_cart_style.css) of the wordpress paypal shopping cart plugin if you want to customize the look and feel of the shopping cart.

  • shopping_cart
  • wp_cart_button.
  • wp_cart_checkout_button

Where is the Settings Menu for the Shopping Cart?

The settings menu for the Shopping cart is located under the Simple Cart Admin menu. Please see the following screenshot:

simple-shopping-cart-settings-menu-sc-1

How to Make the Shopping Cart Show the “Empty Cart” Message on a Post or Page

Use the following cart shortcode which will show the cart even if there are no items in it. When the cart is empty, it will show an empty cart message.

[always_show_wp_shopping_cart]

How to Resize the Add to Cart Buttons

Add the following to the CSS file of this pluign (wp_shopping_cart_style.css)

.wp_cart_button{
height: 20px;
width: 76px;
}

You will have to adjust the size to your needs.

How to Show the Add To Cart Buttons in the Sidebar (Method 1)

We have recently added new shortcodes that uses the WordPress shortcodes API. You can use these shortcodes to place a purchase button for a product on the sidebar widget of your WordPress site:

Here is how to do it:

Step 1) Go to the widgets menu of your WP Admin

Step 2) Add a standard text widget to the sidebar of your site

Step 3) Use one of the shortcodes to create a purchase button for your product that you want to sell:

[wp_cart_button name=”Test Product One” price=”29.95″]

[wp_cart_button name=”Test Product Two” price=”19.95″ shipping=”4.99″]

How to Show the Add To Cart Buttons in the Sidebar (Method 2)

Step 1) Download and activate the Executable PHP code plugin if you don’t have it already (any other PHP executable plugin will work too):

This plugin lets you call php functions from the widgets (it’s similar to the Text widget but it allows you execute PHP code too).

Step 2) Go to the widgets menu and add a ‘PHP Code’ widget to the sidebar (where you want to display the ‘Add to Cart’ buttons or shopping cart). Now you can enter HTML and PHP code here to display whatever you want to show. For example, entering the following line will display an add to cart button:

<?php
$product_name = "Product Name";
$product_price = "10.00";
echo print_wp_cart_button_for_product($product_name, $product_price);
?>

How to Collect Special Instructions from the Customer

If you need to collect special instructions from the customer for some customized work on the item you are selling then you can use the Collect Customer  Input Addon.

Setting up PayPal IPN Notification Feature

Read the PayPal IPN setup documentation.

Get the Total Number of Items in the Shopping Cart

If you are creating a mod/tweak for the simple shopping cart and you want to know the total number of items in the cart then check this post.

Return to the WP Shopping Cart plugin page.