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
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
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">×</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"><?phpif ( $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();}