Configuring the FastSpring WordPress Plugin

Last modified May 15, 2019

This article applies to Contextual Commerce. (Looking for Classic Commerce documentation?)


Click here to visit the plugin page on WordPress and download the plugin

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

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 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 and then select the desired page on the left-hand side

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

    Select the FastSpring Settings menu and then select the desired tab


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.



The General Settings page of the FastSpring Settings menu

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

      Example of the Checkout on your Website dialog for a Popup Storefront

      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.0/fastspring-builder.min.js.

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

black text on a white background, with a gray button border

fastspring_btn fastspring_btn-default

white text on an light blue background

fastspring_btn fastspring_btn-info

white text on a green background

fastspring_btn fastspring_btn-success

white text on an orange background

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 Save Changes.

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.

    Example of the shopping cart with the modal window setting

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

    Example of the shopping cart with the left panel setting

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

    Example of the shopping cart with the right panel setting

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

    Example of the shopping cart with the bottom sheet setting

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.

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

Example of the Empty Cart Message

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).
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.
5Radio and Checkbox Background ColorClick Select Color and choose the desired color for unselected radio buttons and check boxes, if any; alternatively, you can enter the color's hex value (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; alternatively, you can enter the color's hex value (default: #ff0000).
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 using the FastSpring Buy Buttons dialog, or by editing the Text tab of your WordPress page directly.

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-default).
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 in the FastSpring Buy Buttons dialog, or by editing the Text tab of your WordPress page directly.

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 using the FastSpring Buy Buttons dialog or the FastSpring View Cart Buttons dialog, or by editing the Text tab of your WordPress page directly.

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 using the FastSpring Checkout Buttons dialog, or by editing the Text tab of your WordPress page directly.

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 control lets you customize the appearance of the "EDS buy" buttons 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.