To quickly get started integrating with WooCommerce we have developed a plugin which handles creating products in your backend for you.
Step 1: Installing Plugin
Our plugin is available via the WordPress plugin directory
You can add it to your WordPress by navigating to the plugins page via the lefthand menu and clicking "Add New Plugin".
You can then search for "Sign Customiser" and press "Install Now"
Then make sure to click "Activate" after it is done downloading.
The plugin is now installed and activated!
Step 2: Add your API key wordpress
This step is very important; if you don't do this, products will not be added to the cart.
Follow these steps to add an API key to WordPress and WooCommerce:
Navigate to your WordPress admin and click on "Settings" and then the "Sign Customiser" submenu
Paste in the API key you copied into the text field that appears
Click "Save Changes"
Step 3: Adding scripts and customiser to page
Next, on the page where you want your Customiser to live, add the following HTML code.
<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>Make sure to replace YOUR_CUSTOMISER_ID in the <iframe> code above with the ID of your customiser, found below within the dashboard of web.signcustomiser.com
If you are using the WordPress Gutenberg editor you will need to make sure you are pasting the above code into a "Custom HTML" block:
Make sure the content goes inside the white box to indicate that it is custom HTML:
Now if you visit the page you placed the customiser on you should be able to create a sign, hit "Add to cart" and it will create the product in your WooCommerce backend and add it to the cart!
To ensure custom sign products are properly added to the cart in WooCommerce, you need to adjust specific settings and optimize the user experience.
Step 4: Add to cart experience choices
There are two ways you can control how the add to cart experience works on the frontend and is shown to your customers. Choose one that suits you best and follow the instructions to enable.
Option 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.
Option 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.
Why is add to cart taking so long?
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.