If you are subscribed to the Framer & Customers plan, you can optionally load the connect page into an iframe. To make this work, your SimulArt account must first be installed on a subdomain matching your WooCommerce store domain.


Step 1. Contact us to initiate the custom subdomain installation procedure, a $10 monthly fee applies for the installation, maintenance, and SSL certificate required to secure the URLs.


Step 2. Make sure your account is properly connected to WooCommerce.


Step 3. Add the following code inside the <head></head> tags of the page where you will be loading the iframe. This code will make the height of the iframe adapt to the content. Make sure to replace ACCOUNT_URL by your custom subdomain. 

<script src="https://ACCOUNT_URL/ext/iframeResizer/iframeResizer.min.js" type="text/javascript"></script>

<script language="javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
</script>


Step 4. Add this code where you want the special connect page to load. Do not forget to replace ACCOUNT_URL by your custom subdomain here as well.

<style>iframe{width:100%}</style>
<iframe id="simulart" scrolling="no" style="border: none; min-height: calc(100vh);" onload="iFrameResize({autoResize:true,checkOrigin:false})"></iframe>
<script>document.getElementById("simulart").src = "https://ACCOUNT_URL/connect_page?parentWidth=" + myWidth + "&parentHeight=" + myHeight;</script>

You can optionally customize the page appearance of the page by adding your own CSS under Menu -> Settings -> Customer Pages CSS Styling. 

The page loaded will allow your customers to upload images and create designs with the components of your account. Once done, clicking the "Add to cart" button will create a new custom item in WooCommerce and redirect the customer to cart for checkout.



 

Important Notes!

By default, items created are uncategorized and hidden. A category may be specified under Menu -> Settings -> Third Party Cart Connection -> WooCommerce. Custom items created by users may contain personnal images, please make sure to keep customer them hidden in your WooCommerce setup. 

 

When an item is added to cart, there is no link back to the product details page because the product is set as "hidden". You can override this default behaviour, simply replace:
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );

by

$product_permalink = $_product->get_permalink( $cart_item );

around line 44 of your /wp-content/plugins/woocommerce/templates/cart/cart.php page, it will force the cart links for SimulArt hidden items to show without making them visible in pages and searches. 


When checking out with WooCommerce, order details are not saved in your framing studio but only in WooCommerce. If you want the orders to be saved in your framing studio, please consider sending customers directly in your studio.