【问题标题】:Custom checkbox in product settings that displays a custom field when checked产品设置中的自定义复选框,选中时显示自定义字段
【发布时间】:2018-05-07 21:09:51
【问题描述】:

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

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

我还有一个代码 sn-p,它在单个产品页面中显示自定义文本字段。

现在我想在为产品(在其设置中)选中此自定义复选框时,在单个产品页面中显示此自定义文本字段。

我目前的编码:

要在 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 文件中输入一次代码,然后它会为仅一个产品类别中的每个产品调用?

【问题讨论】:

    标签: php wordpress woocommerce product custom-fields


    【解决方案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 文件或任何插件文件中。

    经过测试并且有效。

    复选框输出并保存:Adding programatically data option tab to admin product pages 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 文件或任何插件文件中。

    经过测试并且有效。

    【讨论】:

    • 太棒了。谢谢你的详细回答。该代码确实有效。然而,一个小问题是 WooCommerce 中的“雕刻”一词是否存在某种默认值?每当我用“自定义”替换“雕刻”的所有引用时,自定义文本框都会从产品页面中消失。
    • 感谢您更新代码。不知道为什么,但这似乎破坏了网站。看看我能不能弄明白。
    • 对不起,如果我忽略了一些简单的事情。为了确保我没有输入任何拼写错误,我只是将代码复制并粘贴到 functions.php 文件中,它会产生一个白屏。
    • @Craig 我已经删除了错误,更新了所有内容并优化了代码……对不起,我昨天累了。现在为什么要使用复选框,因为您可以为此使用 woocommerce 产品类别或产品标签……所以要启用产品的自定义字段,您只需要启用相关的产品类别或标签? => 就像在最后一个 sn-p 代码中一样
    • 希望你睡得很好。谢谢你的代码。我设法让代码正常工作。根据stackoverflow.com/questions/47487995/…,在使用woocommerce_wp_text_input 时,我只是在保存空值时遇到了最后一个问题,但这是另一个问题。你很有帮助:-)
    猜你喜欢
    • 2018-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-21
    • 2017-12-30
    • 2018-03-04
    • 1970-01-01
    相关资源
    最近更新 更多