Add virtual try-on to WooCommerce

The Macgi WooCommerce plugin is in the works. Meanwhile you can use the widget today with one script tag: WooCommerce already outputs product data (JSON-LD) on product pages, so auto mode usually finds the page and the photo with no extra work.

WooCommerce plugin (coming soon)

The plugin will let you enter your key in the WordPress settings, pick up product photos and add the “Try it on” button to product pages without code. Stores in the beta hear as soon as it is ready. When you switch to the plugin, just remove the script tag you added with one of the methods below.

Interim 1: a header/footer code plugin (easiest)

1. In the WordPress admin, go to Plugins → Add New, search for WPCode (“Insert Headers and Footers”), install and activate it. Any header/footer code plugin works too.
2. Open Code Snippets → Header & Footer.

3. Paste this into the Footer box:

   FooterCopy

   <script src="https://cdn.macgi.app/widget.js"
           data-key="pk_live_..."
           data-auto
           defer></script>

4. Click Save, then open a product page and look for the “Try it on” button.

Interim 2: a wp_footer hook in functions.php

If you are comfortable with code, add this to your child theme’s functions.php so theme updates do not remove it. It loads the widget on product pages only.

add_action( 'wp_footer', function () {
	// Load the widget on product pages only.
	if ( ! function_exists( 'is_product' ) || ! is_product() ) {
		return;
	}
	?>
	<script src="https://cdn.macgi.app/widget.js"
	        data-key="pk_live_..."
	        data-auto
	        data-slot-rules='{"jeans":"bottom","trousers":"bottom","skirt":"bottom","dress":"one_piece"}'
	        defer></script>
	<?php
} );

Optional: place your own button

Want the button right after “Add to cart” in your theme’s button style? Remove data-auto (and data-slot-rules) from the script tag, then add this to your child theme’s functions.php. Tag trousers and skirts with macgi-bottom, dresses with macgi-one-piece.

add_action( 'woocommerce_after_add_to_cart_button', function () {
	global $product;
	$image = wp_get_attachment_image_url( $product->get_image_id(), 'full' );
	if ( ! $image ) {
		return;
	}
	$slot = 'top';
	if ( has_term( 'macgi-bottom', 'product_tag', $product->get_id() ) ) {
		$slot = 'bottom';
	} elseif ( has_term( 'macgi-one-piece', 'product_tag', $product->get_id() ) ) {
		$slot = 'one_piece';
	}
	printf(
		'<button type="button" class="button alt" data-macgi-tryon data-garment-image="%s" data-garment-slot="%s" data-garment-description="%s">%s</button>',
		esc_url( $image ),
		esc_attr( $slot ),
		esc_attr( $product->get_name() ),
		esc_html( 'Try it on' )
	);
} );

Notes

• Caching or JavaScript optimisation plugins (combining or delaying scripts) can drop the data-key attribute. If the button does not show, exclude cdn.macgi.app from JavaScript optimisation and clear the cache.
• Domains: the key only works on registered domains. A staging site needs adding separately; message us.
• Options, JavaScript events and troubleshooting: see the Quick start.