产品设置中的自定义复选框,用于在选中时显示自定义字段

时间:2017-11-23 21:13:43

标签: php wordpress woocommerce product custom-fields

我目前正在使用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个产品类别组成。只有其中一个类别中的产品允许自定义刻字。目前,我不得不手动将上述编码应用于每个单独的产品,因为我必须将单个slu into插入if (is_single('product-slug-a'))我是否有办法改变产品-sgg-a&#39 ;所以我只需要在functions.php文件中输入一次代码,只为其中一个产品类别中的每个产品调用它?

1 个答案:

答案 0 :(得分:2)

<强>更新

我重新审视了一下代码,简化了一些事情,删除了不必要的代码。我已经添加了必要的代码来制作这个&#34;雕刻领域&#34;仅在选中复选框设置选项时才显示在单个产品页面上。

  

最后一个问题请查看(对于没有复选框设置的产品类别)

以下是代码:

// 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

当在产品设置中选中复选框选项时,您将得到类似的内容:

enter image description here

使其适用于产品类别或产品标签的 没有设置复选框):

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文件中,或者放在任何插件文件中。

经过测试和工作。