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

@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

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

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

<?php

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

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_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

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

wp.hooks.addAction( 'PC.fe.viewer.item.added', 'MKL/PC/Custom_JS', function( view, viewer ) {
    // Set the class name
    var layer_class = 'layer-' + view.model.get( 'layerId' );
    // Find the existing container.
    var layer_container = viewer.$layers.find( '.' + layer_class );
    if ( ! layer_container.length ) {
        // If the container doesn't exist, add it
        view.$el.wrap( '<div class="' + layer_class + '" />' );
	} else {
        layer_container.append( view.$el );

marcusig

wp.hooks.addAction( 'PC.fe.start', 'Custom_script', function( configurator ) {
	// Do something here. E.g.: 
	// Get the viewer
	var viewer = configurator.viewer.$el;
	// Get the layer container
	var layers_container = configurator.viewer.$( '.mkl_pc_layers' );
} );