marcusig

<?php

add_action( 'wp_enqueue_scripts', function() {
	wp_add_inline_script( 'mkl_pc/js/product_configurator', "
		// When the configurator starts, add the qty buttons
		
		wp.hooks.addAction( 'PC.fe.start', 'MKL/PC/Conditional', function() {
			if ( 'undefined' != typeof oceanwpWooCustomFeatures && oceanwpWooCustomFeatures.quantityButtons ) oceanwpWooCustomFeatures.quantityButtons.start();
		}, 30 );
	" );

marcusig

<?php

add_action( 'mkl_pc/added_linked_product_to_the_cart', function( $cart_item_key, $product_id ) {
	WC()->cart->remove_cart_item( $cart_item_key );
	// Add custom notice
	wc_add_notice( '<a href="' . esc_url( wc_get_cart_url() ) . '" class="button wc-forward">' . esc_html__( 'View cart', 'woocommerce' ) . '</a>' . __(' Your dress design has been added to your cart.', 'product-configurator-custom-theme') );
	// Prevent default notice 
	throw new Exception();
}, 20, 2 );

marcusig

<?php
/** 
 * Display the product thumbnail in order received page
 */
function order_received_item_thumbnail_image( $item_name, $item, $is_visible ) {

    // Targeting order received page only

    if( ! is_wc_endpoint_url('order-received') ) return $item_name;

marcusig

<?php

add_filter( 'tmpl-pc-configurator-choice-item-label', function( $label ) {
	return $label . ' <# if ( data.sku ) { #><span class="sku">{{data.sku}}</span><# } #>';
} );

marcusig

// Requires wp.hooks
// Make sure to set 'wp-hooks' and 'jquery' as dependencies when loading this script.
if ( ! wp || ! wp.hooks ) return;

( function( $ ) {
  
	wp.hooks.addAction( 'PC.fe.choice.set_choice', 'Custom_domain', function( model, view ) {
    // Do something here.
    // view.$el will give you the jQuery object of the current choice.
	} );

marcusig

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers *:not(.current_layer) {
    opacity: 0;
}

marcusig

@media(max-width: 660px) {
  .mkl_pc .mkl_pc_container footer button.configurator-add-to-cart span {
      display: block;
  }

  button.primary.button.btn.btn-primary.configurator-add-to-cart {
      background-color: #3bb54a !important;
      margin-right: 4px;
  }

marcusig

@media(min-width: 1000px) {
    .mkl_pc {
        /* Change this value to change the sidebar width */
        --toolbar_width: 500px;
    }
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers button {
    white-space: normal;
    word-break: break-word;

marcusig

/*
The Layer must have a specific class to target the images.
In this example, we use the class "bezel"
See it working on http://demos.mklacroix.com/configurable-watch/
*/

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.bezel:not(.active) {
    transform: translateX(calc(-50% - 300px)) translateY(-50%);
}

marcusig

@media (max-width: 660px) {
    .mkl_pc .mkl_pc_container .mkl-pc-show-form {
        display: none;
    }
    .mkl_pc .mkl_pc_container footer .form.form-cart {
        position: relative;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;