How to add Sign Customiser to wordpress/woocommerce
-
Create a free Sign Customiser account.
-
Ensure you have the official Sign Customiser wordpress plugin installed and activated on your wordpress site. Download the wordpress plugin here
-
Activate the plugin after it has finished downloading on your wordpress dashboard.
-
In the wordpress admin create or navigate to the page where you want your Customiser to live
-
Get the customiser ID from the Sign Customiser dashboard. To get your customiser ID follow these instructions: Find your Sign Customiser ID
-
Copy and paste the following code into the “Custom HTML” block:
<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!
