WooCommerce为变体产品增添额外领域

时间:2017-08-15 作者:Vucko

我在跟踪this tutorial 关于如何在变体产品中添加额外字段。

我只需要添加一个额外的文本字段。管理部分工作正常-但是,该字段正在显示和保存/更新,the single product page doesn\'t - the field won\'t show.

所以在我的functions.php 我补充道:

add_action( \'woocommerce_product_after_variable_attributes\', \'variation_settings_fields\', 10, 3 );

add_action( \'woocommerce_save_product_variation\', \'save_variation_settings_fields\', 10, 2 );

function variation_settings_fields( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( 
        array( 
            \'id\'          => \'_text_field[\' . $variation->ID . \']\', 
            \'label\'       => __( \'Some label\', \'woocommerce\' ), 
            \'placeholder\' => \'\',
            \'desc_tip\'    => \'true\',
            \'description\' => __( \'Some description.\', \'woocommerce\' ),
            \'value\'       => get_post_meta( $variation->ID, \'_text_field\', true )
        )
    );
}

function save_variation_settings_fields( $post_id ) {
    $text_field = $_POST[\'_text_field\'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, \'_text_field\', esc_attr( $text_field );
    }
}

add_filter( \'woocommerce_available_variation\', \'load_variation_settings_fields\' );

function load_variation_settings_fields( $variations ) {

    $variations[\'text_field\'] = get_post_meta( $variations[ \'variation_id\' ], \'_text_field\', true );

    return $variations;
}
并且在plugins/plugins/woocommerce/templates/single-product/add-to-cart/variation.php 我添加了(主题没有自己的variation.php):

<div class="woocommerce-variation-custom-text-field">
    {{{ data.variation.text_field }}}
</div>
如何在单个产品页面上显示自定义字段?

谢谢

Update: 如果检查单个产品页面,则会显示脚本:

<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">
        {{{ data.variation.variation_description }}}
    </div>

    <div class="woocommerce-variation-price">
        {{{ data.variation.price_html }}}
    </div>

   <div class="woocommerce-variation-custom-text-field">
        {{{ data.variation.text_field }}}
    </div>

    <div class="woocommerce-variation-availability">
        {{{ data.variation.availability_html }}}
    </div>
</script>
主题是belise.

Update: 我在看定制woocommerce的主题functions.php (belise/inc/woocommerce/functions.php)文件,逻辑似乎就在那里。

/**
 * Shop page woocommerce-Price-amount amountption on product archives
 */
function belise_woocommerce_template_single_excerpt() {
    global $post;

    if ( ! $post->post_excerpt ) {
        return;
    }
    ?>
    <div class="woocommerce-Price-amount amountption" itemprop="woocommerce-Price-amount amountption">

        <!-- if I add <p>test</p> it is printed on the product page -->
        <!-- I would like for the custom field element to be printed here -->

        <?php echo apply_filters( \'woocommerce_short_woocommerce-Price-amount amountption\', $post->post_excerpt ); ?>
    </div><?php
}
Answer - @ClemC第一个解决方案有效,由于浏览器缓存,该字段未显示。

1 个回复
最合适的回答,由SO网友:ClemC 整理而成

对于serious 参考,请参见WC本身如何添加文本区域variable_description 对于变体here.

我们注意到文本字段实现中存在多个(潜在)问题。

missing name...

  • id 字符串执行not 有一个正确的结构,它有name 而不是结构
  • idnamenot 与模板中的相同variable_description textarea实现,让我们这样实现文本字段:

    add_action( \'woocommerce_product_after_variable_attributes\', \'variation_settings_fields\', 10, 3 );
    add_action( \'woocommerce_save_product_variation\', \'save_variation_settings_fields\', 10, 2 );
    add_filter( \'woocommerce_available_variation\', \'load_variation_settings_fields\' );
    
    function variation_settings_fields( $loop, $variation_data, $variation ) {
        woocommerce_wp_text_input(
            array(
                \'id\'            => "my_text_field{$loop}",
                \'name\'          => "my_text_field[{$loop}]",
                \'value\'         => get_post_meta( $variation->ID, \'my_text_field\', true ),
                \'label\'         => __( \'Some label\', \'woocommerce\' ),
                \'desc_tip\'      => true,
                \'description\'   => __( \'Some description.\', \'woocommerce\' ),
                \'wrapper_class\' => \'form-row form-row-full\',
            )
        );
    }
    
    function save_variation_settings_fields( $variation_id, $loop ) {
        $text_field = $_POST[\'my_text_field\'][ $loop ];
    
        if ( ! empty( $text_field ) ) {
            update_post_meta( $variation_id, \'my_text_field\', esc_attr( $text_field ));
        }
    }
    
    function load_variation_settings_fields( $variation ) {     
        $variation[\'my_text_field\'] = get_post_meta( $variation[ \'variation_id\' ], \'my_text_field\', true );
    
        return $variation;
    }
    
    现在,在模板中must have 以下路径:

    yourtheme/woocommerce/single-product/add-to-‌​cart/variation.php

    添加以下内容:

    <div class="random-class woocommerce-variation-custom-text-field">
        {{{ data.variation.my_text_field }}}
    </div>
    
    <小时>EDIT:

    如果要以“经典”方式输出自定义字段:

    <div class="woocommerce-variation-custom-text-field">
        <p><?php echo esc_html( get_post_meta( $post->ID, \'my_text_field\', true ) ); ?></p>
    </div>
    

  • 结束

    相关推荐