Hướng dẫn cách thêm một Section mới trong WooCommerce Settings

Chức năng này được sử dụng khi bạn cần tùy chỉnh và mở rộng phần cài đặt của WooCommerce bằng cách thêm các trường mới vào WooCommerce Settings. Điều này đặc biệt hữu ích khi bạn phát triển một plugin hoặc cần bổ sung các tùy chọn cấu hình mà WooCommerce mặc định không có.

1. Thêm section mới vào WooCommerce Settings

add_filter( 'woocommerce_get_sections_products' , 'wpshare247_cdau_price_add_settings_tab' );
function wpshare247_cdau_price_add_settings_tab( $settings_tab ){
     $settings_tab['cdau_price'] = __( 'Giá loại con dấu' );
     return $settings_tab;
}

2. Thêm nội dung cho section vừa tạo

add_filter( 'woocommerce_get_settings_products' , 'wpshare247_cdau_price_get_settings' , 10, 2 );
function wpshare247_cdau_price_get_settings( $settings, $current_section ) {
    if( 'cdau_price' == $current_section ) {
        $settings = array();

        // Tiêu đề của section
        $settings[] = array(
            'name' => __( 'Tùy chỉnh giá cho loại con dấu', 'woocommerce' ),
            'type' => 'title',
            'desc' => 'Nhập giá ví dụ: 250000',
            'id'   => 'cdau_price_section_title'
        );

        // Trường tabs
        $settings[] = array(
            'name'     => __( 'Giá loại A1', 'woocommerce' ),
            'id'       => 'cdau_price_a1',
            'type'     => 'text',
            'desc'     => __( 'Hiển thị khi khách hàng chọn loại A1', 'woocommerce' ),
            'default'  => '',
            'desc_tip' => true,
        );

        $settings[] = array(
            'name'     => __( 'Giá loại A2', 'woocommerce' ),
            'id'       => 'cdau_price_a2',
            'type'     => 'text',
            'desc'     => __( 'Hiển thị khi khách hàng chọn loại A2', 'woocommerce' ),
            'default'  => '',
            'desc_tip' => true,
        );

        $settings[] = array(
            'name'     => __( 'Giá loại A3', 'woocommerce' ),
            'id'       => 'cdau_price_a3',
            'type'     => 'text',
            'desc'     => __( 'Hiển thị khi khách hàng chọn loại A3', 'woocommerce' ),
            'default'  => '',
            'desc_tip' => true,
        );

        // Trường checkbox
        $settings[] = array(
            'name'    => __( 'Ngưng kích hoạt', 'woocommerce' ),
            'id'      => 'cdau_price_enable_feature',
            'type'    => 'checkbox',
            'desc'    => __( 'Ngưng kích hoạt tính năng này.', 'woocommerce' ),
            'default' => 'no',
        );

        // Kết thúc section
        $settings[] = array( 'type' => 'sectionend', 'id' => 'cdau_price_section_title' );

        return $settings;
    } else {
        return $settings;
    }
}

Ok tốt rồi, vậy bạn sẽ thắc mắc nếu trường loại select chọn thì khai báo như thế nào hoặc nếu cần chọn đúng sai true – false field đó ra sao, vậy thì bạn có thể xem

Danh sách các loại trường (type) trong WooCommerce Settings:

Ví dụ cụ thể, nhớ là sao chép và thêm vào mục 2 ở trên.

1. text – Trường nhập văn bản

array(
    'name'    => __( 'Custom Text', 'woocommerce' ),
    'id'      => 'custom_text_field',
    'type'    => 'text',
    'default' => 'Nhập giá trị của bạn',
    'desc'    => 'Nhập văn bản tùy chỉnh.'
),

2. textarea – Trường nhập văn bản dài

array(
    'name'    => __( 'Custom Description', 'woocommerce' ),
    'id'      => 'custom_textarea_field',
    'type'    => 'textarea',
    'desc'    => 'Nhập mô tả dài hơn tại đây.',
    'default' => '',
),

3. checkbox – Ô kiểm bật/tắt

array(
    'name'    => __( 'Enable Feature', 'woocommerce' ),
    'id'      => 'custom_enable_feature',
    'type'    => 'checkbox',
    'desc'    => 'Kích hoạt tính năng này?',
    'default' => 'no',
),

4. select – Dropdown menu (chọn 1 giá trị)

