WP Shopping Cart | Tips and Tricks WP eCommerce

How to Customize Smart Checkout Buttons – WP Shopping Cart

Once you have configured the PayPal Smart Button Checkout for the WP Simple Shopping Cart Plugin you can customize the checkout button appearance. The customization tools for the smart button checkout enable you to create a visually appearing payment area for your potential customers. Use the Size, Color, Shape and Layout tools to create a customized checkout button.

Customizing the Look of Your PayPal Smart Button Checkout

Step 1) Ensure you have completed the configuration needed for PayPal Smart Checkout.

Step 2) Click on the Settings menu under Simple Cart.

Step 3) Choose the Advanced Settings tab. You will now see a number of customization tools.

Step 4) Choose the Size of your PayPal Smart Checkout button by clicking the drop-down menu. The options are Medium, Large or Responsive (meaning it will change depending on the device it is viewed on).

Step 5) Choose the Color of your Smart Checkout button by clicking on the drop-down menu. The color choices include: Gold, Blue, Silver or Black.

Black Smart Button Checkout

Blue Smart Button Checkout

Silver Smart Button Checkout

Step 6) Choose the Shape of your Smart Checkout button. Mark the option next to either Rectangular or Pill.

rectangular-smart-checkout-wp-simple-cart

Rectangular Smart Button Checkout

Pill Smart Button Checkout

Step 7) Choose the Layout of your Smart Checkout button. Mark the option next to either Vertical or Horizontal.

Step 7) Choose if you’d like to allow your customers to use PayPal Credit or ELV to pay for your products or services. Mark the checkbox next to either of the options to allow them on your Smart Checkout.

PayPal Credit: This is a means of payment where the customer pays off their purchase with PayPal over time.

ELV: Standing for Elektronisches Lastschriftverfahren, ELV is a popular payment method in Germany. It allows the customer to pay via their bank account.

Step 8) Ensure you Update Options to save the customization changes you have made.

Customized PayPal Smart Button

Using the customization tools for PayPal Smart Buttons, you can create a checkout that matches the theme of your website.

Enabling PayPal Smart Button Checkout – Setup and Configuration

The PayPal Smart Checkout is an option you can enable in your WP Simple Cart Plugin. The Smart Checkout Button provides your customers with an alternative checkout method. The PayPal Smart Button Checkout contains a number of buttons that allow your customers to checkout using their PayPal Account, their credit card (Visa, Mastercard), Buy Now Pay Later or PayPal credit.

The checkout form is displayed to the customer in a popup window.

Checkout Demo Video

The following video shows how a checkout works with PayPal smart button (from a customers point of view):

Configuring PayPal Smart Checkout Button

Step 1) Ensure you have the latest version of the WP Simple PayPal Shopping Cart Plugin installed and activated on your WordPress site.

Step 2) Click on the Settings menu under Simple Cart.

Step 3) Choose the Advanced Settings tab.

Step 4) You will now see a section titled PayPal Smart Checkout Settings.

Step 5) Mark the checkbox next to Enable PayPal Smart Checkout.

Step 6) To set up this feature you will now need to Log in to your PayPal Developer Account to locate your API details. You will need a PayPal Business Account.

Step 7) Click on the My Apps & Credentials menu within your PayPal Developer Account.

Step 8) Scroll down to the Rest API Apps section.

Step 9) Click the Create App button.

Step 10) Give your app a name that relates to it’s intended use.

Step 11) Click the Create App button.

Step 12) You will now see your Sandbox Client ID and your Sandbox Secret Key (once you click the ‘show’ button).

Step 13) Click the Live button in the left hand corner to show your Live API Keys.

Step 14) Copy and paste both your Live and Test Client ID’s and your Live and Test Secret Keys from your PayPal account into the settings menu of your WP PayPal Shopping Cart. Ensure you paste them in the correct fields.

Step 15) If you would only like to offer Smart PayPal Checkout, mark the checkbox next to Disable Standard PayPal Checkout. Alternatively, you can choose to offer both at once by leaving this box unmarked.

Step 15) Click the Update Options button. You have now completed the setting configuration for PayPal Smart Checkout.

Step 16) Your Simple PayPal Shopping Cart Products will now be able to be purchased through this PayPal checkout method.

Purchasing a Product via PayPal Smart Checkout

A customer can add an item to your Simple PayPal Shopping Cart. Once the item appears in the cart, the customer can go ahead and checkout using PayPal Smart Checkout. They can click the button that applies to them.

For example, in the following example, the customer clicks the PayPal button because they wish to pay directly from their PayPal account.

Once a customer clicks on one of the PayPal Smart Checkout buttons, a popup appears where they can complete the checkout process by entering in the appropriate details.

Customizing the Smart Checkout Buttons

Read our documentation on smart checkout buttons customization.

