как редактировать поля виджета woocommerce

Question

давайте предположим, что у нас есть магазин, использующий woocommerce, в котором есть 2 вида товаров: книги и игрушки. в нашем шаблоне есть виджет с именем «новые поступления», который отображает новые продукты на панели инструментов WordPress, этот виджет имеет только 1 поле настройки, которое указывает количество продуктов, которые нужно показать

private function widget_fields() {

    $fields = array(
        'section_post_count' => array(
            'wp_commerce_widgets_name'         => 'section_post_count',
            'wp_commerce_widgets_title'        => __( 'Product Count', 'wp-commerce' ),
            'wp_commerce_widgets_default'      => 10,  
            'wp_commerce_widgets_field_type'   => 'number'
        ),
    );
    return $fields;
}

Я хочу добавить другое поле, поэтому я могу выбрать из какой категории показывать товары

вот код для показа товаров

$wp_commerce_product_count  = empty( $instance['section_post_count'] ) ? 10 : $instance['section_post_count'];

    $new_arrival_args = array(
        'post_type' => 'product',
        'posts_per_page' => absint( $wp_commerce_product_count ),
        'stock' => 1,
        'orderby' =>'date',
        'order' => 'DESC' 
    );        
    $new_arrival_query = new WP_Query( $new_arrival_args );
    $total_post = $new_arrival_query->post_count;

, а затем некоторые html для показа товаров. , .

if ( $new_arrival_query->have_posts() ) {
        while ( $new_arrival_query->have_posts() ) {
            $new_arrival_query->the_post();?>
            <div class="col-md-3 col-holder">
                <div class="product">
                  <div class="card">
                    <a href="<?php esc_url(the_permalink());?>" class="img-holder">
                      <?php the_post_thumbnail( 'wp-commerce-product-thumbs-168-*-168' );?>
                  </a>
                  <div class="card-body">
                      <ul class="option">
                        <li>
                            <?php global $product;?>
                            <a href="<?php echo esc_url( $product->add_to_cart_url() );?>" class="active" title="Add to cart"><span class="fa fa-shopping-cart"></span></a>
                        </li>
                        <li>
                          <a href="<?php esc_url(the_permalink());?>" title="View"><span class="fa fa-eye"></span></a>
                      </li>
                  </ul>
                  <a href="<?php esc_url(the_permalink());?>"><h6><?php the_title();?></h6></a>
                  <?php $terms =  get_the_terms( $product->get_id(), 'product_cat' );
                  if ( $terms && ! is_wp_error( $terms ) ) {?>
                     <span class="category"><?php echo esc_html($terms[0]->name);?></span>
                 <?php }?>
                 <div class="price-tag">
                    <?php
                    global $woocommerce;
                    $currency = get_woocommerce_currency_symbol();
                    $price = get_post_meta( get_the_ID(), '_regular_price', true);
                    $sale = get_post_meta( get_the_ID(), '_sale_price', true);
                    ?>
                    <p>
                        <?php if($sale) : ?>
                            <span class="discount-tag"><?php echo esc_html($currency); echo esc_html($price); ?></span> <?php echo esc_html($currency); echo esc_html($sale); ?>

                            <?php elseif($price) : ?>
                             <span class="discount-tag"><?php echo esc_html($currency); echo esc_html($price); ?></span>  
                         <?php endif; ?>
                     </p>
                 </div>
             </div>
         </div>
     </div>
 </div>

Не могли бы вы помочь мне настроить его и добавить возможность выбора категорий?