Collapse Menu
Docs Home
Extensibility Options
Contact Support

Using the FastSpring WordPress Plugin

Overview

This article describes how to use the FastSpring WordPress Plugin to add FastSpring Store functionality to your WordPress pages.

Overview

This article describes how to use the FastSpring WordPress Plugin to add FastSpring Store functionality to your WordPress pages.


User-added image

This article describes how to use the FastSpring WordPress Plugin to add FastSpring Store functionality to your WordPress pages.

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

For instructions on configuring the plugin, please see Configuring the FastSpring WordPress Plugin.
 

 Note

The current version of the FastSpring WordPress Plugin requires the use of the Gutenberg editor in WordPress. If you are not currently using a recent version of WordPress, you may need to update your WordPress version in order to use the FastSpring WordPress Plugin.

 

Plugin Controls for Your WordPress Pages

When editing the pages of your WordPress site using the WordPress Dashboard, you can add new elements (known as "blocks") to the page by clicking the button. This opens a drop-down menu containing various types of blocks that can be added to the page, organized into groups based on block type. The group titled Most Used may be selected (and expanded) by default.

Once you have installed the FastSpring WordPress Plugin, when you click , you will see a new group called FastSpring Blocks. You may need to collapse the default group in order to see a listing of all available groups; the FastSpring Blocks group may appear at the bottom of the list.

Clicking the FastSpring Blocks group expands it, and you will see ten new types of blocks available.

About FastSpring Block Settings

After adding a block to your page, click the block's options control  and select Show Block Settings to open the block's settings pane on the right-hand side of the WordPress page editor. This allows you to configure and customize the contents of the selected FastSpring block.

For any type of block whose properties include the Select Product drop-down, the products that are listed in the drop-down are the ones included in the Storefront specified via the Storefront ID field on the General page of the FastSpring Settings menu in your WordPress Dashboard. For instructions on adding products to your Popup Storefront, please see the section of our Getting Started with Store Builder Library article titled Selecting Products that will be Accessible with the Library. Products that have not been added to the Storefront will not appear in the Select Product drop-down list of your FastSpring blocks.

User-added image

User-added image


For all color selectors, choose one of the basic color options, or click Custom Color if you want to choose from a color picker or specify the hexadecimal value for a specific color.



The Advanced section of any FastSpring block's settings pane allows advanced users to specify one or more additional custom CSS classes (separated by spaces) to be applied to the selected block.

Types of FastSpring Blocks

This section of the document explains the various types of FastSpring blocks that are available, and provides instructions for each type.

 Tip

To view the effects of your changes, you can click the Preview Changes button near the top right-hand corner of the page at any time.


FastSpring Product Price - Dynamically renders the price for a specified product in the customer's local currency

  • Product Settings - Click the Select Product drop-down and choose the product whose price will be displayed in the selected block.
  • Price Settings - This section controls the font size and color of the primary price displayed in the selected block (default size:  36; default color:   #28a745).
  • Original Price Settings - This section controls the font size and color the "original" price that is shows with a strike-through in the event that a coupon or other discount has been applied (default size:  20; default color:  #6c757d)

FastSpring Buy Buttons - Creates a button that adds a specified product to the shopping cart and optionally opens the cart, which can appear in its default location or in a location specific to this button

  • Buy Button Settings - This section controls the button's initial appearance and behavior.
    • Button Action  - Select Add to Cart if you want the button to add the specified product to the order and open the shopping cart. Select Checkout if you want the button to add the product to the order and open the Popup Storefront immediately for checkout.
    • Select Product - Click the drop-down and select the product to be added to the cart the first time the buy button is clicked.
    • Buy Button Text - Enter the label for the "buy" button you are creating. The default value is controlled by the Buy Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • Buy Button Class - Specify the CSS class of the "buy" button you are creating. The default value is controlled by the Buy Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • Buy Button Icon - Select the desired icon to be used in the "buy" button you are creating, or select None. The default selection is controlled by the Buy Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • Shopping Cart Location - Specify the location on the page where the shopping cart will optionally appear when the buy button is clicked. The default selection is controlled by the Shopping Cart page of the FastSpring Settings menu in your WordPress Dashboard.
  • Secondary Button Settings -  This section controls the appearance and behavior of the button after it has been clicked and the specified product has been added to the cart.
    • Secondary Button Action - Select View Cart if you want the buy button to change to a View Cart button when clicked. Select Remove from Cart if you want the buy button to change to a Remove from Cart button when clicked. The default selection is controlled by the Buy Button page of the FastSpring Settings menu in your WordPress Dashboard.

       Note

      Depending upon your selection here, the remaining fields in this section will automatically change accordingly.
    • View Cart Button Text - When View Cart is the selected Secondary Button Action, this field controls the label for the button you are creating, after it has been clicked. The default value is controlled by the View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • View Cart Button Class - When View Cart is the selected Secondary Button Action, this field controls the CSS class applied to the button you are creating, after it has been clicked. The default value is controlled by the View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • View Cart Button Icon - When View Cart is the selected Secondary Button Action, this field controls the icon that will appear (if any) inside the button you are creating, after it has been clicked. The default selection is controlled by the View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • Remove From Cart Button Text - When Remove from Cart is the selected Secondary Button Action, this field controls the label for the button you are creating, after it has been clicked. The default value is controlled by the Remove from Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • Remove From Cart Button Class - When Remove from Cart is the selected Secondary Button Action, this field controls the CSS class applied to the button you are creating, after it has been clicked. The default value is controlled by the Remove from Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
    • Remove From Cart Button Icon - When Remove from Cart is the selected Secondary Button Action, this field controls the icon that will appear inside the button you are creating (if any), after it has been clicked. The default selection is controlled by the Remove from Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.

FastSpring Buy Button with QuantityCreates a button that adds a specified product to the shopping cart and optionally opens the cart, which can appear in its default location or in a location specific to this button. In addition to the buy button, this block adds a quantity field that can be edited directly or adjusted using + and - controls provided for you. However, there are no additional styling options in the block's settings beyond those described above for FastSpring Buy Buttons blocks.

FastSpring Product Image - Dynamically displays the icon image (if any) for a specified product

  • Select Product - Click the drop-down and select the product whose icon image will be displayed on your page.
  • Image Class - This field controls the CSS class applied directly to the product icon image you are adding to your page (as opposed to the class applied to the entire block). The default class is fsb-image. Advanced users can optionally use the Custom CSS page of the FastSpring Settings menu to define other classes, which could then be applied to the image via this field.

FastSpring Product Long Description - Dynamically renders the contents of the Long Description field for a specified product, in the customer's local language (if you have supplied it in Dashboard)

  • Select Product - Click the drop-down and select the product whose Long Description will be displayed on your page.

FastSpring Product Summary - Dynamically renders the contents of the Summary field for a specified product, in the customer's local language (if you have supplied it in Dashboard)

  • Select Product - Click the drop-down and select the product whose Summary will be displayed on your page.

FastSpring Product Name - Dynamically renders the Display name of a specified product, in the customer's local language (if you have supplied it in Dashboard)

  • Select Product - Click the drop-down and select the product whose Display name will be rendered on your page.
  • h1 through h6 - Click one of the six options to set the size and style of the Display name on the page using HTML heading elements; h1 is the largest and h6 is the smallest. The default is h1.

FastSpring View Cart Button - Creates a button that opens the shopping cart when clicked. The shopping cart can appear in its default location, or a in a custom location specific to this button.

  • View Cart Button Text - Enter the label for the View Cart button you are creating. The default value is controlled by the View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
  • View Cart Button Class - This field controls the CSS class applied to the View Cart button you are creating. The default class is controlled by the View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
  • View Cart Button Icon -  Select the desired icon to be used in the View Cart button you are creating, or select None. The default selection is controlled by the View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard.
  • Shopping Cart Location -  Specify the location on the page where the shopping cart will appear when the View Cart button is clicked. The default selection is controlled by the Shopping Cart page of the FastSpring Settings menu in your WordPress Dashboard.

FastSpring Checkout Button - Creates a button that launches your Popup Storefront so the customer can initiate checkout and payment

  • Checkout Button Text - Enter the label for the checkout button that you are creating. The default value is controlled by the Checkout Button page of the FastSpring Settings menu in your WordPress Dashboard.
  • Checkout Button Class - This field controls the CSS class applied to the checkout button you are creating. The default class is controlled by the Checkout Button page of the FastSpring Settings menu in your WordPress Dashboard.
  • Checkout Button Icon - This field controls the icon (if any) that will appear inside the button you are creating. The default selection is controlled by the Checkout Button page of the FastSpring Settings menu in your WordPress Dashboard.

FastSpring Product Catalog - This is a special type of block that creates a product catalog on your WordPress page featuring all products associated with the specific Popup Storefront you have configured on the General page of the FastSpring Settings menu in your WordPress Dashboard. Using this block, you can add a product catalog to your page without having to manipulate the other various blocks individually. The product catalog is not displayed when editing the page, but you can preview the page to see the effects of any customization you might apply via the block's settings.

 Note

We recommend that this special block type be used on its own separate page in your WordPress site. If you include this block on a page with other FastSpring blocks, your page may contain duplicated information and controls.

 Note

If the Mini Notification Box is enabled on the Shopping Cart page of the FastSpring Settings menu in your WordPress Dashboard, it will appear on the product catalog and product pages using those default values.

When one of the product titles listed in the catalog is clicked, a new page with that product's complete details (the product page) will open. This allows you to display the contents of the product's Summary and Long Description field on your WordPress page (in the user's local language, if you have provided translations via Dashboard), for users who drill in looking for additional details.  Examples of the product catalog and product page are provided below.

Most of the fields and controls in this block's settings are the same as in other blocks; you can find the descriptions for those other blocks above. However, there are a few unique properties in this block:

  • Number of columns in product catalog - Select the number of vertical columns in which your products will be arranged on the product catalog. Specifying a larger number of columns means more products listed side-by-side, but with less room for their names, prices and icons. Choosing a smaller number of columns will result in wider columns with more space for product info, and potentially multiple rows (depending on the number of products displayed).
  • Display Name Size - In the Product Page Settings section, this field controls the size and style of the product's display name on the product page. This is controlled using HTML heading elements.  h1 (the default selection) is the largest size, and h6 is the smallest.
  • All Products Text - The top of the product page features navigational cues, with a link to return to the product catalog. This field lets you specify the text to be used for that link.  The default value is "All Products".
  • All Products Link Font Size -This field controls the font size of the navigational cues at the top of the product page, including the "All Products" / return link and the title of the product itself (see the illustration below). The default value is 36 points.
  • All Products Link Icon - Select the icon you want to appear next to the "All Products" / return link in the navigational cues at the of the page, or select None.  The default selection is the first icon in the list.

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.