Adding PayPal Shopping Cart Support to WordPress

This tutorial takes you through the process of adding PayPal shopping cart support to WordPress.

PayPal allows you to create Shopping cart buttons to display next to products for sale on your site. Shopping cart buttons are typically labelled Add to Cart.

When a user clicks a Shopping cart button, the product is added to the PayPal shopping cart. The customer can access the shopping cart and checkout at any time.

The PayPal shopping cart resides on the PayPal website and there is no need to install shopping cart software on your WordPress site.

Installing and running shopping cart software can be complex. Adding PayPal shopping cart support to WordPress is a simple way to start selling quickly. There is no steep learning curve and PayPal assumes almost all of the administrative burden.

Contents

  1. How the PayPal Shopping cart works?
  2. Setting up a PayPal Shopping cart button
  3. Creating a PayPal Shopping cart button
  4. Creating a View cart button
  5. Creating additional Shopping cart buttons
  6. Adding Shopping cart buttons to your WordPress website
  7. Adding a Shopping cart button
  8. Adding the View cart button
  9. Setting up inventory and profit tracking for your Shopping cart button
  10. Configuring advanced settings for your Shopping cart button
  11. Streamlining checkout
  12. Customized Cancel and Success pages
  13. Setting up advanced variables
  14. Editing your PayPal Shopping cart button

How the PayPal Shopping cart works?

Here’s an overview of how the PayPal Shopping Cart works:

  1. You display PayPal Add to Cart buttons next to your products on your WordPress site.
  2. Your customer clicks an Add to Cart button to add a product to the PayPal shopping cart.
  3. The customer clicks:
    1. Continue shopping to be returned to your site where they can add more products to the cart, and later checkout; or
    2. Checkout to immediately check out.
  4. When the customer checks out, they are taken to the PayPal website where they can:
    1. Login to their PayPal account to pay; or
    2. Enter their billing information to pay using their credit card.
  5. The customer confirms the transaction and pays.
  6. They are taken to the PayPal Thank You page where they can view or print the subscription confirmation.
  7. The customer receives payment authorization notices by email.

Setting up a PayPal Shopping cart button

Setting up a PayPal Shopping cart button is a relatively simple process:

  1. Create a PayPal Shopping cart button in your PayPal account.
  2. Create a View cart button in your PayPal account.
  3. Add the button code to your WordPress site.

PayPal also offers inventory and profit tracking and advanced configuration options for advanced users.

You can edit and update your Shopping cart buttons in your PayPal account at any time.

Creating a PayPal Shopping cart button

The first step is to create your PayPal Shopping cart button in your PayPal account and generate the button code.

The sections that follow take you through a step-by-step process of configuring your PayPal Shopping cart button.

Accessing the button settings

To access the PayPal button settings:

  1. Login to your Business or Premier PayPal account.
  2. Click Tools > All Tools in the top bar.
  3. Click Open in PayPal buttons.Tip! Click the heart in PayPal buttons to add this option to the Tools menu for easier access next time you login.
  4. In Related items (right column) click Create new button.

Entering basic Shopping cart button information

The Create new button link opens the Create PayPal payment button page. This page is used to create all types of PayPal buttons.

To enter your basic Shopping cart button information:

  1. Click

    to expand Step 1: Choose a button type and enter your payment details to show the available options. <expand-icon.png>.
  2. Choose a button type: Select Shopping cart in the drop-down menu.
  3. Item name: Enter the name of your product or service.
  4. Item ID: This is an optional field. Enter a unique ID if you want PayPal to track inventory levels of your products. See Setting up inventory and profit tracking for more.
  5. Price and Currency: Enter the price of your product or service and select your currency in the drop-down menu.
    Leave the above fields blank if you sell different product variations at different prices, for example different t shirt sizes at different prices. We will set these prices in Setting options with prices.

The settings configured up to now will be sufficient for many products. If you are satisfied with your button at this stage, you can skip the next sections and move on to Generating the Shopping cart button code section below.

