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.

Overview

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

      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.

 

Navigating the FastSpring Settings Pages

There are three ways you can navigate the FastSpring Settings pages in WordPress; you can use any method or a combination of these to get 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 will be used by your WordPress pages.

 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 will use 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, resulting 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  furiousfalcon.onfastspring.com/popup-furiousfalcon.
    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:   furiousfalcon.test.onfastspring.com/popup-furiousfalcon.

       Important

      Before you go live and begin linking customers to the WordPress page, be sure to remove the .test from the Storefront ID field and then scroll down and click Save Changes, or else customers will be able to place FREE test orders.
  2. In the Builder URL field, paste in the current Store Builder Library URL. This is also found 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 not, 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

User-added image

fastspring_btn fastspring_btn-default

User-added image

fastspring_btn fastspring_btn-info

User-added image

fastspring_btn fastspring_btn-success

User-added image

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 User-added image.

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.

    User-added image
     
  • Small Modal Window:  This option works exactly the same as the Modal Window setting, except the modal window itself will be smaller and narrower by default.
     
  • Left Panel:  The shopping cart appears on the left-hand side of your page.

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

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

    User-added image
Enable Mini Notification Box - This field controls whether or not the mini notification box showing the current number of items in the cart will appear 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. Illustrations of the mini notification box are provided below.

 Note

When enabled, the Mini Notification Box will appear on all pages of your WordPress site.
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 will appear at the top left-hand corner of your WordPress pages:

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

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

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

Mini Notification Box Icon - This field controls the icon that will appear 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

The following example of the shopping cart and the key below it can be used to identify areas of the shopping cart that you may want to adjust, and their corresponding fields in the Shopping Cart Settings section of the FastSpring plugin page.

User-added image

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

User-added image

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 appears in the cart when a coupon has been applied, indicating that the product is free (when applicable) or displaying the total amount and percentage saved (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").
3

Apply Coupon Button Class

This field controls which CSS class is used to style 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 be used for 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 check boxes, if any (default: #c0c0c0).
5Radio and Checkbox Background Color (Selected)Click Select Color and choose the desired color for any radio buttons and check boxes that the customer has selected (default: #5cb85c).
6Empty Cart Message TextEnter the message that will be displayed in the shopping cart when there are no products in the cart (default: "Your cart is empty.")
(not pictured)Thank You Page URL

Following a successful purchase, the completion page of your Popup Storefront will be rendered in the popup, and 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://lunch.furiousfalcon.com/ and you have a "thank you" page at https://lunch.furiousfalcon.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. These settings can be overridden 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 Action

Select 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 that will be used for "add to cart" buttons by default, or select None.
Default Buy Button Secondary Action

Select the default secondary action for newly created "buy" buttons:

  • View Cart - opens the shopping cart so its contents can be viewed and edited
  • 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, these default settings can be overridden 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 that will 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. These default settings can be overridden 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 that will be used for "view cart" buttons by default, or select None.
Default View Cart Button Visibility

Select the default status for "view cart" buttons when the cart is empty:

  • Always show View Cart button - new "view cart" buttons will 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 will 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. These settings can be overridden 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 that will 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 that will 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 that will 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 that will be used for "EDS buy" buttons, or select None.

 

Nav Menu

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 that will 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 do, 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.