PayPal’s Pay In 4 (Buy Now Pay Later Option)

Read our PayPal’s buy now pay later documentation to learn more about it.

WP Simple Cart – Collect Customer Input in the Shopping Cart

This is an addon for WP Simple Cart Plugin that can be used to collect customer input in the shopping cart at the time of checkout. This is really useful if you are selling products that need to collect some kind of input from your customers (example: a name that will go on the product).

You can use this addon to configure custom input fields in the admin interface of this addon. Those inputs then show up in the shopping cart so your customers can enter the value when doing the checkout.

The input fields show up in the cart like the following example:

simple-cart-collect-customer-input-addon-screenshot

The input values entered by the customer will be saved with the customer’s order/transaction in the Simple Cart plugin’s menu.

Installing the Addon

You can install this addon the same way you install any WordPress plugin:

Go to the Add New plugins screen in your WordPress admin area
Click the upload tab
Browse for the addon file (simple-cart-collect-customer-input.zip)
Click Install Now and then activate the plugin

Using the Simple Cart Custom Input Addon

Step 1) Go to the Addon’s Menu

In order to configure the collect customer fields, click on the Customer Input sub-menu under the Simple Cart menu of the plugin.

Step 2) Configure the Custom Fields

Click on the Add New button to add custom fields that you want to show in the cart to collect data.

Enter a label for the input field (the addon will use this label in the cart). You can specify a help text that will be shown below the text field.

Optionally, you can make the input field to be a required field (so customers have to enter a value before checkout).

Step 3) Save the Settings

Once you are done configuring the fields, save the settings.

The input fields will just show up in the shopping cart.

Viewing the Custom Fields Value

You can edit/view a transaction from the Cart Orders menu which will show the customer input values. You can see the custom fields where you see the order details of the transaction.

Adding the Input Field Value to the Notification Email

You can optionally add this input field to the sale notification email also. Use the following email merge tag in the notification email settings:

{custom_fields}

Get the Simple Cart Customer Input Addon

The price of this addon is $39

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 and ActiveCampaign Integration Addon

You can integrate the eStore plugin with ActiveCampaign autoresponder so that the customers can be automatically signed up to your ActiveCampaign list (with any tags that you want to apply).

The users are added to the ActiveCampaign list when any of the following event happens:

A customer purchases a product that has an ActiveCampaign list ID specified for it.
A visitor submits a squeeze form for a product that has an ActiveCampaign list ID specified for it.

Installing the ActiveCampaign Addon

You can install this addon the same way you install any WordPress plugin:

Go to the Add New plugins screen in your WordPress admin area
Click the Upload button
Browse for the addon file (estore-active-campaign-addon.zip)
Click Install Now and then activate the plugin

Addon Usage

Step 1) Click on the ActiveCampaign menu link from the main eStore plugin’s admin menu.

Step 2) Enable the integration then fill in the API key and API URL details. Then hit the “update” button to save.

You can get the API details from your ActiveCampaign account.

Step 3) You need to get the List ID of the list where you want to add the users.

Getting the List ID value of Your ActiveCampaign List

If you select the list and look in the URL you should see the list id there:

Edit the eStore product in question and specify your ActiveCampaign List ID in the List Name field of the product. Example value: 2

autoresponder-generic-list-id-tag-id-setup

The addon will add the customer to this list.

Specifying Tags (Optional)

Optionally, you can specify tags together with the list ID value. Lets say the list ID is 2 and you want to apply tags “tag1”, “tag2” and “tag3”. You would enter the list ID and tags using the following format:

2|tag1,tag2,tag3

Get the ActiveCampaign Addon

The price of this addon is $29.95

Customize the PayPal Checkout Button Image in the Shopping Cart

The simple shopping cart plugin has a filter that you can use to customize the PayPal checkout button image of the cart and use your own custom image for the button.

Code Example

The following code example shows how you can use your own custom PayPal checkout button image.

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

Add the following code to your theme’s functions.php file and specify the actual custom image URL of the checkout button that you want to use.

add_filter('wspsc_cart_checkout_button_image_src', 'override_checkout_button_image');
function override_checkout_button_image($checkout_button_img_src)
{
    //Specify the URL of your custom image
    $checkout_button_img_src = 'http://www.example.com/uploads/my-custom-checkout-image.jpg';
    return $checkout_button_img_src;
}

Simple Shopping Cart – Adding Extra PayPal Input Fields

The simple shopping cart plugin has a filter that you can use to add extra input fields that will get sent to PayPal as part of the checkout.

Code Example

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

It will add the language code field to force a specific language on the PayPal checkout page.

add_filter('wspsc_cart_extra_paypal_fields', 'append_extra_fields');
function append_extra_fields($output)
{
    //Add the PayPal language code field
    $output = '<input name="lc" type="hidden" value="US" />';
    return $output;
}

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