Wordpress integration and theme setup

To quickly get started integrating with WooCommerce we have developed a plugin which handles creating products in your backend for you.

You can download the plugin at the link below (it will soon be available via the WordPress Plugin Directory).

https://integrations.signcustomiser.com/sign-customiser-woocommerce.zip

Upload the zip file in your WordPress admin

Ensure that the plugin is activated by heading over to "Installed Plugins" and seeing "Sign Customiser"

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!