e-commerce | 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

Note: PayPal has deprecated the Smart Checkout feature. Switch to using the PayPal Commerce Platform (new API) which replaces the Smart Checkout option.

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.

configuring-paypal-smart-button-wordpress

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 eStore – How Does the Manual Checkout Option Work?

This documentation will address the usage and setup of the ‘Manual/Off-line Checkout Settings‘ feature of the WP eStore plugin.

What is the Manual Checkout Option?

The manual checkout option (when enabled) allows your customers to proceed to checkout with an item without needing to pay. This feature is useful if you have a business that has physical products where most of the transactions occur offline. Other business owners are able to use this feature to sell items to a non-for-profit organization where they give the items in return for a payment later on. The ‘Manual Checkout Option’ is also widely used for companies that wish to offer an in-store pickup and payment option. This feature is fully customizable allowing you to:

Choose if the product database is updated automatically after a manual checkout
Add a shipping charge
Customize emails sent from the plugin to both the seller and the buyer
Direct your customers to a specific page after the checkout is complete
Decide on functions that relate to the WP Affiliate and WP eMember plugins

How Do my Customer’s Checkout with the Manual Option?

1) Your customer goes to your store and checks out via the manual checkout option.

2) The customer gets an email that contains all the items he/she ordered.

3) The customer also gets some “instructions” in the email. You specify the instructions in the “Directions for the Customer” field under the manual checkout settings section. This instruction could read:
“Come to our store [address of your store] with the money to pickup your item.”

Example: Ability to Manually Checkout

Example: Manual Checkout Form

Locating the Manual Checkout Option

The manual checkout option is located in the ‘Settings’ menu of the WP eStore plugin.

Click on the ‘Settings’ menu of the WP eStore plugin.
Click on the ‘Payment Gateway Settings’ tab.
You will now see a section titled ‘Manual/Off-line Checkout Settings’. This documentation will focus on this feature of the plugin.

Configuring the Manual Checkout Option

Configuring the manual checkout option is simple and easy.

Step 1) Under the ‘Payment Gateway Settings‘ tab, you will need to check the ‘Use Multiple Payment Gateways‘ box to be able to offer both a standard checkout (for example, PayPal) and a manual checkout to your customers.

Step 2) Use the above steps to locate the ‘Manual Checkout Options’ area. Check the box next to ‘Use Manual Payment Option‘ to enable this feature.

Step 3) Enter in the email address of the seller (merchant) and choose a subject for the emails that will be sent from the plugin.

Step 4) If you would like to add directions for your customers, you can type these in the ‘Directions for Customers‘ box. Email tags can be used in this field.

Step 5) Paste in a return URL where you would like to send your customers after they have enter in their details for manual checkout.

Step 6) Tick the boxes for the following if they apply to your product: ‘Do Not Add Shipping Charge‘, ‘Automatically Update Customer & Product Database‘, ‘Create Membership Account‘, ‘Perform Autoresponder Signup‘, ‘Automatically Award Affiliate Commission‘ and ‘Send Product Download Links in the Email‘.

Step 7) You can edit the title of the ‘Manual Checkout Option’ viewed by your customers from the word ‘Manual’ to the wording of your choice in the ‘Manual Checkout Selector Label‘ field.

Step 8) Ensure you ‘Update‘ the changes you have made.

There are several ways to set up the manual/offline payment option for your site. It’s also a good idea to read this post, which outlines the available options.

Promoting Manual Checkout for the Products

To give your customers the option to use the ‘Manual Checkout Option’ you will need to use an ‘Add to Cart’ button. This can be a ‘fancy’ add to cart button or a simple add to cart button. Using a ‘Buy Now’ button will not offer your customers the choice of ‘Manual Checkout’. Your customer will see the option to checkout manually when they view the ‘Shopping Cart’. The ‘Manual’ option appears beneath their item total in a drop down menu. To complete a manual order, your customer will be required to fill in an order form.

When a customer checkouts using the ‘Manual’ option, their ‘Payment Status’ will appear as ‘Unpaid‘. This can be manually edited by admin once the customer pays cash in person or transfer money into the business account.

Running Additional Tasks After a Sale via the Simple Cart Plugin

You can run some additional tasks after the simple cart plugin has processed a sale.

Note: This should only be tried by a developer as it involves custom PHP coding.

The plugin includes action hooks that are triggered after the checkout data is processed. These hooks allow you to perform additional custom tasks. Below is a code snippet demonstrating how to use one of these action hooks.

You can add this code to the functions.php file of your theme or to a custom plugin.

PayPal Commerce Platform
PayPal Standard
Stripe Checkout

PayPal Commerce Platform

