在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:
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

