在单个产品页面上添加一个复选框，这会在 Woocommerce 中增加额外费用

问题描述

在 woocommerce 中，我使用以下代码在管理产品编辑页面上显示输入文本字段，允许我向产品添加附加定价选项:

In woocommerce, I am using the following code to display an input text field on admin product edit pages, that allow me to add an additonal pricing option to the product:

add_action( 'woocommerce_product_options_pricing', 'wc_cost_product_field' );
function wc_cost_product_field() {
    woocommerce_wp_text_input( array( 'id' => 'repair_price', 'class' => 'wc_input_price short', 'label' => __( 'Repair Cost', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')' ) );
}

add_action( 'save_post', 'wc_cost_save_product' );
function wc_cost_save_product( $product_id ) {

     // stop the quick edit interferring as this will stop it saving properly, when a user uses quick edit feature
     if (wp_verify_nonce($_POST['_inline_edit'], 'inlineeditnonce'))
        return;

    // If this is a auto save do nothing, we only save when update button is clicked
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['repair_price'] ) ) {
        if ( is_numeric( $_POST['repair_price'] ) )
            update_post_meta( $product_id, 'repair_price', $_POST['repair_price'] );
    } else delete_post_meta( $product_id, 'repair_price' );
}

现在在产品页面(在前端)上，我需要一个复选框维修成本 20 美元"，当产品自定义字段定价选项填充一些价格时会出现该复选框.

Now on the product page (in the front end) I need a checkbox "Repair cost $20", that will appear when the product custom field pricing option is filled with some price.

如果客户添加此选项，则会在产品上增加 20 美元的额外费用，并且还应反映在购物车和结帐页面上.

If customer add this option, it will add an additional cost of $20 on the product and it should also be reflected on the cart and checkout pages.

任何帮助将不胜感激.

推荐答案

在下面的代码中，我重新访问了您的实际代码并添加了所有必要的代码以启用单个产品页面中的复选框选项，如果产品已填充(对于非销售的非可变产品类型).

In the following code, I have revisited a bit your actual code and added all necessary code to enable the checkbox option in single product page if the pricing option in the product is filled (for non variable products type that are not on sale).

当客户选择该选项时，产品价格会增加，当添加到购物车时，价格变化会反映在购物车和结帐页面中(请参阅最后的屏幕截图).>

代码:

When the option is selected by the customer, the product price is increased and when added to cart the price change is reflected in cart and checkout pages (see the screenshots at the end).

The code:

// Backend: Additional pricing option custom field add_action( 'woocommerce_product_options_pricing', 'wc_cost_product_field' ); function wc_cost_product_field() { woocommerce_wp_text_input( array( 'id' => '_repair_price', 'class' => 'wc_input_price short', 'label' => __( 'Repair Cost', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')' )); } // Backend: Saving product pricing option custom field value add_action( 'woocommerce_admin_process_product_object', 'save_product_custom_meta_data', 100, 1 ); function save_product_custom_meta_data( $product ){ if ( isset( $_POST['_repair_price'] ) ) $product->update_meta_data( '_repair_price', sanitize_text_field($_POST['_repair_price']) ); } // Front: Add a text input field inside the add to cart form on single product page add_action('woocommerce_single_product_summary','add_repair_price_option_to_single_product', 2 ); function add_repair_price_option_to_single_product(){ global $product; if( $product->is_type('variable') || ! $product->get_meta( '_repair_price' ) ) return; add_action('woocommerce_before_add_to_cart_button', 'product_option_custom_field', 30 ); } function product_option_custom_field(){ global $product; $active_price = (float) $product->get_price(); $repair_price = (float) $product->get_meta( '_repair_price' ); $repair_price_html = strip_tags( wc_price( wc_get_price_to_display( $product, array('price' => $repair_price ) ) ) ); $active_price_html = wc_price( wc_get_price_to_display( $product ) ); $disp_price_sum_html = wc_price( wc_get_price_to_display( $product, array('price' => $active_price + $repair_price ) ) ); echo '<div class="hidden-field"> <p class="form-row form-row-wide" id="repair_option_field" data-priority=""> <span class="woocommerce-input-wrapper"><label class="checkbox"> ' . __("Repair Option:", "Woocommerce") . ' <input type="checkbox" class="input-checkbox " name="repair_option" id="repair_option" value="1"> + ' . $repair_price_html . '</label></span></p> <input type="hidden" name="repair_price" value="' . $repair_price . '"> <input type="hidden" name="active_price" value="' . $active_price . '"></div>'; // Jquery: Update displayed price ?> <script type="text/javascript"> jQuery(function($) { var cb = 'input[name="repair_option"]' pp = 'p.price'; // On change / select a variation $('form.cart').on( 'change', cb, function(){ if( $(cb).prop('checked') === true ) $(pp).html('<?php echo $disp_price_sum_html; ?>'); else $(pp).html('<?php echo $active_price_html; ?>'); }) }); </script> <?php } // Front: Calculate new item price and add it as custom cart item data add_filter('woocommerce_add_cart_item_data', 'add_custom_product_data', 10, 3); function add_custom_product_data( $cart_item_data, $product_id, $variation_id ) { if (isset($_POST['repair_option']) && !empty($_POST['repair_option'])) { $cart_item_data['new_price'] = (float) ($_POST['active_price'] + $_POST['repair_price']); $cart_item_data['repair_price'] = (float) $_POST['repair_price']; $cart_item_data['active_price'] = (float) $_POST['active_price']; $cart_item_data['unique_key'] = md5(microtime().rand()); } return $cart_item_data; } // Front: Set the new calculated cart item price add_action('woocommerce_before_calculate_totals', 'extra_price_add_custom_price', 20, 1); function extra_price_add_custom_price($cart) { if (is_admin() && !defined('DOING_AJAX')) return; if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 ) return; foreach($cart->get_cart() as $cart_item) { if (isset($cart_item['new_price'])) $cart_item['data']->set_price((float) $cart_item['new_price']); } } // Front: Display option in cart item add_filter('woocommerce_get_item_data', 'display_custom_item_data', 10, 2); function display_custom_item_data($cart_item_data, $cart_item) { if (isset($cart_item['repair_price'])) { $cart_item_data[] = array( 'name' => __("Repair option", "woocommerce"), 'value' => strip_tags( '+ ' . wc_price( wc_get_price_to_display( $cart_item['data'], array('price' => $cart_item['repair_price'] ) ) ) ) ); } return $cart_item_data; }

代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.

Code goes in function.php file of your active child theme (or active theme). tested and works.

基于此答案的添加: 在 Woocommerce 的订单详情中显示产品可选成本

允许将维修价格保存作为订单项元数据并在订单和电子邮件通知的任何地方显示:

// Save chosen seats to each order item as custom meta data and display order items Warrenty everywhere
add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_waranty', 10, 4 );
function save_order_item_product_waranty( $item, $cart_item_key, $values, $order ) {
    if( isset($values['repair_price']) && $values['repair_price'] > 0 ) {
        $key = __("Repair option", "woocommerce");
        $value = strip_tags( '+ '. wc_price( wc_get_price_to_display( $values['data'], array('price' => $values['repair_price']) ) ) );
        $item->update_meta_data( $key, $value );
    }
}

代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.

Code goes in function.php file of your active child theme (or active theme). tested and works.

这篇关于在单个产品页面上添加一个复选框，这会在 Woocommerce 中增加额外费用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！