You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在WooCommerce简单产品中添加可调整价格的选择字段(无需变体/插件)

Got it, let's build this custom price add-on feature without relying on variations or plugins—all using native WooCommerce hooks and custom code. Here's a step-by-step implementation that works seamlessly:

Custom Price Add-On Field for Single Product Pages (No Variations/Plugins)

1. Add the Custom Selection Field to the Product Page

First, we'll inject a dropdown field above the "Add to Cart" button. This field will list your options with their corresponding price increments.

Add this code to your theme's functions.php file (or a custom plugin for better maintainability):

add_action('woocommerce_before_add_to_cart_button', 'custom_price_addon_field');
function custom_price_addon_field() {
    global $product;
    
    // Only show on single product pages for simple products (adjust if needed)
    if (!is_product() || !$product->is_type('simple')) return;
    
    echo '<div class="custom-price-addon">';
    echo '<label for="custom_price_option">Choose Your Upgrade:</label>';
    echo '<select id="custom_price_option" name="custom_price_option">';
    echo '<option value="0">Standard Option (+$0)</option>';
    echo '<option value="10">Premium Upgrade (+$10)</option>';
    echo '<option value="25">Deluxe Package (+$25)</option>';
    // Add more options with your desired price increments
    echo '</select>';
    echo '</div>';
}

You can style this field with CSS to match your site's design—just target the .custom-price-addon class.

2. Pass the Selected Add-On Data to the Cart

Next, we need to save the selected price increment to the cart item so WooCommerce can use it for calculations. Use this hook:

add_filter('woocommerce_add_cart_item_data', 'save_custom_price_addon_data', 10, 2);
function save_custom_price_addon_data($cart_item_data, $product_id) {
    if (isset($_POST['custom_price_option'])) {
        $addon_amount = (float)sanitize_text_field($_POST['custom_price_option']);
        if ($addon_amount > 0) {
            $cart_item_data['custom_price_addon'] = $addon_amount;
            // Make each cart item unique based on the selection (optional but recommended)
            $cart_item_data['unique_key'] = md5(microtime().rand());
        }
    }
    return $cart_item_data;
}

3. Calculate and Display the Adjusted Price

Now we'll update the cart totals to include the add-on price, and show the adjusted price in the cart/checkout pages.

First, retain the custom data when the cart is loaded from the session:

add_filter('woocommerce_get_cart_item_from_session', 'retain_custom_price_addon_data', 10, 2);
function retain_custom_price_addon_data($cart_item, $values) {
    if (isset($values['custom_price_addon'])) {
        $cart_item['custom_price_addon'] = $values['custom_price_addon'];
    }
    return $cart_item;
}

Then, modify the cart item's price dynamically:

add_action('woocommerce_before_calculate_totals', 'calculate_custom_price_addon', 10, 1);
function calculate_custom_price_addon($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;
    
    foreach ($cart->get_cart() as $cart_item) {
        if (isset($cart_item['custom_price_addon'])) {
            $addon_amount = $cart_item['custom_price_addon'];
            // Add the increment to the product's price
            $cart_item['data']->set_price($cart_item['data']->get_price() + $addon_amount);
        }
    }
}

To show the add-on details in the cart (so customers see what they're paying extra for), add this:

add_filter('woocommerce_cart_item_name', 'display_custom_price_addon_in_cart', 10, 3);
function display_custom_price_addon_in_cart($name, $cart_item, $cart_item_key) {
    if (isset($cart_item['custom_price_addon'])) {
        $addon_amount = wc_price($cart_item['custom_price_addon']);
        $name .= '<br><small>Upgrade: +'.$addon_amount.'</small>';
    }
    return $name;
}

4. Save the Add-On Data to Orders and Emails

Finally, make sure the add-on details are saved to the order and displayed in order confirmation emails and the admin dashboard:

add_action('woocommerce_checkout_create_order_line_item', 'save_custom_price_addon_to_order', 10, 4);
function save_custom_price_addon_to_order($item, $cart_item_key, $values, $order) {
    if (isset($values['custom_price_addon'])) {
        $addon_amount = wc_price($values['custom_price_addon']);
        $item->add_meta_data('Price Upgrade', '+'.$addon_amount, true);
    }
}

Quick Notes:

  • Test thoroughly: Make sure to test adding the product with different options, checking out, and verifying the order details.
  • Use a child theme: If you're adding code to functions.php, use a child theme so your changes don't get overwritten when the parent theme updates.
  • Adjust options: Modify the dropdown options in step 1 to match your actual price increments and labels.

内容的提问来源于stack exchange,提问作者Juan David

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.25 04:15:25