WooCommerce

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:

Installation

Once you have a partner ID, installation can be complete in 1 simple step.

Add the "Try-On" Button

Edit the functions.php file and add the following code:

add_action('woocommerce_after_add_to_cart_button','zyler_try_on_button');
function zyler_try_on_button() {
global $product;
$partnerId = '{partner-id}'; // Replace {partner-id} with your own partner ID.
$outfitId = $product->get_id();
if($outfitId) {
echo '<script src="https://www.zyler.com/js/integration/v1/modal.js" crossorigin="anonymous" defer></script>';
echo '<button type="button" class="zyler-try-on" style="display: none;" data-outfit-id="'.$outfitId.'">Try On</button>';
echo '<script>window.onload = function() { Zyler.init({ partnerId: "'.$partnerId.'", testMode: true }); }</script>';
}
}
Test Mode

As 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.

Button Styling

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.

Button Position

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_form
  • woocommerce_before_add_to_cart_button
  • 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)
  • woocommerce_after_add_to_cart_button
  • woocommerce_after_add_to_cart_form
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!

add_action('woocommerce_after_add_to_cart_button','zyler_try_on_button');
function zyler_try_on_button() {
global $product;
$partnerId = '{partner-id}'; // Replace {partner-id} with your own partner ID.
$outfitId = $product->get_id();
if($outfitId) {
echo '<script src="https://www.zyler.com/js/integration/v1/modal.js" crossorigin="anonymous" defer></script>';
echo '<button type="button" class="zyler-try-on" style="display: none;" data-outfit-id="'.$outfitId.'">Try On</button>';
echo '<script>window.onload = function() { Zyler.init({ partnerId: "'.$partnerId.'"}); }</script>';
}
}