[英]How to add a radio button with price on product page? WordPress woocommerce
How can to customize the product page to include an extract fee base on the user's choice. 如何根据用户的选择自定义产品页面以包含提取费。 Something slimier to the attached photo with customize your order option on the product page not on checkout page.
通过在产品页面(而不是结帐页面)上自定义订购选项,可以使随附的照片更苗条。
I have this code which display the radio buttons and option on the checkout but for some reason the fee is not being added to the total. 我有这段代码,在结帐时显示了单选按钮和选项,但是由于某些原因,费用未添加到总计中。
// Part 1
// Display Radio Buttons
// Uses woocommerce_form_field()
add_action( 'woocommerce_before_add_to_cart_form', 'bbloomer_checkout_radio_choice' );
function bbloomer_checkout_radio_choice() {
$chosen = WC()->session->get('radio_chosen');
$chosen = empty( $chosen ) ? WC()->checkout->get_value('radio_choice') : $chosen;
$chosen = empty( $chosen ) ? 'no_option' : $chosen;
$args = array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'options' => array(
'no_option' => 'No Option',
'option_1' => 'Option 1 ($10)',
'option_2' => 'Option 2 ($30)',
),
'default' => $chosen
);
echo '<div id="checkout-radio">';
echo '<h3>Customize Your Order!</h3>';
woocommerce_form_field( 'radio_choice', $args, $chosen );
echo '</div>';
}
// Part 2
// Add Fee and Calculate Total
// Based on session's "radio_chosen"
#2 Calculate New Total
add_action( 'woocommerce_cart_calculate_fees', 'bbloomer_checkout_radio_choice_fee', 20, 1 );
function bbloomer_checkout_radio_choice_fee( $cart ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return;
$radio = WC()->session->get( 'radio_chosen' );
if ( "option_1" == $radio ) {
$fee = 10;
} elseif ( "option_2" == $radio ) {
$fee = 30;
}
$cart->add_fee( __('Option Fee', 'woocommerce'), $fee );
}
// Part 3
// Refresh Checkout if Radio Changes
// Uses jQuery
add_action( 'wp_footer', 'bbloomer_checkout_radio_choice_refresh' );
function bbloomer_checkout_radio_choice_refresh() {
if ( ! is_checkout() ) return;
?>
<script type="text/javascript">
jQuery( function($){
$('form.checkout').on('change', 'input[name=radio_choice]', function(e){
e.preventDefault();
var p = $(this).val();
$.ajax({
type: 'POST',
url: wc_checkout_params.ajax_url,
data: {
'action': 'woo_get_ajax_data',
'radio': p,
},
success: function (result) {
$('body').trigger('update_checkout');
}
});
});
});
</script>
<?php
}
// Part 4
// Add Radio Choice to Session
// Uses Ajax
add_action( 'wp_ajax_woo_get_ajax_data', 'bbloomer_checkout_radio_choice_set_session' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'bbloomer_checkout_radio_choice_set_session' );
function bbloomer_checkout_radio_choice_set_session() {
if ( isset($_POST['radio']) ){
$radio = sanitize_key( $_POST['radio'] );
WC()->session->set('radio_chosen', $radio );
echo json_encode( $radio );
}
die();
}
If I change the hook to add_action( 'woocommerce_product_options_general_product_data', 'bbloomer_checkout_radio_choice' ); 如果我将钩子更改为add_action('woocommerce_product_options_general_product_data','bbloomer_checkout_radio_choice');
The option buttons shows up on the check out page and it work fine, I assume some how I need to pass the option value from product page to the check out page 选项按钮显示在签出页面上,并且工作正常,我假设需要一些方法将选项值从产品页面传递到签出页面
Add to follows code snippets to achieve your work - 添加以下代码片段以实现您的工作-
function add_custom_fees_before_add_to_cart() {
global $product;
$args = array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'options' => array(
'' => 'No Option',
'10' => 'Option 1 ($10)',
'30' => 'Option 2 ($30)',
),
'default' => ''
);
?>
<div class="custom-fees-wrap">
<label for="iconic-engraving"><?php _e( 'Customize Your Order!', 'textdomain' ); ?></label>
<?php woocommerce_form_field( 'custom_fees', $args, '' ); ?>
</div>
<?php
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_fees_before_add_to_cart', 99 );
function save_value_add_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
$custom_fees = filter_input( INPUT_POST, 'custom_fees' );
if ( empty( $custom_fees ) ) {
return $cart_item_data;
}
$cart_item_data['custom_fees'] = $custom_fees;
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'save_value_add_cart_item_data', 99, 3 );
function calculate_add_cart_fee() {
global $woocommerce;
$cart_items = $woocommerce->cart->get_cart();
foreach( $cart_items as $key => $item ) {
if( !isset( $item['custom_fees'] ) && empty( $item['custom_fees'] ) ) continue;
$woocommerce->cart->add_fee( __('Custom fees', 'textdomain'), $item['custom_fees'] );
}
}
add_action( 'woocommerce_cart_calculate_fees', 'calculate_add_cart_fee', 99 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.