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.

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

            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) {
        //return false;


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'];


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)

$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


Need Your Help

How can I bundle a command line utility in os x application on Mac App Store (using sandbox entitlement)

objective-c osx sandbox

I have a c++ command line application that I have already compiled into an executable and have added it into my Xcode project. I have also added the "Copy Files" section to the Build Phases tab of...

changing the value of a model property emberjs

javascript ember.js ember-cli

I'm trying to achive a toggle effect in Emberjs for some dynamically loaded data. Here is my adapter:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.