WooCommerce Custom fields for custom Product Type

1 Views

i’m creating a woocommerce theme that have multiple product type: Mobile, Tablet, Camera,…

I created products types like this:

Read More
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 );
        }
    }
}

and i created some extra fields like this: 

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>';
}

The problem is this fields will shown on all product types, how about show some fields for Mobile and some others for Tablet. is there any way?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. I couldn’t find an easy way to do it in PHP, so I thought to add some Javascript to hide the field when needed.

    Therefore your mobile_custom_fields function became:

    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
}

    Note the id="sim_count_select" added to your div for easy targeting.

    Not the most elegant solution, but it should work.

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

    add show_if_{$product_type} class alongside the options_group class in the container above. For example, meta box to be showed only in mobile product type add show_if_mobile.