Question

我正在创建一个具有多种产品类型的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>';
}

问题是这些字段会显示在所有产品类型上，如何显示Mobile的某些字段以及Tablet的其他字段。有什么办法吗？

Answer 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
}

请注意id="sim_count_select"添加到div以便轻松定位。

不是最优雅的解决方案，但它应该有效。

Answer 2

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

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

用于自定义产品类型的WooCommerce自定义字段

2 个答案: