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.

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

User-added image

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 button opens a drop-down menu containing various types of blocks that you can add 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 , a new group called FastSpring Blocks appears. You may need to collapse the default group 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 to reveal ten new types of blocks.

 

About FastSpring Block Settings

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

For any type of block whose properties include the Select Product drop-down, you can control the products that appear in the drop-down via the FastSpring Dashboard. The list includes all products that are in the Storefront that you have 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 you have not added to the Storefront do not appear in the Select Product drop-down list of your FastSpring blocks.

For all color selectors, you can choose one of the standard color options, or click Custom Color. The Custom Color button lets you 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 apply 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 is to appear 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 of the "original" price that appears with a strike-through when 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. If the button opens the cart, the cart can appear in its default location or a location that is 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 a customer clicks the buy button.
    • Buy Button Text - Enter the label for the "buy" button you are creating. The Buy Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • Buy Button Class - Specify the CSS class of the "buy" button you are creating. The Buy Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • Buy Button Icon - Select the desired icon to be used in the "buy" button you are creating, or select None. The Buy Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • Shopping Cart Location - Specify the location on the page where the shopping cart will optionally appear when the customer clicks the buy button. The Shopping Cart page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
  • Secondary Button Settings - This section controls the appearance and behavior of the button after a customer has clicked it, and the specified product is in 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 Buy Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default setting here.

       Note

      Depending upon your selection here, the remaining fields in this section automatically change accordingly.
       
    • View Cart Button Text - When View Cart is the selected Secondary Button Action, this field controls the label that will appear on the button once a customer has clicked it. The View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • 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 once a customer has clicked it. The View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • 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 once a customer has clicked it. The View Cart Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • 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 once a customer has clicked it. The Remove from Cart Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • 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 once a customer has clicked it. The Remove from Cart Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
    • 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) once a customer has clicked the button. The Remove from Cart Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default selection.

FastSpring Buy Button with Quantity - Creates a button that adds a specified product to the shopping cart and optionally opens the cart. If the button opens the cart, the cart can appear in its default location or 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 is to appear 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 and then apply them 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 is to appear 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 is to appear 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 is to appear 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 custom location specific to this button.

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

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 Checkout Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default value.
  • Checkout Button Class - This field controls the CSS class applied to the checkout button you are creating. The Checkout Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default class.
  • Checkout Button Icon - This field controls the icon (if any) that is to appear inside the button you are creating. The Checkout Button page of the FastSpring Settings menu in your WordPress Dashboard controls the default selection.

FastSpring Product Catalog - This is a unique type of block that creates a product catalog on your WordPress page featuring all products associated with your Popup Storefront. (Note: You must specify the Popup Storefront for use here 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. However, you can preview the page to see the effects of any customization you might apply via the block's settings.

 Note

For best results, use this unique block type on a 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 you have enabled the Mini Notification Box 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 a customer clicks one of the product titles listed in the catalog, a new page with that product's complete details (the product page) opens. The product page allows you to display the contents of the product's Summary and Long Description fields on your WordPress page. If you have provided translations via Dashboard, these fields appear in the user's local language automatically. You can find examples of the product catalog and product page 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 to appear on the catalog page. 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 results 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. You use HTML heading elements to control this. 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 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.