Collapse Menu
Docs Home
Extensibility Options
Contact Support

Configuring the FastSpring WordPress Plugin

Overview

This article explains how to set up the FastSpring WordPress Plugin.

This article explains how to set up the FastSpring WordPress Plugin.

User-added image

For general information about the plugin, including a description of its features, please see About the FastSpring WordPress Plugin.

For instructions on how to use the plugin with your WordPress pages, please see Using the FastSpring WordPress Plugin.

 

How to Configure the Plugin

 Check out our guided walk-through

Would you like the system to walk you through configuring the FastSpring WordPress Plugin? Click here.
  1. Install the FastSpring plugin for WordPress. You can download it from the plugin's home page at https://wordpress.org/plugins/fastspring/.

     Tip

    If you need help installing the FastSpring plugin for WordPress, please see WordPress's documentation on managing plugins here.
     
  2. From the Dashboard page of your WordPress site, click FastSpring Settings on the left-hand side of the page.

 

There are three ways you can navigate the FastSpring Settings pages in WordPress. You can use any method or a combination of these to navigate to the desired settings pages:

  • Hover your mouse cursor over the FastSpring Settings menu and then select the desired page from the flyout menu.


     
  • Select the FastSpring Settings menu on the left-hand side of the page and then select the desired settings page directly below it.


     
  • Select the FastSpring Settings menu on the left-hand side of the page and then select the desired tab in the main window pane.


     

General Settings

The General Settings section of the FastSpring plugin page allows you to configure which of your FastSpring Storefronts and which version of the Store Builder Library your WordPress pages use.

 Note

We recommend using a Popup Storefront to handle the checkout process in conjunction with the FastSpring WordPress Plugin.

 Note

If you have not previously done so, please whitelist your WordPress site domain for your Popup Storefront. For more information, please click here.

 Important

Although your Popup Storefront uses a secure connection to FastSpring's servers, customers cannot see the Storefront's URL directly on your WordPress pages. Therefore, we recommend obtaining and setting up a security certificate for your pages so that the resolved URL shown in customers' browsers uses the https protocol. If your WordPress pages do not use the secure protocol, customers may be unwilling to enter sensitive information, such as credit card details, on your page. This can result in a negative impact on the customer experience and your sales. For more information, please see Popup Storefronts and Browser Security Features.

  1. Enter the Storefront ID of the FastSpring Storefront you want to use with your WordPress pages. To find the Storefront ID, begin by logging on to the FastSpring Dashboard. Then:
    1. Select Storefronts → Popup Storefronts → PLACE ON YOUR WEBSITE (for the specific Popup Storefront you want to use). In the resulting Checkout on your Website dialog, find (and copy) the value of the data-storefront property (without the quotation marks).


       
      In the example above, the Storefront ID is yourexamplestore.onfastspring.com/popup-yourexamplestore.
       
    2. If you want to place test orders through the Storefront via your WordPress site, insert .test between your Store name and "onfastspring.com," like this: yourexamplestore.test.onfastspring.com/popup-yourexamplestore.
       

       Important

      Before you go live and begin linking customers to the WordPress page, be sure to remove the .test from the Storefront ID field. Then, scroll down and click Save Changes. If you leave the .test in the Storefront ID field, customers will not be able to make like payments.
       
  2. In the Builder URL field, paste in the current Store Builder Library URL. The URL appears in the same Checkout on Your Website dialog referenced above; it is the value of the src property (without the quotation marks).

    In the example above, the Builder URL is https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.2/fastspring-builder.min.js
     
  3. In the Load FontAwesome field, select No if your WordPress site already includes FontAwesome. If your site does not already include FontAwesome, leave the default value (Yes) selected.
  4. In the Enable Google Analytics Tracking field, select Yes if your WordPress site already has Google Analytics tracking set up. Otherwise, leave the default value (No) selected. 

 

About CSS Button Classes Used in the FastSpring Plugin