array(
    'name'    => __( 'Chọn một tùy chọn', 'woocommerce' ),
    'id'      => 'custom_select_option',
    'type'    => 'select',
    'options' => array(
        'option1' => 'Lựa chọn 1',
        'option2' => 'Lựa chọn 2',
        'option3' => 'Lựa chọn 3',
    ),
    'default' => 'option1',
),

5. multiselect – Dropdown chọn nhiều giá trị

array(
    'name'    => __( 'Chọn nhiều giá trị', 'woocommerce' ),
    'id'      => 'custom_multiselect',
    'type'    => 'multiselect',
    'options' => array(
        'opt1' => 'Tùy chọn 1',
        'opt2' => 'Tùy chọn 2',
        'opt3' => 'Tùy chọn 3',
    ),
    'default' => array( 'opt1', 'opt3' ),
),

6. radio – Nút chọn (radio button)

array(
    'name'    => __( 'Chọn một tùy chọn', 'woocommerce' ),
    'id'      => 'custom_radio_option',
    'type'    => 'radio',
    'options' => array(
        'yes' => 'Có',
        'no'  => 'Không',
    ),
    'default' => 'yes',
),

7. number – Trường nhập số

array(
    'name'    => __( 'Nhập số lượng', 'woocommerce' ),
    'id'      => 'custom_number_field',
    'type'    => 'number',
    'default' => 10,
    'desc'    => 'Nhập số lượng sản phẩm.',
),

8. password – Trường nhập mật khẩu

array(
    'name'    => __( 'API Key', 'woocommerce' ),
    'id'      => 'custom_api_key',
    'type'    => 'password',
    'default' => '',
    'desc'    => 'Nhập API Key của bạn.',
),

9. email – Trường nhập email

array(
    'name'    => __( 'Admin Email', 'woocommerce' ),
    'id'      => 'custom_admin_email',
    'type'    => 'email',
    'default' => 'admin@example.com',
    'desc'    => 'Nhập địa chỉ email quản trị.',
),

10. color – Chọn màu

array(
    'name'    => __( 'Chọn ngày', 'woocommerce' ),
    'id'      => 'custom_date_field',
    'type'    => 'date',
    'default' => '',
),

11. date – Chọn ngày

array(
    'name'    => __( 'Chiều rộng ảnh', 'woocommerce' ),
    'id'      => 'custom_image_width',
    'type'    => 'image_width',
    'default' => array( 'width' => '300', 'height' => '', 'unit' => 'px' ),
),

12. image_width – Chọn kích thước ảnh

array(
    'name'    => __( 'Chọn trang đích', 'woocommerce' ),
    'id'      => 'custom_single_select_page',
    'type'    => 'single_select_page',
    'default' => '',
    'desc'    => 'Chọn một trang từ danh sách các trang trên website.',
),

13. single_select_page – Chọn một trang từ WordPress Pages

array(
    'name'    => __( 'Chọn quốc gia', 'woocommerce' ),
    'id'      => 'custom_country_select',
    'type'    => 'single_select_country',
    'default' => 'VN',
),

14. single_select_country – Chọn một quốc gia

array(
    'name'    => __( 'Chọn nhiều quốc gia', 'woocommerce' ),
    'id'      => 'custom_multiselect_countries',
    'type'    => 'multi_select_countries',
    'default' => array( 'US', 'VN' ),
),

15. multi_select_countries – Chọn nhiều quốc gia

array(
    'name'    => __( 'API Key', 'woocommerce' ),
    'id'      => 'custom_api_key_field',
    'type'    => 'api_key',
    'default' => '',
),

3. Lấy giá trị từ WooCommerce Settings

$cdau_price_a1 = get_option( 'cdau_price_a1' );
$cdau_price_a2 = get_option( 'cdau_price_a2' );
$cdau_price_a3 = get_option( 'cdau_price_a3' );
$cdau_price_enable_feature = get_option( 'cdau_price_enable_feature' );

if ( $cdau_price_enable_feature == 'yes' ) {
    echo 'Tính năng đã tạm ngưng';
}

Chú ý chỉ cần dùng hàm get_option( 'id_cua_field' )là chúng ta có thể lấy được giá trị của trường đó rồi.

👉 Chức năng này rất quan trọng khi bạn muốn thêm tùy chỉnh cho WooCommerce, đặc biệt là khi phát triển plugin hoặc mở rộng tính năng mặc định. Bạn có thể dùng nó để lưu cấu hình liên quan đến sản phẩm, vận chuyển, thanh toán, giảm giá, v.v.