Whilst we work on a Wordpress plugin to make installation super simple, you must install Zyler on Woocommerce manually. The following instructions aim to make it as simple as possible for you.
To install on Woocommerce, you must have the ability to edit the
functions.php theme file. To achieve this, you can either create a child theme (see https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme) or, the easiest way, is to download and use the following plugin:
InstallationOnce you have a partner ID, installation can be complete in 1 simple step.
Add the "Try-On" Button
functions.php file and add the following code:
testMode is set to
true, the "Try-on" button will not appear on your products page yet, so don't worry about your customers seeing the button that you haven't tested yet! For you to be able to see the "Try-on" button yourself, add
?show_zyler to the end of the URL of the product page desired. See configuration for more details.
The button is not styled in anyway so add any classes and/or styling required for it to fit into your site. If you're struggling with this, a good place to start is to find the style classes that a current button in your theme has. For example, on Google Chrome, find a button on your site, right-click and choose inspect and copy the classes from the highlighted element.
If you want to change the position of the button, you can replace
woocommerce_after_add_to_button with any of the following WooCommerce hooks, which have a self explanatory naming convention.
woocommerce_before_add_to_cart_quantity(available from WooCommerce v3.0 and above)
woocommerce_after_add_to_cart_quantity(available from WooCommerce v3.0 and above)
Move to Production Mode
Once you are happy with how everything looks, change
testMode: true to
testMode: false or replace all of the code you pasted in before with below - remember to set the correct WooCommerce hook and button styling. You're now production ready!