By default, there are four CSS classes available to style the various buttons used by the FastSpring plugin:

ExampleClass Name
 fastspring_btn fastspring_btn-default
 fastspring_btn fastspring_btn-info
 fastspring_btn fastspring_btn-success
 fastspring_btn fastspring_btn-warning

Using the Custom CSS field at the bottom of the FastSpring plugin page, advanced users can create additional CSS classes, if desired.

 

Types of Buttons Available via the Plugin

For a detailed description of each type of button you can add to your WordPress pages using the FastSpring WordPress Plugin, please see Store Buttons You Can Add to Your Page.

 

Pages of the FastSpring Settings Menu

The following pages of the FastSpring Settings menu control various features and functionality of the plugin.

 

Shopping Cart Settings

The Shopping Cart Settings page of the FastSpring Settings menu allows you to customize the appearance and functionality of the optional shopping cart feature of the plugin. After making any changes, be sure to scroll to the bottom of the page and click .

Shopping Cart Location

This field controls the placement of the shopping cart on your WordPress page. Select the desired setting:

  • Modal Window: The shopping cart appears as a floating modal window near the center of your page.


     
  • Small Modal Window: This option works identically to the Modal Window setting, except the modal window itself is smaller and narrower by default.
  • Left Panel: The shopping cart appears on the left-hand side of your page.


     
  • Right Panel: The shopping cart appears on the right-hand side of your page.


     
  • Bottom Sheet: The shopping cart appears across the bottom of your page, and spans the entire page width.


     

Enable Mini Notification Box - This field controls whether or not the mini notification box showing the current number of items in the cart appears on your pages when the cart is not open. Clicking the mini notification box opens the shopping cart (even when the cart is empty). Select Yes if you want the mini notification box to appear. Select No (the default setting) if you do not want it to appear. The following are illustrations of the mini notification box.

 Note

When enabled, the Mini Notification Box appears on all pages of your WordPress site (not just your FastSpring store pages).

Mini Notification Box Location - This field controls the placement of the mini notification box on your WordPress pages. Select the desired setting:

  • Top Left - The mini notification box appears at the top left-hand corner of your WordPress pages:


     
  • Top Right - The mini notification box appears at the top right-hand corner of your WordPress pages:


     
  • Bottom Right - The mini notification box appears at the bottom right-hand corner of your WordPress pages. This is the default setting:


     
  • Bottom Left - The mini notification box appears at the bottom left-hand corner of your WordPress pages:


     

Mini Notification Box Icon - This field controls the icon that appears inside the mini notification box. Use the radio buttons to select your preferred icon. The last icon in the list (shopping cart image) is the default value.