Adding Shopping cart button options and prices

The Customize button section allow you to customize the function and look your Shopping cart button.

Setting options with prices

Check the Add a drop-down menu with prices and options to set up different options at different prices. When you select this option the Price and Currency fields above are inactive and greyed out, because they are incompatible with this option.

  • Name of drop-down menu: Enter a name that describes the menu, for example Size or Colour. This text displays above the drop-down menu.
  • Menu option name: Enter the name of the option, for example Small, Medium or Large. These names display as menu options in the drop-down menu, before the price.
  • Price: Enter the price of each option.
  • Currency: Select your currency in the drop-down menu. The same currency is used for all options.
  • Add another option: Click this link to add additional option boxes. You can add a total of 10.
  • Remove option: Click this link to remove the last option.
  • Done: Click to save your settings and preview the button in Your Customer’s view.
Setting options without prices

Check the Add a drop-down menu option to set up options without prices. The price set in the Price field will be charged for all options. For example language courses for different languages that are all sold for the same price.

  • Name of drop-down menu: Enter text that describes your product or service, for example Course or Language. This text displays above the drop-down menu.
  • Menu option name: The name of the option, for example English, Spanish or German. This name displays as an option in the menu.
  • Add another option: Click to add another option box. You can add a total of 10 options.
  • Done: Click to save your settings and preview the button in Your Customer’s view.
Adding a text field

The Add a text field option allows you to add a text field in which your customer can enter personalized information. This is useful if you sell products like personalized tee shirts, engraving or embroidery etc.

  • Enter the name of text field: Enter text that helps your customer understand and complete the field.
  • Done: Click to save your settings and preview the button in Your Customer’s view.

Customizing the Shopping cart button appearance

You can change the appearance of the default PayPal Shopping cart button or use your own button image.

To customize the button appearance click Customize text or appearance to access the options.

  • PayPal button: This is the default selection and signifies that a button image provided by PayPal will be used.
    • Use a smaller button: Check this option to use a small-sized Shopping cart button –
    • Country and language for button: Select your country and language. Your choice will be applied to the button and will change the syntax and spelling to that of the chosen language.
  • Use your own button image: This option allows you to link to a custom button image, instead of using the images provided by PayPal. This is useful if it is important to match the button with the look and feel of your website, for example.Enter the URL to the image. If your image is hosted on an SSL-secured server, change the text box to begin with https://.

Overriding default shipping rates

Shipping preferences and rates are set in your Profile and apply to all applicable buttons.

The Shipping field allows you to override the default shipping rates and set a specified amount for shipping the product.

The specified rate will only work if the Override shipping methods per transaction option is checked in your Profile. You can access this option at Profile > My selling tools > Shipping Calculations.

To override your default shipping rates, enter the amount to charge for shipping in the field provided.

Overriding default tax information

Tax is automatically calculated on a per transaction basis using the tax rates you set in your Profile.

Leave the Tax field blank to use the default tax rate.

To override the default tax rate, enter a percentage in the Tax field. For non-taxable items, enter zero (0.000) to override automatic sales tax calculation.

Setting your merchant account ID

PayPal offers two options for setting your merchant account ID:

  • Use my secure merchant account ID: This option associates transactions from your Shopping cart button with your PayPal merchant ID. This is the default setting and we strongly recommend that you use it. It ensures that your email address is not used in the button code, preventing its exposure to spammers.
  • Use my primary email address: This option associates transactions from your Shopping cart button with your primary email address. It may be useful in larger organizations to identify the person responsible for handling subscriptions. Only the selected email address receives email payment notifications.If your Profile contains multiple email addresses, select the address to use as the primary email address for this button in the drop-down menu.Note that this option includes the selected primary email address in the button code, making it vulnerable to spammers. For this reason, PayPal recommends using the default (first) option, if possible.

If you have a Premium account, your email address may still appear in the <head> tag of your checkout page for both options.

Generating the Shopping cart button code

