WooCommerce display upsells products in a popup on category page

On a category page, when user click on “add to cart” button i want to show upsell products related to that specific product in a poupup, so that user has the option to add upsells products in cart along with that product.

<script>
jQuery(function() {
    jQuery(".single_add_to_cart_button, .add_to_cart_button").click(function(evt) {
        //evt.preventDefault();
        var product_id = jQuery(this).attr("data-product_id");

        jQuery.ajax({
            type: "POST",
            url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
            data: {action: 'myajax-submit', id: product_id},
            cache: false,
            success: function(data) {
                jQuery("#result").html(data);
            }
        });
        //return false;
    })

})

Read More

in the functions.php i have written the following code

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
  $product_id = $_REQUEST['id'];
}

Related posts

Leave a Reply

1 comment

  1. After exploring the the plugin core files i have solve this myself.
    Here is the snippet of the code, which may help someone looking for the same

    $product = new WC_Product($product_id);
        $upsells = $product->get_upsells();
       if (!$upsells)
            return;
    
    $meta_query = WC()->query->get_meta_query();
    
        $args = array(
            'post_type' => 'product',
            'ignore_sticky_posts' => 1,
            'no_found_rows' => 1,
            'posts_per_page' => $posts_per_page,
            'orderby' => $orderby,
            'post__in' => $upsells,
            'post__not_in' => array($product->id),
            'meta_query' => $meta_query
        );
    
        $products = new WP_Query($args);
        if ($products->have_posts()) :
    // Iterate over the each product
    
       endif;