Install SparkLayer on WooCommerce

New to SparkLayer? How SparkLayer works explains the basics, and Storefront widgets shows what the widgets do.

Before you start

Check these in your WordPress admin before you install. It's also worth reading WooCommerce limitations.

Once SparkLayer is running, you'll mostly use three areas of WordPress: Products for products and SKUs, Users for B2B customers, and Orders for B2B orders.

Add SKUs to your products

1. In WordPress, go to Products and edit a product.
2. For a simple product, enter the SKU under Product data > Inventory.
3. For a variable product, open Product data > Variations and enter a different SKU for each variation.
4. Update the product.

Install SparkLayer

Upload the SparkLayer plugin to your WordPress site, then create your SparkLayer account.

1. Ask our support team for the SparkLayer plugin for WooCommerce. They send you the plugin's .zip file.
2. Upload and install the plugin on your WordPress site, as you would any plugin you upload yourself. See WordPress's guide to installing a plugin (opens in a new tab).
3. Register for SparkLayer (opens in a new tab) to create your SparkLayer account.

Connect your store

Connect SparkLayer to WooCommerce with a REST API key: a key and secret, created in WooCommerce, that let SparkLayer read and update your store. You don't need to write any code to create one. If you get stuck, our support team can help.

1. In the SparkLayer Dashboard, go to Integrations,Platform (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform to do this now, whichever platform you're on. Opens in a new tab.. Under Your platform, select WooCommerce (early access).
2. Enter your store URL: the address of the site you're installing SparkLayer on, such as www.mystore.com.
3. In WordPress, go to WooCommerce,Settings,Advanced,REST API and click Add key.
4. Give the key a description you'll recognise, such as SparkLayer API, set Permissions to Read/Write, and click Generate API key.
5. Copy the Consumer key and Consumer secret that WooCommerce shows. WooCommerce only shows them once, so keep the page open until you've pasted them.
6. Back in the SparkLayer Dashboard, paste them into WooCommerce API Key and WooCommerce API Secret, then click Save.
7. Wait a few seconds while SparkLayer connects to your store and sets up the plugin.

Your store is now connected, and SparkLayer starts syncing your products. The plugin's settings are in WordPress at WooCommerce,Settings,Integrations,SparkLayer B2B. Next, give your B2B customers a role.

Give customers a B2B role

SparkLayer only syncs WordPress users with a role that starts with SparkLayer B2B. Each SparkLayer customer group has its own role. For the base customer group, it's SparkLayer B2B: Base.

1. In WordPress, go to Users. Click Add User, or edit an existing customer.
2. Make sure the customer has a complete address, with every address field filled in. Keep a note of their email address: they sign in with it.
3. Set Role to the SparkLayer role for the customer's group, such as SparkLayer B2B: Base or SparkLayer B2B: VIP Group.
4. Save the user.

When the customer signs in, they get the rules of that customer group. If you create another customer group in SparkLayer, update the role on the customers who belong to it.

Check a customer has synced

1. In the SparkLayer Dashboard, go to Customers (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers to do this now, whichever platform you're on. Opens in a new tab..
2. Search for the customer by name or email. If they're listed, they've synced.
3. Click View to check their details. Under Identifiers, the Platform ID is their WordPress user ID: for example, 3 in ?user_id=3 at the end of the user's page URL in WordPress.

If some customers couldn't sync, a banner at the top of Customers (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers to do this now, whichever platform you're on. Opens in a new tab. says so: click Show errors to see who and why. See Product and customer sync for more.

Add the widgets

If your theme supports blocks, the plugin adds the SparkLayer widgets (the frontend interfaces) to your store automatically. To check, sign in to your store as a B2B customer and open a product page. You should see your B2B prices.

If the widgets don't appear, or you'd rather place them yourself, they need adding to your theme files. You don't have to edit any code yourself. Choose one option:

Add the widgets to your theme (for your developer)

These steps edit your theme's code. Pass them to your developer.

<spark-pdp parent-id="<?php echo absint( $product->get_id() ); ?>"></spark-pdp>

<spark-product-card parent-id="<?php echo absint( $product->get_id() ); ?>"></spark-product-card>

When you've finished, check your setup against the frontend integration guide. See Storefront for the other settings you can turn on.

Next steps

Once your customers are syncing and the widgets are in place, set up your prices and rules in the SparkLayer Dashboard.

1. Create a price list. Go to Pricing,Price lists (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Pricing › Price lists to do this now, whichever platform you're on. Opens in a new tab. and click Create price list. An automatic price list applies a discount to your WooCommerce price or your RRP price. A manual one uses prices you upload by CSV, including quantity pricing. See Managing pricing.
2. Set up your customer groups. Go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers › Groups to do this now, whichever platform you're on. Opens in a new tab.. Use the base customer group, or click Create customer group for customers who need different rules. Choose each group's price lists, payment methods and order limits. You can manage a group's rules once at least one customer has its role. See Customer groups.
3. Place a test order. Sign in to your store as a customer with a SparkLayer B2B role and check your prices. Place a test order with each payment method you offer. See How B2B orders arrive in WooCommerce.
4. Invite your customers. Work through the steps at Home,Setup (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Home › Setup to do this now, whichever platform you're on. Opens in a new tab., then let customers know, for example with a newsletter. The Launch checklist has example messages.

These steps match Get started on other platforms. When you're ready to go live, work through the launch checklist:

How B2B orders arrive in WooCommerce

Every order goes to WooCommerce,Orders. Its status depends on the payment method the customer chose:

In customer groups, Pay Online by Card is called Card at checkout, Pay by Invoice is Pay by invoice and Pay on Account is Payment on account. For offline payment methods, take payment in your WooCommerce admin or offline, for example by bank transfer.

Each order also has a SparkLayer Order Information section, which shows the payment method the customer used.

More settings on WooCommerce

Stock levels

SparkLayer can show stock levels in several ways. To show stock numbers, such as 100, turn on Manage stock in WooCommerce,Settings,Products,Inventory. To show stock on product cards too, use the settings in WooCommerce,Settings,Integrations,SparkLayer B2B.

Pre-orders

SparkLayer supports pre-orders (also called back orders). When a product is on pre-order, B2B customers see a pre-order message on the product page and can still buy it. See Stock display.

Tax

SparkLayer uses the tax rules you've set up in WooCommerce. See WooCommerce's guide to setting up taxes (opens in a new tab).

SparkLayer shipping

By default, B2B orders use your WooCommerce shipping methods. To use SparkLayer's own shipping rules instead, go to Settings,Shipping (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Shipping to do this now, whichever platform you're on. Opens in a new tab., tick Use SparkLayer shipping rates and create your shipping methods.

JavaScript options (for your developer)

JavaScript options are small scripts that change how the widgets behave. You don't need any of them to get started. Some settings are made in JavaScript, using Spark Options.

On WooCommerce, add them in WooCommerce,Settings,Integrations,SparkLayer B2B, under Core Script Options. If you use more than one option, combine them into one object.

{
  termsAndConditionsLink: "/policies/terms-of-service",

    checkoutCustomElements: [
      {
        name: 'shipping-date',
        translations: {
          en: {
            title: 'Preferred Shipping Date',
            detail: 'Shipping unavailable on weekends.',
          },
        },
        attributes: {
          required: true,
          type: 'date',
        },
      },
    ],
  }

{
   accountRedirect: {
      urlRegex: /\/account/g,
      goTo: "/index", // page to redirect logged in users to
   },
}

{
     display: {
         darkTheme: true,
      },
  }

FAQs and troubleshooting