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

Question

我正在开发一个具有 WooCommerce 功能的 WordPress 网站。

我使用以下代码为产品页面后端的产品数据框创建了 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 的对象中。

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

您可以按照以下步骤操作：

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

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

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