Add Custom Price and Other Data to WooCommerce Cart

I have a custom "Add to Cart" button using Ajax in WooCommerce. I tested it on a product with a set price and it works as expected. However, the products are customizable and the price will be variable depending on how it gets customized. I've looked around and, being new to PHP and WP/WC development, I'm not sure I see anything that helps me.

I currently have the following two functions in the functions.php file for my active child theme:

add_action('wp_enqueue_scripts', 'enqueue_custom_add_to_cart_scripts');
function enqueue_custom_add_to_cart_scripts() {
  if(function_exists('is_product') && is_product()) {
    wp_enqueue_script('custom_add_to_cart', get_stylesheet_directory_uri() . '/js/add-to-cart-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('custom_add_to_cart', 'wc_params_custom', array(
      'ajax_url' => admin_url('admin-ajax.php'), 
      'nonce' => wp_create_nonce('nonce_custom_atc')
    ));
  }
}

add_action('wp_ajax_custom_add_to_cart', 'custom_add_to_cart');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_add_to_cart');
function custom_add_to_cart() {
  $cart_item_key = null;
  
  if (isset($_POST['nonce']) && wp_verify_nonce($_POST['nonce'], 'nonce_custom_atc')
  && isset($_POST['product_id']) && $_POST['product_id'] > 0
  && isset($_POST['quantity']) && $_POST['quantity'] > 0) {
    $cart_item_key = WC()->cart->add_to_cart(
      intval($_POST['product_id']), 
      intval($_POST['quantity']), 
      0, 
      array(), 
      array(
        'height'=>isset($_POST['height']) ? sanitize_text_field($_POST['height']) : '', 
        'width'=>isset($_POST['width']) ? sanitize_text_field($_POST['width']) : '', 
        'totalArea'=>isset($_POST['totalArea']) ? sanitize_text_field($_POST['totalArea']) : '', 
        'cost'=>isset($_POST['cost']) ? sanitize_text_field($_POST['cost']) : '', 
        'numPanels'=>isset($_POST['numPanels']) ? sanitize_text_field($_POST['numPanels']) : '', 
        'enteredHeight'=>isset($_POST['enteredHeight']) ? sanitize_text_field($_POST['enteredHeight']) : '', 
        'enteredWidth'=>isset($_POST['enteredWidth']) ? sanitize_text_field($_POST['enteredWidth']) : ''
      )
    );
  }

  wp_die($cart_item_key ? "Cart item key: {$cart_item_key}" : "Error: not added!");
}

My JS file looks like this:

jQuery( function($) {
    if (typeof wc_params_custom === 'undefined')
        return false;

    $('.custom.add-to-cart').on('click', function(e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url:  wc_params_custom.ajax_url,
            data: {
                'action'        :'custom_add_to_cart',
                'nonce'         : wc_params_custom.nonce,
                'product_id'    : '123',
                'quantity'      : 1,
                'height'        : '96 in.',
                'width'         : '120 in.',
                'totalArea'     : '80 sq ft',
                'cost'          : '$636.00', // changes based upon height & width input
                'numPanels'     : 5,
                'enteredHeight' : '8 ft',
                'enteredWidth'  : '10 ft'
            },
            success: function (response) {
                $(document.body).trigger("wc_fragment_refresh");
                console.log(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });
    });
});

The code above is triggered by a simple:

<button class="custom add-to-cart">Add to Cart</button>

In the JS code, the cost is the value of the totalArea multiplied by cost per square foot. Obviously, I can't put that into the product page on the backend, so it has to come from user inputs. I also need it to display on the cart page so the customer can see the correct total. I also need totalArea, numPanels, enteredHeight, and enteredWidth to show on the cart as well. I still need height and width sent through somehow as they go to a production team. The fields enteredHeight and enteredWidth are simply to show the customer the dimensions they entered on the customizer page so they don't get confused.

Does anybody have an idea of how I could get this custom data displaying properly, as well as the data that production would need?

Thanks!

source https://stackoverflow.com/questions/77275693/add-custom-price-and-other-data-to-woocommerce-cart