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

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 个产品类别组成。只有其中一个类别中的产品允许自定义字母。目前，我必须手动将上述编码应用于每个单独的产品，因为我必须将单独的 slug 插入 if (is_single('product-slug-a')) 有没有办法可以更改 'product-slug-a' 这样我只需要在 functions.php 文件中输入一次代码，然后为产品类别之一中的每个产品调用它？

Answer 1

更新：

我重新审视了您的代码，简化了事情，删除了不必要的代码。我添加了必要的代码，使此 "Engraving field" 仅在选中复选框设置选项时才显示在单个产品页面上。

For your last question check at the end (for a product category without checkbox settings).

代码如下：

// 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 文件或任何插件文件。

已经过测试并且有效。

复选框输出并保存：

在产品设置中选中复选框选项后，您将得到类似这样的信息：

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

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 文件或任何插件文件。

已测试并有效。

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

Custom checkbox in product settings that displays a custom field when checked

php

wordpress

product

custom-fields

woocommerce