Horizontal Filter Location

Hi.

I’m using this plugin as horizontal layout along with the flatsome theme without any customization. If I add the shortcode for each Category in Before content section as shown in below screenshot, the filter will display very next to the menu (see second screenshot).
First screenshot: https://ibb.co/euF5WQ .
second screenshot: https://ibb.co/jw6CBQ .

This is their product loop in category template:

<div class="col middle-8">
		<?php	
			/**
			 * woocommerce_before_main_content hook
			 *
			 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
			 * @hooked woocommerce_breadcrumb - 20
			 */		
			do_action( 'woocommerce_before_main_content' );
		?>
			<?php do_action( 'woocommerce_archive_description' ); ?>
		<?php if ( have_posts() ) : ?>

			<?php
				do_action( 'woocommerce_before_shop_loop' );
			?>

			<?php woocommerce_product_loop_start(); ?>
				<?php woocommerce_product_subcategories(); ?>
				<?php while ( have_posts() ) : the_post(); ?>
				<?php wc_get_template_part( 'content', 'product' ); ?>
				<?php endwhile; // end of the loop. ?>
			<?php woocommerce_product_loop_end(); ?>
			<?php
				/**
				 * woocommerce_after_shop_loop hook
				 *
				 * @hooked woocommerce_pagination - 10
				 */
				do_action( 'woocommerce_after_shop_loop' );
			?>

		<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

			<?php wc_get_template( 'loop/no-products-found.php' ); ?>

		<?php endif; ?>

		<?php 
		 	do_action('flatsome_products_after');
			/**
			 * woocommerce_after_main_content hook
			 *
			 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
			 */
			do_action( 'woocommerce_after_main_content' );
		?>
  </div>

How can we fix this? Is there anything that we’ve to do in functions.php like creating custom hook? Please suggest