What's wrong with the display order?

Question

WordPress

Why is my shortcode displayed first?!
Here's what's in the WP editor:

<div>Мягкая мебель</div><br>
[category_shop category_id=23]
<div>Корпусная мебель</div>
[smartslider3 slider=1]

Here is the output:

Shortcode code:

// Шоткод и функция для каталога
function category_shop_func( $atts ) {
    echo '<div class="category_shop">';
    
    $params = shortcode_atts( array( // в массиве укажите значения параметров по умолчанию
    'category_id' => '', // параметр 1
  ), $atts );
    
    $args = array(
        'taxonomy'   => 'product_cat',
    'number'     => $number,
    'orderby'    => $orderby,
    'order'      => $order,
    'hide_empty' => $hide_empty,
    'include'    => $ids,
        'child_of'   => $params['category_id']
    );

    $product_categories = get_terms( $args );

    $count = count($product_categories);

    if ( $count > 0 ){        
    foreach ( $product_categories as $product_category ) {
        $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
        $item = '<div class="catalog__category category-block">';
        $item .= '<a href="' . get_term_link( $product_category ) . '" class="category-block__link">Перейти</a>';
        $item .= '<img class="category-block__img" src="'. wp_get_attachment_url( $thumbnail_ids ) .'" alt="">';
        $item .= '<h3 class="category-block__title">' . $product_category->name . '</h3>';
        $item .= '</div>';
        echo $item;
        }
      }
    echo '</div>';
}
add_shortcode( 'category_shop', 'category_shop_func' );

Answer 1

And so?

function category_shop_func( $atts ) {
    $output = '<div class="category_shop">';
    
    $params = shortcode_atts( array( // в массиве укажите значения параметров по умолчанию
    'category_id' => '', // параметр 1
  ), $atts );
    
    $args = array(
        'taxonomy'   => 'product_cat',
    'number'     => $number,
    'orderby'    => $orderby,
    'order'      => $order,
    'hide_empty' => $hide_empty,
    'include'    => $ids,
        'child_of'   => $params['category_id']
    );

    $product_categories = get_terms( $args );

    $count = count($product_categories);

    if ( $count > 0 ){        
    foreach ( $product_categories as $product_category ) {
        $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
        $item = '<div class="catalog__category category-block">';
        $item .= '<a href="' . get_term_link( $product_category ) . '" class="category-block__link">Перейти</a>';
        $item .= '<img class="category-block__img" src="'. wp_get_attachment_url( $thumbnail_ids ) .'" alt="">';
        $item .= '<h3 class="category-block__title">' . $product_category->name . '</h3>';
        $item .= '</div>';
        $output .= $item;
        }
      }
    $output .= '</div>';

    return $output;
}
add_shortcode( 'category_shop', 'category_shop_func' );