Connecting WooCommerce with Sign Customiser

Yes. Sign Customiser works on WordPress in two ways.

• WordPress with WooCommerce: customers design the sign on your site and see your configured price. They add the finished design to the WooCommerce cart. The order keeps the sign options and preview for your team or supplier.

• WordPress without WooCommerce: embed the customiser on a page and use Quote Mode. Customers send you their selected options, preview images and form answers. The form must include an email address. The request always includes the suggested price. If you turn on Show suggested price, customers also see the price in the customiser, and the form email to you includes it. You then quote or invoice them manually.

For outsourced production, Sign Customiser can send a custom email to the manufacturer. It sends the email when WooCommerce creates an order that contains a custom sign. It does not wait for payment. The email goes to the Receiver Email you set for that customiser, under Email Workflows → Manufacturer Email. The supplier can receive the preview, measurements, selected materials and available production-file links. The supplier does not sign in to Sign Customiser to receive the email.

The rest of this guide shows the WooCommerce checkout setup. If you only need enquiries, see Embed the customiser on any website and Quote Mode.

Prerequisites

Before you start, make sure that you have:

• Access to the WordPress dashboard of your WooCommerce store.

• A Sign Customiser subscription (create an account here).

Step 1: Generate WooCommerce API Credentials

Create API credentials in your WooCommerce store. They let Sign Customiser communicate with your webshop.

1. Log in to your WordPress dashboard.

2. Go to WooCommerce → Settings → Advanced → REST API. In newer versions of WooCommerce, this link is named REST API keys.

   

3. Click Add key. If you have no keys yet, click Create an API key.

4. Enter the following details:

   • Description: Sign Customiser.

   • User: Select the user for the key.

   • Permissions: Read/Write.

5. Click Generate API key.

6. Copy both the Consumer key and Consumer secret immediately.

WooCommerce shows the full Consumer key and Consumer secret only when you generate the key. Copy both credentials and store them securely. You need them in the next step.

Step 2: Connect Sign Customiser to WooCommerce

Connect your WooCommerce store to your Sign Customiser account.

1. Log in to your Sign Customiser account.

2. In the left sidebar, under Integrate, click Integrations.

3. On the WooCommerce card, click Connect WooCommerce.

   

4. Fill in the following details:

   • Name: A name for the integration, for example WordPress Integration.

   • API URL: The WordPress REST API endpoint of your store. This is your store URL followed by /wp-json/, for example https://yourstore.com/wp-json/.

   • API Key: Paste the consumer key from Step 1.

   • API Secret: Paste the consumer secret from Step 1.

   

5. Click Create to complete the connection.

Sign Customiser checks the connection and creates a WooCommerce webhook for new orders. If an error shows, see Troubleshooting at the end of this article.

Step 3: Get the Embed Code for Your Customiser

After you connect WooCommerce, get the embed code for your customiser.

1. Log in to your Sign Customiser account.

2. In the left sidebar, under Integrate, click Integrations.

3. Click View Details on your WooCommerce card. The card shows the WooCommerce logo and the name you entered in Step 2.

4. Under Embed Instructions, select the customiser you want to use from the Select Customiser (optional) dropdown. ​Note: Sign Customiser adds the ID of the chosen customiser to the embed code.

5. Copy the code snippet, or click Copy Code. The code looks similar to this:

   <script src="https://integrations.signcustomiser.com/sign-customiser-embed.js"></script>
   <sign-customiser-embed
     customiser-id="YOUR_CUSTOMISER_ID"
     integration-id="YOUR_INTEGRATION_ID"
     driver="woocommerce"></sign-customiser-embed>

Step 4: Add the Customiser to Your Website

Add the embed code to a page on your WordPress site. You can use the WordPress block editor, Elementor or WPBakery.

Before you start, make sure that:

• You connected your WooCommerce store to your Sign Customiser account (Steps 1 and 2).

• You have your embed code ready (Step 3).

Option A: Add the Customiser Using the Block Editor

1. In your WordPress dashboard, go to Pages and create a new page.

2. In the top toolbar, open the block inserter and choose the Custom HTML block.

3. Click Edit HTML and paste the full embed code.

4. In the editing window, click Update.

5. Click Publish.

Option B: Add the Customiser Using Elementor

1. In your WordPress dashboard, go to Pages and create a new page, or open an existing page.

2. Open the page in Elementor.

3. Drag the Elementor HTML widget onto the page where you want the customiser to appear.

4. Paste the full embed code into the text area of the widget.

5. Click Publish. If the page is already published, click Update.

Option C: Add the Customiser Using WPBakery

1. In your WordPress dashboard, go to Pages and create a new page, or open an existing page.

2. Open the page in the WPBakery editor.

3. Add a Raw HTML element where you want the customiser to appear.

4. Open the element, paste the full embed code into it, and click the save button.

5. Publish the page, or update it if it is already published.

Note

The customiser fills the full width and height of the element that holds the embed code. To control its size, put the embed code inside a container that has a width and a height. This example makes the container full width and as tall as the browser window:

