Using the FastSpring WordPress Plugin

Last modified October 5, 2018

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


Plugin Controls for Your WordPress Pages

Once you have installed the FastSpring WordPress Plugin, when you edit your pages via the Pages menu in the WordPress Dashboard, you will see four new command buttons. Each of these buttons can add FastSpring Store functionality directly to your page, from the Text tab of the editor.

Example of the FastSpring Command buttons

Modifying Element Styles

Certain elements of the FastSpring Store functionality - such as buy buttons - can be further modified on the Visual tab; first, double-click to select the entire element on the Text tab, and then click the Visual tab.  Next, use the text editor buttons built into WordPress to apply styles (such as bold or underlined text) to the selected element.

Double-click to select an element and then click the Visual tab.


...now, apply the desired style(s) to the selected element.

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 Buy Buttons

On the Text tab of your WordPress page, the FastSpring Buy Buttons command lets you insert a "buy" button for a specific product. The "buy" button has a secondary function to either view the cart or go directly to your Popup Storefront (to check out). The default values for the button text, button class and button icon are controlled via the Buy Button Settings page of the FastSpring Settings menu in your WordPress Dashboard. You can override the default values while adding a new button. Advanced users can also update or change the button text and button class after adding the button by editing the code on the Text tab of the Edit Page screen.

Note

When you add buttons to your WordPress page via the plugin, the Visual tab of the Edit Page screen will represent the buttons as underlined text, like hyperlinks. This is normal; when you preview or publish and view the page, the button will be rendered correctly.


The FastSpring Buy Buttons dialog

  • Button Action - Choose whether the shopping cart will be displayed or the Popup Storefront will open when the button is clicked.
    • Add to Cart:  The product will be added to the cart and the shopping cart will appear.
    • Checkout:  The product will be added to the cart and the Popup Storefront will open immediately, for the ultimate streamlined purchase process.
  • Select Product - Click the drop-down selector and choose the product that will be added to the cart when this 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 Settings 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 Settings 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 Settings page of the FastSpring Settings menu in your WordPress Dashboard.
  • Secondary Button Function - Choose whether the secondary function of the button you are creating (the button's function once it has been clicked) will be to display the shopping cart or to remove the selected product from the cart. Keep in mind that the button may not be visible while the cart is open, depending upon your placement of the button on your WordPress page.
    • View Cart:  The button's secondary function will be to display the shopping cart.
    • Remove from Cart:  The button's secondary function will be to remove the product from the cart.
  • After you choose the Secondary Button Function, the next three fields will be rendered dynamically based on your selection.
If you select...
View CartRemove from Cart
View Cart Button TextEnter the label for the "buy" button when its secondary function is set to View Cart and the product is currently in the cart.Remove from Cart Button TextEnter the label for the "buy" button when its secondary function is set to Remove from Cart and the product is currently in the cart.
View Cart Button ClassSpecify the CSS class of the "buy" button when its secondary function is set to View Cart and the product is currently in the cart.Remove from Cart Button ClassSpecify the CSS class of the "buy" button when its secondary function is set to Remove from Cart and the product is currently in the cart.
View Cart Button IconSelect the desired icon to be used in the "buy" button when its secondary function is set to View Cart and the product is currently in the cart, or select None.Remove from Cart Button IconSelect the desired icon to be used in the "buy" button when its secondary function is set to Remove from Cart and the product is currently in the cart, or select None.


  • Add FastSpring Buy Button - Click this to close the dialog and insert the button into your WordPress page using the configuration options you have selected above.


FastSpring Product Attributes

The FastSpring Product Attributes command lets you insert various details of a specific product for display on your WordPress page. The content added to your page is dynamically linked to the product's details in your FastSpring Store, so if you make changes to the product's details via Dashboard or the FastSpring API, your WordPress page will automatically be updated to include the new details (though you may need to refresh the page if it is open at the time of your changes). You can optionally use the FastSpring Product Attributes dialog multiple times, to add more than one product attribute, and / or information for more than one product, to the same WordPress page. To see examples of a few of the available attributes in action, check out our example here.

Selecting Products that will be Accessible via the FastSpring WordPress Plugin

In order to display product details on your WordPress page, the product must be included in the Storefront specified via the Storefront ID field on the General Settings 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 here.

The Homepage Products dialog for a Popup Storefront in your FastSpring Dashboard

arrow

The Select Product field in the FastSpring Product Attributes dialog of the WordPress plugin

Note

When you insert product attributes into your page, the product's path and the selected attribute name are entered as placeholder comment text inside the <span> element. This is required because spans with no content are ignored by the WordPress editor, and all other product attribute values other than the display name are not loaded in the Edit Page screen. As a result, the Visual tab of the Edit Page screen will not show the product data. However, when you preview or publish and display the page (i.e., outside of the Edit Page screen), the correct product data will be rendered in place of the placeholder comment text.

Note

If your WordPress page is open in your browser while you make changes in the Dashboard or via the API, you may need to refresh the page in order to see the effect of your changes.

The FastSpring Product Attributes dialog

  • Select Product - Click the drop-down and select the product whose details you are adding to the page.
  • Select the Product Attribute to be Inserted - Select the radio button for the product attribute you are adding to the page.
  • Product Image Class - If Product Image is selected as the attribute to be inserted, you can optionally use this field to specify a custom CSS class--defined on the Custom CSS tab of the FastSpring Settings page in your WordPress Dashboard–that will be applied to the image on your WordPress page.
  • Add FastSpring Product Attribute - Click this to close the dialog and insert the selected product attribute into your WordPress page.


FastSpring View Cart Buttons

The FastSpring View Cart Buttons command lets you insert a "view cart" button that will open the shopping cart when clicked. The default values for the button text, button class and button icon are controlled via the View Cart Button Settings page of the FastSpring Settings menu in your WordPress Dashboard. You can override the default values while adding a new button. Advanced users can also update or change the button text and button class after adding the button, by editing the code on the Text tab of the Edit Page screen.

Note

When you add buttons to your WordPress page via the plugin, the Visual tab of the Edit Page screen will represent the buttons as underlined text, like hyperlinks. This is normal; when you preview or publish and view the page, the button will be rendered correctly.

The FastSpring View Cart Buttons dialog

  • View Cart Button Text - Enter the label for the "view cart" button you are creating.
  • View Cart Button Class - Specify the CSS class of the "view cart" button you are creating.
  • View Cart Button Icon - Select the icon that will be used in the "view cart" button you are creating, or select None.
  • Add View Cart Button - Click this to close the dialog and insert the button into your WordPress page using the configuration options you have selected above.

FastSpring Checkout Buttons

The FastSpring Checkout Buttons command lets you insert a "checkout" button that will trigger your Popup Storefront when clicked. The default values for the button text, button class and button icon are controlled via the Checkout Button Settings page of the FastSpring Settings menu in your WordPress Dashboard. You can override the default values while adding a new button. Advanced users can also update or change the button text and button class after adding the button, by editing the code on the Text tab of the Edit Page screen.

Note

When you add buttons to your WordPress page via the plugin, the Visual tab of the Edit Page screen will represent the buttons as underlined text, like hyperlinks. This is normal; when you preview or publish and view the page, the button will be rendered correctly.


The FastSpring Checkout Buttons dialog

  • Checkout Button Text - Enter the label for the "checkout" button you are creating.
  • Checkout Button Class - Specify the CSS class of the "checkout" button you are creating.
  • Checkout Button Icon -  Select the icon that will be used in the "checkout" button you are creating, or select None.
  • Add Checkout Button -  Click this to close the dialog and insert the button into your WordPress page using the configuration options you have selected above.