How to Connect Your WooCommerce Store with Sign Customiser
This guide will walk you through the complete process of integrating your WooCommerce store on Wordpress with Sign Customiser, allowing your customers to customise products directly on your website.
Prerequisites
Before you begin, ensure you have:
Administrative access to your WooCommerce store
The ability to edit pages/posts on your WordPress site
Part 1: Generate WooCommerce API Credentials
First, you'll need to create API credentials in your WooCommerce store to allow Sign Customiser to communicate with your shop.
Access Your WordPress Admin Dashboard
Log into your WooCommerce store's WordPress admin area
Navigate to WooCommerce Settings
In the WordPress admin sidebar, click on "WooCommerce"
Click on "Settings" from the dropdown menu
Open Advanced Settings
Click on the "Advanced" tab at the top of the settings page
Access the REST API Section
Click on "REST API" from the sub-navigation
Create a New API Key
Click the "Add Key" button
Configure the API Key
Description: Enter
Sign CustomiserUser: Select an admin user from the dropdown menu
Permissions: Select "Read/Write"
Generate and Save Credentials
Click "Generate API Key"
Important: Copy both the Consumer Key and Consumer Secret immediately - you won't be able to see the secret again
Store these credentials securely as you'll need them in the next section
Part 2: Connect Sign Customiser to WooCommerce
Now you'll configure the integration within your Sign Customiser account.
Access Sign Customiser
Log into your Sign Customiser account
Navigate to Integrations
From the home screen, click on "Integrations"
Connect WooCommerce
Find the WooCommerce integration card
Click the "Connect WooCommerce" button
Enter Connection Details
WordPress API URL: Enter your store's API endpoint (typically
https://yourstore.com/wp-json/)Consumer Key: Paste the consumer key from Part 1
Consumer Secret: Paste the consumer secret from Part 1
Complete the Connection
Click to establish the connection
Once connected, you'll see HTML embed code displayed
Copy this HTML code - you'll need it for the final step
Part 3: Add the Customiser to Your Website
The final step is embedding the Sign Customiser interface on your WordPress site where customers can access it.
Navigate to Your Target Page
Go to the WordPress page or post where you want the customiser to appear
This could be a product page, dedicated customisation page, or any other location
Add Custom HTML Block
Edit the page and add a Custom HTML block where you want the customiser to display
Insert the Embed Code
Paste the HTML code you copied from Sign Customiser
The code should look similar to 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>
Save your changes and publish the page.
Your WooCommerce store is now successfully integrated with Sign Customiser! Customers can now use the customisation interface to personalise products directly on your website.