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

Question

我正在工作一个WordPress网站，与WooCommerce功能。

我使用以下代码为Product页面后端的Product Data框创建了2个自定义字段：

<?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' );
?>

参照woocommerce_wp_checkbox，我想创建一个函数，当选中此复选框时，它将在相关产品的页面上创建一个自定义文本框。然后，潜在客户可以使用此自定义文本框输入一段文本，他们希望将其打印到页面的产品中。

有没有人知道，为了实现上述目标，我需要输入哪些额外的代码？

Answer 1

您可以覆盖简单/变量产品的模板文件并在其中添加自定义域。只在选中复选框时保留显示/隐藏文本框的逻辑。

当添加到购物车完成时，您将在POST中获得所有已发布的数据。从那里抓取并放入Woocommerce的对象。

==================================================================编辑：

您可以执行以下步骤：

>

将woocommerce/templates/single-product/add-to-cart/variable.php这个模板复制到您的子主题并自定义它。您将在那里看到一个表单标记。在其中，您可以放入您的自定义创建的复选框（您从管理添加）。另外，添加一个自定义文本框（用户将在其中输入文本）-并隐藏它。

从functions.php添加自定义js。-在这个js中，您可以编写逻辑，如果选中了checkbox，那么您将显示文本框，否则不显示。

现在，当用户添加到购物车时，将此自定义textbox数据添加到woocommerce对象。如何向woocommerce对象输入自定义数据-您可以在这里获得详细信息：https://wisdmlabs.com/blog/add-custom-data-woocommerce-order/