Here is example code if you are using the PayPal Commerce Platform (PPCP) checkout option.

add_action('wpsc_paypal_checkout_ipn_processed', 'wpsc_custom_post_payment_tasks');
function wpsc_custom_post_payment_tasks($ipn_data)
{
    //You can write the $ipn_data array's content to a file.
    $firstname = $ipn_data['first_name'];
    $lastname = $ipn_data['last_name'];
    $email = $ipn_data['payer_email']
    //TODO - Do something with the data
}

PayPal Standard

Here is example code if you are using the standard PayPal checkout option.

add_action('wpsc_paypal_ipn_processed', 'wpsc_pp_ipn_tasks');
function wpsc_pp_ipn_tasks($ipn_data)
{
    //You can write the $ipn_data array's content to a file to see
    //what paypal sends in the IPN
    $firstname = $ipn_data['first_name'];
    $lastname = $ipn_data['last_name'];
    $email = $ipn_data['payer_email']
    //Do something with the data

}

The PayPal IPN message consists of variables and is available as an array inside your function. You can access an element of the array by using the proper variable name. To see a list of all the available variables please check the PayPal IPN documentation page.

Stripe Checkout

Here is example code if you are using the Stripe checkout option.

add_action('wpsc_stripe_ipn_processed', 'wpsc_stripe_post_payment_tasks');
function wpsc_stripe_post_payment_tasks($ipn_data)
{
    //You can write the $ipn_data array's content to a file.
    $firstname = $ipn_data['first_name'];
    $lastname = $ipn_data['last_name'];
    $email = $ipn_data['payer_email']
    //TODO - Do something with the data
}

Product Display Template for Selling Videos

If you are selling videos from your WordPress site and you want to present the video product using a nice template then use this addon plugin.

You can configure a preview of the video that you are selling so your customers can preview it before purchasing the item.

Note: The video preview will need to be a YouTube video.

screenshot showing the video product template

Clicking on the “Play” button will preview the video in a lightbox window (see example below).

video-product-display-lightbox-preview

Installing the Video Product Template 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 (eStore-video-products.zip)
Click “Install Now” and then activate the plugin

Using this Addon

When this addon is active, You can easily enter some video specific information in the “Add/Edit Product” interface.

Video Preview URL: URL of the video that will be used as a preview on the front end (YouTube/Vimeo)
Video Duration: Duration of the video (It will also be displayed on the front end)

screenshot showing how to configure information for video product template

Since the video template requires a thumbnail for the video you will need to specify one in the Thumbnail Image URL field.

Click the “Save” button to update the product.

Video Product Template Display

Create a new post/page and specify the following shortcode to show your video template:

[wp_eStore_video_product_template id=”2″]

Here, The value of id is the unique product ID for your eStore video product.

screenshot showing the video product template

Get the Video Product Display Template Addon

The price of this addon is $39.95

PleaseÂ contact usÂ to purchase this addon.

Copy Customer Details to Create a New Customer Record

If you needed to create multiple customer record entries with a slight variation then use the “copy customer record” feature of the eStore plugin.

Go to the “Add/Edit Customers” interface and look at the “Copy Customer Details from an Existing Customer” section. See screenshot below:

copy-customer-details-interface

You can copy the existing customer record then change the value of some fields (for example: the products they purchased) then save it as a new record.

Google Analytics E-Commerce Tracking Addon for eStore Plugin

google-analytics-ecommerce-tracking-addon-thumbnail

Note: This is not for GA4.

The Google Analytics E-Commerce Tracking addon allows you to do ecommerce tracking without needing any another analytics plugin.

You just have to activate this addon and configure some Google Analytics API details and you are all set.

This addon uses universal tracking so the user doesn’t even have to come back to the thank you page for it to work.

E-Commerce Tracking Usage Instructions

1) Once you have installed the addon Go to WP eStore->eCommerce Tracking.

screenshot showing the eStore google analytics tracking addon menu

2) Enter your Google Analytics Tracking ID.

screenshot showing the eStore google analytics tracking addon settings

3) Save the settings.

Download E-Commerce Tracking Addon

You can download this addon by clicking here.

Automatically Return Customers from PayPal to Your Thank You Page

The “Return URL” setting in the Shopping Cart plugin allows you to redirect customers to a “Thank You” page following a transaction. To set this up:

Access the Settings menu of the plugin.
Locate the “Return URL” field.
Enter the desired URL where you want customers to be redirected post-transaction.
Ensure to save your changes by clicking on the “Save” button in the Settings menu.

With this configuration, customers will automatically be directed to the specified “Return URL” after completing their transaction, enhancing their shopping experience.

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.

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

[show_wp_shopping_cart]

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