This guide will walk you through on how to: install the Sign Customiser plugin on your WordPress site, embed your customiser, sync orders, and configure WooCommerce settings to ensure a smooth customer experience.
1. Installing the Sign Customiser Plugin
To get started, install the official Sign Customiser plugin from the WordPress Plugin Directory.
Steps:
In your WordPress admin, go to Plugins > Add Plugin.
Type “Sign Customiser” in the Search Plugins field.
Find the Sign Customiser plugin from the list and click Install Now, then Activate the plugin.
2. Syncing WooCommerce Orders with Sign Customiser
You will need to sync the orders placed in WooCommerce to your Sign Customiser dashboard. For this, you will need to add an API key.
Important: This step is essential. If you skip it, products will not be added to the WooCommerce cart.
Steps:
Go to your Sign Customiser dashboard.
In the menu, click on Team Settings.
In the API Tokens section, click on Create New Token.
In the Token Name field, enter a name for your token, e.g. WordPress.
Click Create.
A new API key will be shown. Copy the token.
Note: You will not be able to see this value again.In your WordPress admin, go to Settings > Sign Customiser.
Paste your copied API key in the API Key field.
Click Save Changes.
3. Embedding Your Customiser on a Page
You can embed your customiser on any page using either the Gutenberg editor or a page builder like Elementor.
To get started, you need the following:
Your Customiser ID – Need help finding your Customiser ID?
The embed code (replace
YOUR_CUSTOMISER_IDwith your Customiser ID):
<iframe src="https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID"></iframe>
<style> iframe { border: 0; width: 100%; height: 100vh; } </style>
<script src="https://integrations.signcustomiser.com/sign-customiser-woocommerce.js"></script>
<script> window.SpcWc.init(); </script>
Option A: Add the Customiser Using the Gutenberg Editor
In your WordPress admin, go to Pages and click on Add Page.
Click the + Add Block button and choose Custom HTML block.
Paste the full embed code into the box.
Click on Save or Publish.
Option B: Add the Customiser Using Elementor
Go to Pages in your WordPress admin
Click on Add Page.
Click on Edit with Elementor.
Drag the HTML widget onto the page where you want the customiser to appear.
Paste the full embed code in the HTML Code textbox.
Click Publish to save the changes.
Option C: Add the Customiser Using WPBakery
Go to Pages in your WordPress admin
Click on Add Page.
Click on Backend Editor.
Click + Add Element and search for the Raw HTML element.
Add the Raw HTML block to the desired section of your layout.
Paste the full embed code inside the Raw HTML textbox.
Click Publish to save the changes.
4. Configuring WooCommerce for Custom Sign Products
To ensure custom sign products are properly added to the cart in WooCommerce, you need to adjust specific settings and optimise the user experience.
4.1. Enable AJAX Add to Cart
To allow custom sign products to be added to the cart smoothly, follow these steps:
In your WordPress dashboard, go to WooCommerce > Settings > Products.
Scroll down to the Add to cart behaviour section.
Enable the "Enable AJAX add to cart buttons on archives" option.
Click Save changes.
4.2. Redirect Users to the Cart Page
Since it can take up to approximately 7 seconds for the custom sign product to be generated and appear in the cart, users may mistakenly try to add the product multiple times. To avoid this:
Go to WooCommerce > Settings > Products.
Scroll down to the Add to cart behaviour section.
Enable "Redirect to the cart page after successful addition".
Click Save changes.
This ensures that users are redirected to the cart immediately after adding a custom sign product, preventing duplicate clicks.
5. Final Steps
Once you have followed the steps above, your customiser is ready to use. You can now publish your page and test the full flow from creating a sign to adding it to the cart.
Each time a customer adds a sign to the cart, a new product is automatically generated in your WooCommerce store with the sign’s design and details. This allows WooCommerce to process it like any other product during checkout.
Over time, your store may accumulate a large number of unused or unpurchased custom sign products.
To manage them, you have two options:
Manually delete: by default, all custom sign products are tagged SignCustomiser, making them easy to locate and bulk delete manually.
Automated bulk delete: this involves using a third-party plugin to automatically delete these products after a certain period. We recommend using the WP Bulk Delete Pro plugin. For instructions on how to set it up, see our guide: Automatically Deleting Generated Products in WordPress.
FAQ
Why is it taking so long for the custom signs to add to the cart?
Why is it taking so long for the custom signs to add to the cart?
If your WooCommerce site is taking a long time to add the product to the cart, it is likely due to the performance offered by your hosting provider. Many WordPress hosting companies utilise "shared" hosting, which means you get a cheaper price but at the cost of sharing your CPU resources with other websites, often causing significant latency. Increasing your server resources will likely decrease the time it takes to create the product in your store.
Are custom signs hidden on my storefront and search engines?
Are custom signs hidden on my storefront and search engines?
Yes, they are. You can read more about it here.