fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Variation Swatches with custom modal help

Alex Grey

Hello, I need some help in using your great plugin ‘Variation Swatches for WooCommerce’.
I want to use my own quick view modal window with your plugin.
I see variations in my custom modal window, hover effect works fine, but I can’t switch variations in it. In product page all is fine, and I can switch variations in my modal when plugin is disabled, so I think it’s something specific exactly with plugin, maybe you’ll see it.
I know some ready plugins, where your variations can be switched in modal windows, but by som reasons I want my own modal.  It’s only a demo in my localhost for now, and still needs lots of work.

There is my code. Maybe I have some mistake, that you already know.

Functions with modal container:
/*where is it in archive loop*/
add_action( 'woocommerce_before_shop_loop_item_title', 'themename_loop_product_div_image_close', 30);
function themename_loop_product_div_image_close(){
global $product;
?>
<div class="loop-product_bottom loop-product_bottom_sub1">
<ul>
<li>
<a href="#" data-toggle="modal" data-target="#modal-product" data-product-id="<?php echo $product->get_id();?>" class="modal-product-link">
<span class="fa-eye-wrap"><i class="fas fa-eye"></i></span>
</a>
</li>
<li>
<?php }

/*MODAL*/
add_action( 'wp_footer', 'themename_modal_window');
function themename_modal_window(){
?>
<div class="modal video-modal fade" id="modal-product" tabindex="-1" role="dialog" aria-labelledby="modal-product">
<div class="modal-dialog modal-dialog-product-review" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<section class="modal-section mb-20">
<div class="modal-body">
</div>
</section>
</div>
</div>
</div>
<?php
}

AJAX
add_action( 'wp_ajax_ajax_quick_view', 'themename_quick_view_product_callback' );
add_action( 'wp_ajax_nopriv_ajax_quick_view', 'themename_quick_view_product_callback' );
function themename_quick_view_product_callback(){

if ( ! wp_verify_nonce( $_POST['nonce'], 'quick-nonce' ) ) {
wp_die( 'No chanse!' );
}
global $post, $woocommerce, $product;
$product = wc_get_product(esc_attr($_POST['id']));
ob_start();
?>
<div class="modal-body row">
<div class="modal-body-left col-md-5">
<?php
$attachment_id = get_post_thumbnail_id( $product->get_id() );
$product_thub = wp_get_attachment_image_url($attachment_id, 'shop_single'); ?>
<img src="<?php echo $product_thub;?>">

</div>

<div class="modal-body-right col-md-7">
<h2><?php echo $product->get_name();?></h2>
<p><?php $rating = $product->get_average_rating();
$count = $product->get_rating_count();
echo wc_get_rating_html( $rating, $count ); ?></p>
<div class="modal-price mb-20"><?php echo $product->get_price_html();?></div>
<p class="mb-20"><?php echo $product->get_short_description(); ?></p>
<p class="mb-20 cat-popup"><?php echo $product->get_categories(); ?></p>
<div class="modal-buttons">
<?php
if ( $product->is_type( 'variation' ) ) {

?>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<?php woocommerce_single_variation_add_to_cart_button(); ?>
</form>
<?php
} else {
woocommerce_template_single_add_to_cart();
}?>
</div>

</div>
</div>
<?php
$data['product'] = ob_get_clean();
wp_send_json( $data);
wp_die();
}

Tanvirul Haque

Hi Alex Grey,

Could you record me reproducing your requirement using a tool like this? https://www.useloom.com It helps me to quickly get it.

Thank you