For most users, the button will be sufficiently configured at this stage.

If you are satisfied with your button settings, you can go ahead and click

at the bottom of the page to generate the Shopping cart button code. <create-button.png>

If you are an advanced user, you may want to configure additional advanced options before generating the button code:

We cover these topics later in this tutorial.

When you click

, the page containing the button code opens automatically. <create-button.png>

The code in our example generates a Shopping cart button for the Sun T Shirt for Small, Medium and Large sizes at different prices.

To copy the button code:

  1. Click Select Code.
  2. Right-click and copy the code to the clipboard.
  3. For now, paste the code in Notepad or a similar application for later use when pasting it in WordPress.

Creating a View cart button

The View cart button allows your customers to access their PayPal shopping cart at any stage during their visit.

Note! You only need one View cart button for your website.

To create the View cart button:

  1. Go to Tools > PayPal buttons > My Saved Buttons.
  2. Click Action > View code for any Shopping cart button.
  3. Scroll past the code to Create more buttons.
  4. Click Create a View cart button.
  5. Style the button in Customize button and view any changes in Your customer’s view.
  • PayPal button: This is the default setting that signifies that PayPal button images will be used.
    • Use smaller button: Check to use a smaller View cart button –
  • Use your own button image: This option allows you to link to a custom button image, instead of using PayPal button images. This is useful if it is important to match the button with the look and feel of your website, for example.Enter the URL to the image. If your image is hosted on an SSL-secured server, change the text box to begin with https://.
  1. Click

    to generate the View cart button code. <create-button.png>
  2. The page containing the button code opens automatically.
  3. Copy the button code:
    1. Click Select Code.
    2. Right-click and copy the code to the clipboard.
    3. For now, paste the code in Notepad or a similar application for later use when pasting to WordPress.

Creating additional Shopping cart buttons

You need one Shopping cart button for every product or service you sell on your site.

The Create similar button action allows you to quickly create similar buttons. You can access this action in PayPal buttons > My Saved Buttons > <Button name>.

When you click this action it loads the button settings for the selected button and you can quickly make minor changes and save the new button with a unique name.

Adding Shopping cart buttons to your WordPress website

We use WordPress to demonstrate this section. These instructions can be adapted for any platform that allows you to access to the HTML code of your pages. The editor in most CMSs has a Text or similar option which allows you to see the HTML code.

Once you have created your Shopping cart and View cart buttons on the PayPal website, the next step is to display them on your website.

Adding a Shopping cart button

In WordPress, you can paste the Shopping cart button code to any page page or post, or use it in a widget area.

To display the Shopping cart button on a page:

  1. Create a page showcasing your product or edit an existing page.
  2. Click Text in the editor to access the HTML code.
  3. Paste the Shopping cart button code you copied from PayPal.

  1. Click Visual to see the button in the editor.
  2. Publish your page or changes to make your button live.

Adding the View cart button

The View cart button allows your customer to access their shopping cart at any time. You can add this button to any page, post or widget area.

To display the View cart button in a widget area.

  1. Go to Appearance > Widgets.
  2. Select the Custom HTML widget.
  3. Add it to an appropriate widget area on your site, typically the side bar area.

  1. Paste the code you copied from PayPal into the Content area of the widget.
  2. Click Save.
  3. Visit your site to view the button in the widget area.
  4. Add products to the cart and click the View Cart button to view the shopping cart on PayPal.<paypal-shopping-cart.png>

Setting up inventory and profit tracking for your Shopping cart button

This is an advanced topic that you can ignore, without consequence, if you like. These settings should be configured before generating the button code.

To access the inventory and profit tracking settings, click

to expand Step 2: Track inventory, profit & loss on the PayPal button settings page. These settings are optional settings. <expand-icon.png>

  • Inventory tracking is useful to alert you when stocks are low, and ensure you do not sell products that are out of stock.
  • Profit and loss tracking allows you enter your cost price to monitor profits on sales.

You can enable both inventory and profit tracking, or either option.