Mini Notification Box Quantity Color - This field controls the color of the circular quantity indicator that appears in the corner of the mini notification box. The default value is red (#ff0000).

Components of the Shopping Cart

You can use the following example of the shopping cart and the key below it to identify areas of the shopping cart that you may want to adjust. The table below the example image identifies the corresponding fields in the Shopping Cart Settings section of the FastSpring plugin page.

Here is an example of what customers might see when the cart is empty.

Item NumberField NameDescription
1Shopping Cart Header TextEnter the header text you want to appear at the top of the shopping cart (default: "Shopping Cart").
1Shopping Cart Header ColorClick Select Color and choose the desired background color for the header section of the shopping cart. Alternatively, you can enter color's hex value (default: #5cb85c).
1Shopping Cart Header Text ColorClick Select Color and choose the desired color for the header section text. Alternatively, you can enter the color's hex value (default: #ffffff).
(not pictured)Free / You Save Text ColorClick Select Color and choose the desired color for the text that lets customers know the product is free when a coupon has been applied. This field also controls the color of the et that displays the total amount and percentage saved via the coupon (default: #28a745).
2Show Coupon Entry FieldSelect Yes (default) if you want the coupon entry field to appear; select No if you do not want it to appear.
2Coupon Field LabelEnter the desired label for the coupon entry field (default: "Have a promo code?").
2Coupon Field Placeholder TextEnter the placeholder text that you want to appear inside the coupon entry field until the customer begins typing there (default: "Coupon ID").
3Apply Coupon Button ClassThis field controls which CSS class governs the style of the coupon entry field's "apply" button (default: fastspring_btn fastspring_btn-success).
3Apply Coupon Button TextEnter the desired label for the button that customers can click to apply the code entered in the coupon entry field (default: "Apply").
4Cart Item Delete IconSelect the desired icon to appear as the button that customers can click to remove an item from the cart. The first icon in the list (x) is the default value.
4Cart Item Delete Icon ColorClick Select Color and choose the desired color for the Cart Item Delete Icon (default: #000000).
4Cart Item Delete Icon Color HoverClick Select Color and choose the desired color to be used for the Cart Item Delete Icon when the customer hovers the cursor over the delete button (default: #c0c0c0).
5Radio and Checkbox Background ColorClick Select Color and choose the desired color for unselected radio buttons and checkboxes, if any (default: #c0c0c0).
5Radio and Checkbox Background Color (Selected)Click Select Color and choose the desired color for any radio buttons and checkboxes that the customer has selected (default: #5cb85c).
6Empty Cart Message TextEnter the message that appears in the shopping cart when there are no products in the cart (default: "Your cart is empty.")
(not pictured)Thank You Page URLFollowing a successful purchase, the completion page of your Popup Storefront will be rendered in the popup. When the customer clicks Continue or closes the popup, your "thank you" page specified in this field will be displayed (default: /).

For example, if your WordPress site address is https://example.yourexamplestore.com/ and you have a "thank you" page at https://example.yourexamplestore.com/thank-you, you would enter a forward slash followed by the name of the page, like this: /thank-you.

 

Buy Button Settings

The Buy Button Settings page of the FastSpring Settings menu lets you customize the default appearance and behavior of "buy" buttons on your WordPress page. You can override these settings when adding a FastSpring Buy Buttons block to your page via the Buy Button Settings section of the block's properties.

Field NameDescription
Default Buy Button ActionSelect the default behavior of newly created "buy" buttons:
  • Add to Cart - adds the specified product to the order but does not initiate checkout
  • Checkout - adds the specified product to the order and opens your Popup Storefront to initiate the checkout process for whatever products are currently in the order
Default Buy Button ClassThis field controls the default CSS class applied to "buy" buttons (default: fastspring_btn fastspring_btn-success).
Default Buy Button TextEnter the default label for "buy" buttons (default: "Add to Cart").
Default Buy Button IconSelect the icon to be used for "add to cart" buttons by default, or select None.
Default Buy Button Secondary ActionSelect the default secondary action for newly created "buy" buttons:
  • View Cart - opens the shopping cart so customers can view and edit its contents
  • Remove from Cart - removes the specified product from the order

 

 

Remove from Cart Button Settings

The Remove from Cart Button Settings page of the FastSpring Settings menu lets you customize the default appearance of "remove from cart" buttons. For "remove from cart" buttons on your WordPress page, you can override these default settings when adding a FastSpring Buy Buttons block to your page via the Secondary Button Settings section of the block's properties.

 Note

For "remove from cart" buttons that appear inside the shopping cart, only the Default Remove from Cart Button Icon setting applies. The selected icon cannot be overridden by other means.

 

Field NameDescription
Default Remove from Cart Button ClassThis field controls the default CSS class applied to "remove from cart" buttons on your WordPress page (default: fastspring_btn fastspring_btn-default).
Default Remove from Cart Button TextEnter the default label for "remove from cart" buttons on your WordPress page (default: "Remove from cart").
Default Remove from Cart Button IconSelect the icon to be used for "remove from cart" buttons by default, or select None.

 

View Cart Button Settings

The View Cart Button Settings page of the FastSpring Settings menu lets you customize the default appearance and behavior of "view cart" buttons. You can override these default settings can when adding a FastSpring Buy Buttons block or a FastSpring View Cart Button block to your page.

Field NameDescription
Default View Cart Button ClassThis field controls the default CSS class applied to "view cart" buttons (default: fastspring_btn fastspring_btn-default).
Default View Cart Button TextEnter the default label for "view cart" buttons (default: "View Cart").
Default View Cart Button IconSelect the icon to be used for "view cart" buttons by default, or select None.
Default View Cart Button VisibilitySelect the default status for "view cart" buttons when the cart is empty:
  • Always show View Cart button - new "view cart" buttons default to being visible even when clicking the button would take the customer to an empty cart
  • Hide View Cart button when cart is empty - new "view cart" buttons default to being hidden or invisible when the cart is empty

 

Checkout Button Settings

The Checkout Button Settings page of the FastSpring Settings menu lets you customize the default appearance for "checkout" buttons on your WordPress page. You can override these settings when adding a FastSpring Checkout Button block to your page.

This section also controls the style of the "checkout" button found inside the shopping cart, which triggers your Popup Storefront to open.

Field NameDescription
Default Checkout Button ClassThis field controls the default CSS class applied to "checkout" buttons (default: fastspring_btn fastspring_btn-success).
Default Checkout Button TextEnter the default label for "checkout" buttons (default: "Checkout").
Default Checkout Button IconSelect the icon to be used for "checkout" buttons by default, or select None.

 

Cross-Sell Button Settings

The Cross-Sell Button Settings page of the FastSpring Settings menu lets you customize the appearance of "cross-sell" buttons that can appear inside the shopping cart. These settings cannot be overridden by other means.

Field NameDescription
Cross-Sell Button ClassThis field controls the CSS class applied to "cross-sell" buttons (default: fastspring_btn fastspring_btn-success).
Cross-Sell Button TextEnter the label for "cross-sell" buttons (default: "Add to Order").
Cross-Sell Button IconSelect the icon to be used for "cross-sell" buttons, or select None.

 

Up-Sell Button Settings

The Up-Sell Button Settings page of the FastSpring Settings menu lets you customize the appearance of "up-sell" buttons that can appear inside the shopping cart. These settings cannot be overridden by other means.

Field NameDescription
Up-Sell Button ClassThis field controls the CSS class applied to "up-sell" buttons (default: fastspring_btn fastspring_btn-success).
Up-Sell Button TextEnter the label for "up-sell" buttons (default: "Upgrade Now").
Up-Sell Button IconSelect the icon to be used for "up-sell" buttons, or select None.

 

EDS Buy Button Settings

The EDS Buy Button Settings page of the FastSpring Settings menu lets you customize the appearance of the "EDS buy" button that can appear inside the shopping cart. These settings cannot be overridden by other means.

Field NameDescription
EDS Buy Button ClassThis field controls the CSS class applied to "EDS buy" buttons (default: fastspring_btn fastspring_btn-success).
EDS Buy Button TextEnter the label for "EDS buy" buttons (default: "Add to Order").
EDS Buy Button IconSelect the icon to be used for "EDS buy" buttons, or select None.

 

The Nav Menu page of the FastSpring Settings menu contains a new, optional feature. More information about this feature will be forthcoming in the future.

 

Custom CSS

In the Custom CSS field, you can enter custom CSS styling to be applied to all of your WordPress pages. For users with knowledge of CSS, this can be helpful in case you want to define your own classes or CSS rules. For example, you could set up additional button classes here and then apply them to the various buttons in the fields described above. Or, you could override the colors and other styles associated with the existing classes. If you override the existing classes, make sure to declare the desired colors for both the background-color and border-color properties.

Try FastSpring

Get a free account and see why FastSpring is the ecommerce partner of choice for software providers around the world. Try our full-service ecommerce solution today to unlock revenue growth for your online company.