<div style="width: 100%; height: 100vh;"></div>

The final result looks like this:

<div style="width: 100%; height: 100vh;">
<script src="https://integrations.signcustomiser.com/sign-customiser-embed.js"></script>
<sign-customiser-embed
  customiser-id="YOUR_CUSTOMISER_ID"
  integration-id="YOUR_INTEGRATION_ID"
  driver="woocommerce"></sign-customiser-embed>
</div>

If you need help, email support@signcustomiser.com.

Step 5: Configuring WooCommerce for Custom Sign Products

Change specific settings in WooCommerce. This makes sure custom sign products go correctly into the cart.

Enable AJAX Add to Cart

Sign Customiser recommends that you enable AJAX add to cart buttons. Do these steps:

1. In your WordPress dashboard, go to WooCommerce > Settings > Products.

2. Scroll down to the Add to cart behaviour section.

3. Enable the “Enable AJAX add to cart buttons on archives” option.

4. Save your changes.

Redirect Users to the Cart Page

Use the WooCommerce setting Redirect to the cart page after successful addition. This setting sends customers to the cart page after they add a sign.

1. Go to WooCommerce > Settings > Products.

2. Scroll down to the Add to cart behaviour section.

3. Enable “Redirect to the cart page after successful addition”.

4. Save your changes.

Customers then go to the cart page after they add a custom sign.

Troubleshooting

If you get an error when you create or update your WooCommerce integration, use the error message to find the correct checks.

Enter new API credentials

If you make a new API key in WooCommerce, enter the new credentials in Sign Customiser.

1. In the left sidebar, under Integrate, click Integrations.

2. Click View Details on your WooCommerce card.

3. Click Edit Integration.

4. Click Update API Credentials.

5. Enter the new API Key and API Secret.

6. Click Update.

WooCommerce REST API not found

This means Sign Customiser could not find the WooCommerce API at the URL you entered.

• Check your API URL is correct. It must point to your WordPress REST API, for example https://yourstore.com/wp-json/. If WordPress is in a subdirectory, include the subdirectory in the URL, for example https://yoursite.com/shop/wp-json/.

• Check your permalink settings. The WooCommerce REST API does not work with “Plain” permalinks. In your WordPress dashboard, go to Settings → Permalinks. Select any option other than “Plain”, for example “Post name”. Click Save Changes.

• Check WooCommerce is installed and activated. In your WordPress dashboard, go to Plugins → Installed Plugins. Make sure that WooCommerce is in the list and is active.

Authentication failed

This means Sign Customiser reached your store, but your store did not accept the API credentials.

• Check your consumer key and consumer secret are correct. It is easy to mix them up when you copy them. If you are not sure, make a new API key in WooCommerce (Step 1). Then enter the new credentials, as described in Enter new API credentials.

Could not connect

This means Sign Customiser could not reach the server of your store.

• Check the URL is correct and accessible. Open your API URL in a browser. Make sure that it loads.

• Check for security plugins blocking API access. Some security plugins, such as Kadence Security (formerly iThemes Security), include a firewall that can block requests to your store. Check your plugin settings. Make sure that they do not block the WooCommerce REST API.

• Check your hosting firewall settings. Ask your host if its firewall blocks external API requests.

SSL certificate error

This means there is a problem with the SSL certificate of your site.

• Check your SSL certificate is valid. Open your store URL in a browser and look for the padlock icon. A security warning can mean that your certificate expired or is not correct.

• Contact your hosting provider. They can help you fix SSL certificate problems.

WooCommerce REST API returned an invalid response

This means your store replied, but the reply did not come from the WooCommerce REST API.

• Check the API URL points to your WordPress REST API. For example, https://yourstore.com/wp-json/.

• Check WooCommerce is installed and activated. In your WordPress dashboard, go to Plugins → Installed Plugins. Make sure that WooCommerce is in the list and is active.

Your WooCommerce store returned a server error

This means your store reported an error. The message shows an HTTP code that starts with 5.

• Check your store is running correctly. Open your store in a browser.

• Try again later. If the error continues, ask your host to check the server error log.

Unexpected response from WooCommerce

This means your store sent an HTTP status that Sign Customiser did not expect.

• Check your API URL and credentials. Compare them with Step 1 and Step 2.

WooCommerce rejected the webhook creation request

This means the connection check passed, but WooCommerce did not let Sign Customiser create its webhook. Sign Customiser creates the webhook after the connection check.

• Check the API key has Read/Write permissions. Go to the REST API screen in WooCommerce (see Step 1). Make sure that the key has “Read/Write” permissions, not “Read” only. If it does not, make a new key and enter the new credentials.

WooCommerce webhooks endpoint not found

This means WooCommerce did not find the webhooks endpoint when Sign Customiser created the webhook.

• Check WooCommerce is installed and the REST API is enabled.

WooCommerce webhook creation failed

This means WooCommerce replied to the webhook request with an error. The message shows an HTTP code.

• Check your store configuration and try again. If the error continues, email support@signcustomiser.com.