Hướng dẫn cách custom Thêm Tùy Chọn giá cho Sản Phẩm WooCommerce

Plugin WooCommerce cho phép chúng ta dễ dàng thêm các tùy chọn giá cho bất kì sản phẩm nào như hình. Còn cách thực hiện như thế nào, bạn xem chi tiết đoạn code phần dưới nhé.

Sau khi Add to cart thành công, chi tiết giá mới sản phẩm sẽ thể hiện như hình bên dưới. Bạn hoàn toàn có thể custom css theo ý mình cho đẹp và bắt mắt hơn.

1. Một số Hook WooCommerce dùng trong chức năng này

• Action woocommerce_before_add_to_cart_button : Thêm một hoặc nhiều field mới vào trong Form add to cart của chi tiết sản phẩm
• Filter woocommerce_add_cart_item_data : Request – tính lại giá từng item giỏ hàng (cart item)
• Action woocommerce_before_calculate_totals : Tính lại giá mới cho cart item
• Filter woocommerce_cart_item_price : Hiển thị giá custom cart item trong trang giỏ hàng

Còn cụ thể Hook WooCommerce nói riêng hay WordPress nói chung là gì? Tôi sẽ giải thích chi tiết cho các bạn ở những bài viết tiếp theo.

2. Đoạn code thêm tùy chọn giá cho Sản Phẩm ( Custom Price Options)

Sao chép đoạn code sau và nhúng vào file functions.php trong theme WordPress bạn đang dùng.

// Bước 1: Thêm một hoặc nhiều fied mới vào trong Form add to cart của chi tiết sản phẩm
add_action( 'woocommerce_before_add_to_cart_button', 'wpshare247_product_price_field', 5 );
function wpshare247_product_price_field(){
    ?>
    <div class="wpshare247-custom-product-field">
        <div>Giá thêm 1:</div>
        <input type="text" name="wpshare247-field-custom-price-1" value="250">
        <div>Giá thêm 2:</div>
        <input type="text" name="wpshare247-field-custom-price-2" value="310">
    </div>
    <?php
}

// Bước 2: Request - tính lại giá từng item giỏ hàng (cart item)
add_filter('woocommerce_add_cart_item_data', 'wpshare247_add_custom_field_data', 20, 2 );
function wpshare247_add_custom_field_data( $cart_item_data, $product_id ){
    $custom_price = 0;
    if(isset($_POST['wpshare247-field-custom-price-1'])){
        $custom_price_1 = (float) sanitize_text_field( $_POST['wpshare247-field-custom-price-1'] );
        $custom_price += $custom_price_1;
    }

    if(isset($_POST['wpshare247-field-custom-price-2'])){
        $custom_price_2 = (float) sanitize_text_field( $_POST['wpshare247-field-custom-price-2'] );
        $custom_price += $custom_price_2;
    }

    if( !$custom_price ) return $cart_item_data;


    $text_custom_price = '<ul>';
    if($custom_price_1){
        $text_custom_price .= '<li>- Giá thêm 1: +'.wc_price($custom_price_1).'</li>';
    }
    if($custom_price_2){
        $text_custom_price .= '<li>- Giá thêm 2: +'.wc_price($custom_price_2).'</li>';
    }
    $text_custom_price .= '</ul>';

    //--------------
    $product    = wc_get_product($product_id); 

    if($product->is_type( 'simple' )){
        $base_price = (float) $product->get_price(); // Product reg price
    }else{
         $available_variations = $product->get_available_variations(); 
         $arr_key = array_keys($available_variations[0]['attributes']);
         $var_key = $arr_key[0];
         $var_key_choose = $_POST[ $var_key ];
         
         if( $available_variations ){
             foreach($available_variations as $varit){
                $arr_val =  array_values($varit['attributes']);
                $val = $arr_val[0];
                if($val == $var_key_choose){
                    $base_price = $varit['display_price'];
                }
            }
         }
    }

    // Tính lại giá mới
    $new_price = $base_price + $custom_price;

    // Set the custom amount in cart object
    $cart_item_data['wpshare247_custom_data']['base_price'] = (float) $base_price; 
    $cart_item_data['wpshare247_custom_data']['extra_charge'] = (float) $custom_price; 
    $cart_item_data['wpshare247_custom_data']['new_price'] = (float) $new_price;
    $cart_item_data['wpshare247_custom_data']['text_custom_price'] = $text_custom_price;
    $cart_item_data['wpshare247_custom_data']['unique_key'] = md5( microtime() . rand() ); // Make each item unique

    return $cart_item_data;
}

// Bước 3: Tính lại giá mới cho cart item
add_action( 'woocommerce_before_calculate_totals', 'wpshare247_price_add_custom_price', 20, 1 );
function wpshare247_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['wpshare247_custom_data']['new_price']) )
            $cart_item['data']->set_price( (float) $cart_item['wpshare247_custom_data']['new_price'] );
    }
}

// Bước 4: Hiển thị giá custom cart item trong trang giỏ hàng
add_filter('woocommerce_cart_item_price', 'wpshare247_display_cart_items_custom_price_details', 20, 3 );
function wpshare247_display_cart_items_custom_price_details( $product_price, $cart_item, $cart_item_key ){
    $text_custom_price = $cart_item['wpshare247_custom_data']['text_custom_price'];
    if( isset($cart_item['wpshare247_custom_data']['extra_charge']) ) {
        $product = $cart_item['data'];

        $product_price  = wc_price( $cart_item['wpshare247_custom_data']['base_price'] );


        $product_price .= '<div class="wpshare247-custom-item-container" style="border: 1px solid #f00;padding: 5px;margin-top: 2px;">';
            $product_price .= '<div>Phí custom sản phẩm</div>';

            if($text_custom_price)
            $product_price .= '<div class="text_custom_price">'.$text_custom_price.'</div>';

        	$product_price .= 
    		'<div class="wpshare247-charge">+' . wc_price( $cart_item['wpshare247_custom_data']['extra_charge'] ).'</div>';
    	$product_price .= '</div>';
    }
    return $product_price;
}