产品设置中的自定义复选框，选中时显示自定义字段

Question

我目前正在使用 WooCommerce 开发 WordPress 电子商务网站。

我在产品编辑页面常规设置中创建了一个自定义复选框。

我还有一个代码片段，用于在单个产品页面中显示自定义文本字段。

现在，我希望当为产品选中此自定义复选框（在其设置中）时，在单个产品页面中显示此自定义文本字段。

到目前为止我的编码：

为了在 WooCommerce 产品仪表板中创建复选框，我在文件中输入了以下代码functions.php：

<?php
// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');


function woocommerce_product_custom_fields(){
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Checkbox Field
    woocommerce_wp_checkbox(
        array(
            'id'          => '_custom_product_checkbox_field',
            'placeholder' => 'Custom Product Checkbox Field',
            'label'       => __('Custom Product Checkbox Field', 'woocommerce'),
            'desc_tip'    => 'true'
        )
    );
echo '</div>';

}

// Saving Values
function woocommerce_product_custom_fields_save($post_id){
    // Custom Product Text Field
    $woocommerce_custom_product_checkbox_field = $_POST['_custom_product_checkbox_field'];
    if (!empty($woocommerce_custom_product_checkbox_field ))
        update_post_meta($post_id, '_custom_product_checkbox_field', esc_attr($woocommerce_custom_product_checkbox_field ));
}
?>

我在文件中放置的functions.php用于输出相关自定义文本框的编码如下：

function add_engrave_text_field() {
    if (is_single('product-url-a')) {
        echo 'Enter your chosen letters:  <span id="character_count"></span>
        <div><table class="variations" cellspacing="0">
            <tbody>
                <tr>
                    <td class="value"><label class="product-custom-text-label" for="custom_text">Custom Text</label></td>
                    <td class="value">
                        <label><input type="text" class="product-counter" name="engrave_text" placeholder="Enter Your Custom Letters ..." maxlength="3" /></label>                        
                    </td>
                </tr>                             
            </tbody>
        </table></div>';
    }
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field', 0 ); 

我的下一步是什么，以便仅在选择复选框时才输出自定义文本框编码？

我意识到我可以将自定义文本框的代码放入 中content-single-product，但理想情况下我不想这样做，因为它是计算自定义刻字等定价的一大组编码的一部分。

附加问题：

该网站由 5 个产品类别组成。只有这些类别之一的产品才允许自定义刻字。目前，我必须手动将上述编码应用于每个单独的产品，因为我必须将单独的块插入到有if (is_single('product-slug-a')) 没有办法可以更改“product-slug-a”，以便我只需输入代码一旦进入functions.php文件，就会为某个产品类别中的每个产品调用它？

Answer 1

更新：

我重新审视了你的代码，简化了事情，删除了不必要的代码。我添加了必要的代码，以使此“雕刻字段”仅在选中复选框设置选项时才显示在单个产品页面上。

对于最后一个问题，请检查末尾（对于没有复选框设置的产品类别）。

这是代码：

// Display Fields
add_action('woocommerce_product_options_general_product_data', 'product_custom_fields_add');
function product_custom_fields_add(){
    global $post;

    echo '<div class="product_custom_field">';

    // Custom Product Checkbox Field
    woocommerce_wp_checkbox( array(
        'id'        => '_engrave_text_option',
        'desc'      => __('set custom Engrave text field', 'woocommerce'),
        'label'     => __('Display custom Engrave text field', 'woocommerce'),
        'desc_tip'  => 'true'
    ));

    echo '</div>';
}

// Save Fields
add_action('woocommerce_process_product_meta', 'product_custom_fields_save');
function product_custom_fields_save($post_id){
    // Custom Product Text Field
    $engrave_text_option = isset( $_POST['_engrave_text_option'] ) ? 'yes' : 'no';
        update_post_meta($post_id, '_engrave_text_option', esc_attr( $engrave_text_option ));
}

add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field', 0 );
function add_engrave_text_field() {
    global $post;

    // If is single product page and have the "engrave text option" enabled we display the field
    if ( is_product() && get_post_meta( $post->ID, '_engrave_text_option', true ) == 'yes' ) {

        ?>
        <div>
            <label class="product-custom-text-label" for="engrave_text"><?php _e( 'Engraving option:', 'woocommerce'); ?><br>
                <input style="min-width:220px" type="text" class="product-counter" name="engrave_text" placeholder="<?php _e( 'Enter Your Custom Letters ...', 'woocommerce'); ?>" maxlength="3" />
            </label>
        </div><br>
        <?php
    }
}

代码位于活动子主题（或主题）的 function.php 文件中或任何插件文件中。

经过测试并有效。

复选框输出和保存：以编程方式添加数据选项选项卡到管理产品页面 Metabox

在产品设置中选中复选框选项后，您将看到类似以下内容：

使其适用于产品类别或产品标签（没有设置复选框）：

add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field', 0 );
function add_engrave_text_field() {
    global $post;

    // HERE set the term Ids, slug or name (or an array of values)
    $categories = array( 'clothing', 'music' );

    $taxonomy = 'product_cat'; // (For product tags use 'product_tag' instead)

    // If is single product page and have the "engrave text option" enabled we display the field
    if ( is_product() && has_term( $categories, 'product_cat', $post->ID ) ) {

        ?>
        <div>
            <label class="product-custom-text-label" for="engrave_text"><?php _e( 'Engraving option:', 'woocommerce'); ?><br>
                <input style="min-width:220px" type="text" class="product-counter" name="engrave_text" placeholder="<?php _e( 'Enter Your Custom Letters ...', 'woocommerce'); ?>" maxlength="3" />
            </label>
        </div><br>
        <?php
    }
}

代码位于活动子主题（或主题）的 function.php 文件中或任何插件文件中。

经过测试并有效。