How to Charge a Custom Price in WooCommerce Using User Input

TThemes May 2, 2025 No Comments

If you’re looking to let customers enter a custom amount for products or services on your WooCommerce site — such as donations, consulting fees, service payments, or “pay what you want” models — WooCommerce doesn’t provide this feature out of the box. But with a bit of custom code, you can easily set it up.

In this guide, you’ll learn step-by-step how to accept custom price input from users and add the product to the cart with their chosen amount.

🔧 Use Case Examples

Collecting donations with a custom amount.
Charging clients for consulting or services with a flexible fee.
Selling digital goods with a “pay what you want” model.
Accepting partial payments or manual payments.

🧱 What You’ll Need

WordPress with WooCommerce installed.
A simple WooCommerce product created (can be named “Custom Payment”).
Access to your theme’s functions.php file or a custom plugin.

Step 1: Create a Custom Product

Go to Products → Add New in your WordPress dashboard.
Name it something like: Custom Payment or Pay What You Want.
Set a placeholder price like $1 (we’ll override it later).
Publish the product and note its Product ID (visible in the URL or product list).

Step 2: Add a Custom Payment Form

Add this HTML form wherever you want users to enter an amount (on a page, post, or custom template):


<form id="custom-payment-form" method="POST" action="" class="mt-4">
  <div class="form-group">
    <label for="amount"><strong>Enter Amount (USD)</strong></label>
    <input type="number" name="custom_price" id="amount" class="form-control" placeholder="e.g., 250" required min="1" step="0.01">
  </div>
  <input type="hidden" name="product_id" value="8428">
  <button type="submit" class="btn btn-primary mt-2">Pay Now</button>
</form>

<script>
  document.getElementById('custom-payment-form').addEventListener('submit', function(e) {
    setTimeout(function() {
      window.location.href = '/cart'; // or /checkout
    }, 500);
  });
</script>

Step 3: Handle Form Submission in `functions.php`

Add this code to your theme’s functions.php file (or a custom plugin):


add_action('init', 'handle_custom_payment_form');
function handle_custom_payment_form() {
    if (
        isset($_POST['product_id']) &&
        isset($_POST['custom_price']) &&
        is_numeric($_POST['custom_price'])
    ) {
        $product_id = intval($_POST['product_id']);
        $custom_price = floatval($_POST['custom_price']);

        WC()->cart->add_to_cart($product_id, 1, 0, [], [
            'custom_price' => $custom_price,
            'unique_key'   => md5(microtime() . rand())
        ]);

        wp_redirect(wc_get_cart_url());
        exit;
    }
}

This code:

Grabs the product ID and custom price from the form.
Adds the product to the cart with a custom price.
Redirects to the cart page.

Step 4: Override the Custom Price Display

By default, WooCommerce shows the original product price ($1). To display the custom price correctly in the cart and checkout, add the following filters:


add_action('woocommerce_before_calculate_totals', 'apply_custom_price_to_cart', 10, 1);
function apply_custom_price_to_cart($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;

    foreach ($cart->get_cart() as $cart_item) {
        if (isset($cart_item['custom_price'])) {
            $cart_item['data']->set_price(floatval($cart_item['custom_price']));
        }
    }
}

add_filter('woocommerce_cart_item_price', 'custom_display_cart_item_price', 10, 3);
function custom_display_cart_item_price($price, $cart_item, $cart_item_key) {
    if (isset($cart_item['custom_price'])) {
        return wc_price($cart_item['custom_price']);
    }
    return $price;
}

add_filter('woocommerce_cart_item_subtotal', 'custom_display_cart_item_subtotal', 10, 3);
function custom_display_cart_item_subtotal($subtotal, $cart_item, $cart_item_key) {
    if (isset($cart_item['custom_price'])) {
        $line_total = floatval($cart_item['custom_price']) * $cart_item['quantity'];
        return wc_price($line_total);
    }
    return $subtotal;
}

Bonus: Style the Form with Bootstrap

If you’re using Bootstrap, style the form like this:


<form id="custom-payment-form" method="POST" action="/" class="mt-4">
  <div class="form-group">
    <label for="amount"><strong>Enter Amount (USD)</strong></label>
    <input type="number" name="custom_price" id="amount" class="form-control" placeholder="e.g., 250" required min="1" step="0.01">
  </div>
  <input type="hidden" name="product_id" value="1234"> <!-- Replace with your product ID -->
  <button type="submit" class="btn btn-success mt-2">Pay Now</button>
</form>

🎉 Final Result

Users can enter any amount.
Product is added to cart with that amount.
Cart and checkout show the correct price.
You get paid flexibly!

🛠 Troubleshooting Tips

Make sure the product is published and purchasable.
Ensure price input is valid (min="1", step="0.01").
Test with different amounts and check for cache/plugin conflicts.

Conclusion

With this setup, you’ve created a powerful custom payment workflow using native WooCommerce features — no third-party plugins required.

You Are Here...