To enable tracking:

  1. Track inventory: Check this option to track your inventory.When you check the box, Item and option tracking settings become active in the box below.
  2. Track profit and losses: Check this option to enter a cost price to track your profits.When you click the checkbox, the Cost field becomes active in the box below.
  3. You can track your products by item or by option. The options you selected in Adding Shopping cart button options and prices determine the options that are available for tracking:
    1. By item: This setting tracks your inventory by item only, regardless of any product options that you may have configured for the button.<tracking-by-item.png>
    2. By option: This setting tracks your inventory by the product options you specified for the button.

      1. Item ID: Enter an arbitrary ID for tracking purposes.
      2. Qty in stock: Enter the quantity of the item you have in stock.
      3. Alert qty: Enter the alert quantity. PayPal will send you an email when stocks reach this quantity.
      4. Price/Cost: Enter the cost price of the product. This box will greyed out and inactive unless the Track profit and loss option is checked.
  1. Can customers buy an item when it is sold out: This option allows you to disallow purchasing if your tracking options indicate a product is out of stock.Choose the option that best suits your circumstances, depending on your ability to restock quickly and your delivery-time obligations:
    1. Yes: Select to allow your customers to complete a sale, regardless of the quantity indicated to be in-stock.
    2. No: Select this option to not allow purchases of out-of-stock items.You can optionally direct the customer to a custom page that provides instructions on back ordering, or whatever may be appropriate in your circumstances. To do this, set up your custom page on your website and enter the URL in the box provided.

Configuring advanced settings for your Shopping cart button

This is an advanced topic that you can ignore, without consequence, if you like. These settings should be configured before generating the button code.

PayPal offers optional advanced settings for your Shopping cart button.

To access these settings, click

to expand Step 3: Customize advanced features (optional) on the PayPal settings page. <expand-icon.png>

Streamlining checkout

There are two options to streamline the checkout process:

  1. Can your customer add special instructions in a message to you:This option allows you to omit the Special Instructions message box that is included during checkout by default. This box is typically used for delivery-related instructions and may not be required.Select No to omit the box.
  2. Do you need your customer’s shipping address:By default, PayPal requests a shipping address during checkout. If you are not selling physical products, a shipping address may not be required and you can omit it.Select No to skip the shipping address section during checkout and further streamline the process.

Customized Cancel and Success pages

PayPal allows you to customize the pages your customer is taken to after successfully checking out or cancelling their checkout.

  • Take customers to this URL when they cancel their checkout:If you enable this option, when a customer cancels their checkout process, they will be taken to a custom page on your website, instead of the default PayPal cancellation page. This provides an opportunity to get them to change their mind about cancelling.To enable this functionality, check the box and enter the URL to the custom page on your website.
  • Take customers to this URL when they finish their checkout:If you enable this option, your customer will be taken to a custom page on your website, instead of the default PayPal success page, after successfully checking out. This provides a great opportunity to personally thank them.To enable this functionality, check the option box and enter the URL to the custom page on your website.

Setting up advanced variables

Note! Advanced variables require HTML programming experience and should only be used if you really know what you are doing.

Developers can use the Advanced variables field to create and customize buttons using PayPal HTML payment button variables.

Editing your PayPal Shopping cart button

All PayPal buttons are saved by default. You don’t need to explicitly save your buttons in Step 2: Save your buttons (optional), because this is the default behaviour.

You can access your buttons at any time in Tools > PayPal buttons> My Saved Buttons.

The list contains all PayPal buttons and provides Actions that allow you to edit and update them:

  • Edit button: Click to access and edit the button settings.
  • View code: Click to access and copy the generated button code.
  • Create similar button: Click to create a new button based on this button.
  • Delete button: Click to permanently delete a button.
  • Create new button: Click to create a new button from scratch.
  • We hope you have found this tutorial on using the PayPal Subscriptions button useful.

Happy Selling!

1 thought on “Adding PayPal Shopping Cart Support to WordPress

Leave a Comment