如何在WooCommerce产品页面上创建自定义文本框？

Question

I am working on a WordPress website, with WooCommerce functionality.

I have created 2 Custom Fields, for the Product Data box within the backend of the Product Page, using the following Code:

<?php
function theme_name_woocommerce_custom_fields() {
    // Price Per Character
    woocommerce_wp_text_input( 
        array(
            'id'          => '_character_price',
            'label'       => 'Price Per Character',
            'description' => 'This is the amount a customer pays per letter entered.',
            'desc_tip'    => 'true',
            'placeholder' => 'Enter Amount per Letter (Exclude the £)'
        ) 
    );
    // Custom Text Box
    woocommerce_wp_checkbox(
        array(
            'id'          => '_custom_text_box',
            'label'       => 'Show Custom Text Box',
            'description' => 'Select this box, if you would like a Custom Text Box to appear on the Product's page.',
            'desc_tip'    => 'true',
        ) 
    );
}
add_action( 'woocommerce_product_options_general_product_data', 'theme_name_woocommerce_custom_fields' );

function save_theme_name_woocommerce_custom_field( $post_id ) {
    if ( ! empty( $_POST['_custom_text_field'] ) ) {
        update_post_meta( $post_id, '_custom_text_field', esc_attr( $_POST['_custom_text_field'] ) );
    }
}
add_action( 'woocommerce_process_product_meta', 'save_theme_name_woocommerce_custom_fields' );
?>

In reference to the woocommerce_wp_checkbox , I would like to create a function whereby when this checkbox is selected, it creates a Custom Text Box on the associated Product's page. This Custom Text Box can then be used by a potential customer to enter a piece of text, which they would like to have printed to the page's Product.

Is anyone aware of what additional piece of coding I would need to enter, in order to achieve said goal?

Answer 1

You can override simple/variable product's template file and add custom field there. Keep logic of show/hide textbox when checkbox is checked there only.

When add to cart is done, you will get all posted data in POST. Grab it from there and put into woocommerce' object.

======================================================= Edited:

You can follow this steps:

1. Copy woocommerce/templates/single-product/add-to-cart/variable.php this template to your child theme and customize it. You will see a form tag there. In that you can put your custom created checkbox(which you added from admin). Also, add a custom textbox(in which user will enter text) - and hide it.

2. Add custom js from functions.php. - In this js you can write logic that if checkbox is checked then you will show the textbox, else not.

3. Now, when user does add to cart, add this custom textbox data to woocommerce object. How to enter custom data to woocommerce object - you can have step by step details here: https://wisdmlabs.com/blog/add-custom-data-woocommerce-order/