Ajax Cross-sell optional extras below single product description

I really like this idea, I’ve taken a screenshot of a platform that isn’t Woocommerce, but ive seen it done before ( just cant find where ).

Whats the best way to accomplish this in the cleanest way here the add to cart button instantly adds the product to the cart, the optional extras should pull the cross-sells.

enter image description here

I was going to use something like this, and then style it into a list but there must be a cleaner way?

// Remove "related Products" remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );  // Show cross-sells using related template on single product page // see https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_related_products.html#1264-1296 function wc_output_cross_sells() {     $  crosssells = get_post_meta( get_the_ID(), '_crosssell_ids', true );      $  args = array(         'posts_per_page' => 2,         'columns'        => 2,         'orderby'        => 'rand',         'order'          => 'desc',     );     $  args['related_products'] = array_map( 'wc_get_product', $  crosssells );      // Set global loop values.     $  woocommerce_loop['name']    = 'related';     $  woocommerce_loop['columns'] = apply_filters( 'woocommerce_related_products_columns', $  args['columns'] );     wc_get_template( 'single-product/related.php', $  args ); } add_action('woocommerce_after_single_product_summary', 'wc_output_cross_sells', 30);