marcusig

/* Code For Loading Screen */
@keyframes configurator-load {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1; 
  } 
  100% {
    opacity: 0; 

marcusig

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li button {
    white-space: normal;
}

marcusig

<?php

add_filter( 'mkl_pc/add_to_cart_button/default_label', function( $original_label ) {
    return 'Continue to payment';
} );

marcusig

<?php

if ( ! defined( 'ABSPATH' ) ) die();

add_filter( 'mkl/pc/theme_id', function( $default ) {
	global $post;
	if ( ! is_a( $post, 'WP_Post' ) ) return $default;
	// Example 1: use the post meta to get the theme
	if ( get_post_meta( $post->ID, 'mkl_custom_page_theme', true ) ) return get_post_meta( $post->ID, 'mkl_custom_page_theme', true );

marcusig

	wp.hooks.addAction( 'PC.fe.layers_list_item.init', 'Antonio.selected.image', function( view ) {
		var content = PC.fe.getLayerContent( view.model.id );
		view.listenTo( content, 'change:active', function( choice_model, activated ) {
			if ( activated ) {
				var image = choice_model.get_image( 'thumbnail' );
				if ( image ) {
					view.$( '.layer-item .img' ).html( '<img src="' + image + '">' );
				}
			}
		} );

marcusig

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li {
    box-shadow: none;
    width: 11%;
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li button span.choice-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

marcusig

<?php 
add_filter( 'tmpl-pc-configurator-choice-item-label', function( $original_label ) {
	return '{{{data.name}}}';
}, 1 );

marcusig

<?php

add_action( 'mkl_pc_frontend_configurator_after_add_to_cart', function() {
	if ( ! count( WC()->cart->get_cart() ) ) return;
	echo '<a class="button elementor-button-link elementor-button elementor-size-md elementor-animation-float" href="' . trailingslashit( get_home_url() ) . 'quote/' . '">Finish Quote</a>';
}, 10 );

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;

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%);
}