自定义产品类型的 WooCommerce 自定义字段答案

【问题标题】：WooCommerce Custom fields for custom Product Type自定义产品类型的 WooCommerce 自定义字段
【发布时间】：2015-07-04 01:43:30
【问题描述】：

我正在创建一个具有多种产品类型的 woocommerce 主题：手机、平板电脑、相机……

我创建了这样的产品类型：

add_filter( 'product_type_selector', 'add_mobile_product_type' );
function add_mobile_product_type( $types ){
    $types[ 'mobile' ] = __( 'Mobile' );
    $types[ 'tablet' ] = __( 'Tablet' );
    return $types;
}
add_action( 'plugins_loaded', 'create_mobile_product_type' );
function create_mobile_product_type(){
    class WC_Product_Mobile extends WC_Product{
        public function __construct( $product ) {
            $this->product_type = 'mobile';
            parent::__construct( $product );
        }
    }
    class WC_Product_Tablet extends WC_Product{
        public function __construct( $product ) {
            $this->product_type = 'tablet';
            parent::__construct( $product );
        }
    }
}

我创建了一些额外的字段，如下所示：

add_action( 'woocommerce_product_options_general_product_data', 'mobile_custom_fields' );
function mobile_custom_fields() {
    global $woocommerce, $post;

    $prefix = 'mobile_';

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

    woocommerce_wp_select(
        array(
            'id'          => $prefix . 'sim',
            'label'       => __( 'Sim Count', 'faitell' ),
            'options' => array(
                '1'   => __( '1 Sim', 'faitell' ),
                '2'   => __( '2 Sim', 'faitell' ),
                '3' => __( '3 Sim', 'faitell' )
            )
        )
    );

    echo '</div>';
}

问题是这个字段将显示在所有产品类型上，如何为移动设备显示一些字段，而为平板电脑显示其他一些字段。有什么办法吗？

【问题讨论】：

标签： php wordpress woocommerce custom-fields

【解决方案1】：

我在 PHP 中找不到简单的方法，所以我想在需要时添加一些 Javascript 来隐藏该字段。

因此您的mobile_custom_fields 函数变为：

function mobile_custom_fields() {
    global $woocommerce, $post;

    $prefix = 'mobile_';

    echo '<div class="options_group" id="sim_count_select">';

    woocommerce_wp_select(
        array(
            'id'      => $prefix . 'sim',
            'label'   => __( 'Sim Count', 'faitell' ),
            'options' => array(
                '1'   => __( '1 Sim', 'faitell' ),
                '2'   => __( '2 Sim', 'faitell' ),
                '3' => __( '3 Sim', 'faitell' )
            )
        )
    );

    echo '</div>';
    ?>

    <script>
    jQuery(document).ready(function($){
        $('#product-type').change(function() {
            // check if it's selected a mobile or tablet product type
            var is_mobile = $.inArray( $(this).val(), ['mobile', 'tablet'] ) > -1;
            // toggle div visibility based on previous information
            $('#sim_count_select').toggle( is_mobile );
        }).trigger('change');
    });
    </script>

    <?php
}

请注意添加到您的div 的id="sim_count_select" 以便于定位。

不是最优雅的解决方案，但应该可以。

【讨论】：

【解决方案2】：

<div class="options_group">...</div>

在上面的容器中将show_if_{$product_type} 类与options_group 类一起添加。例如，仅在mobile 产品类型中显示元框添加show_if_mobile。

【讨论】：