How to display two sidebars on one page??

Question

WordPress

Good day.
Tell me please. I'm trying to display two sidebars for the mobile version and for the PC version.
as a result, commenting on the shortcode, I get the output of only one .
example:
dynamic_sidebar is responsible for this sidebar - bar_filter_mobile

For the second bar_filter, but on the PC version, it is not framed by anything.


I tried using wp_mobile () iPhones simply ignore it and do not display it.

I ask for your help

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.4.0
 */
defined( 'ABSPATH' ) || exit; ?>

<?php get_header( 'shop' );
do_action( 'woocommerce_before_main_content' );
?>
<?php include(TEMPLATEPATH.'/templates/header/breadcrumbs.php');  ?>  

<section class="contacts-block">
  <div class="container">
    <div class="about-slider__text">
      <div class="headline2 ">
        <div class="container flex-start">
          <div class="headline-line">
            <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
              <h2 class="products-header">
                <? $head_titel = get_field('kastomnyj_zagolovok',180)  ?>
                <? if (empty($head_titel)) {
                  woocommerce_page_title();
                }
                else {
                  echo $head_titel;
                }  ?> 
              </h2>
            <?php endif; ?>
            <p class="headline-line__left">
              <span class="headline-line__line"></span><? echo the_field('shop-desc',180) ?>
            </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
 
  <section class="products">

    <div class="container only-for-pc">
      <span class="accordion mb25">
        <? echo do_shortcode('[br_filter_single filter_id=456]'); ?>
      </span>
      <span>
        <?php do_action( 'woocommerce_before_shop_loop' );		?>
      </span>
    </div>

    <div class="container only-for-mobile">
  
  <container class="m">
    
  

        <span class="accordion ">
        <? echo do_shortcode('[br_filter_single filter_id=3008]'); ?>
      </span>
        
        <aside class="products-filter">
        
        <span style="
    width: 100%;
    height: 50px;
    display: block;
">
            <?php do_action( 'woocommerce_before_shop_loop' );		?>
          </span>
          <div class="filt"><a class="content_toggle open" href="#">Фильтр</a>
          
            <div class="content_block" style="display: none;">
            
              <div class="filter-content"> 
               
                <div class="accordion"> 
                  <?php // dynamic_sidebar( 'bar_filter_mobile' ); ?>
                  
                </div> 
                
                <div class="loyality">
                  <div class="loyality-header">
                    Программа
                    лояльности
                    для клиентов
                  </div>
                  <div class="loyality-link">
                    <a class="simple__link" href="<? echo home_url(); ?>/loyality/">Перейти</a>
                  </div>
                  <div class="loyality-image">
                    <img src="<?php echo TEMPLATE_URI;?>/source/img/loyal.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          
        </aside>
        </container>
        <container class="p">
        <aside class="products-filter only-for-pc">
          <div class="accordion"> 
          <?php dynamic_sidebar( 'bar_filter' ); ?>
            <? //echo do_shortcode('[br_filter_single filter_id=429]'); ?>
            <? //echo do_shortcode('[br_filter_single filter_id=2672]'); ?>

            <div class="loyality">
              <div class="loyality-header">
                Программа
                лояльности
                для клиентов
              </div>
              <div class="loyality-link">
                <a class="simple__link" href="<? echo home_url(); ?>/loyality/">Перейти</a>
              </div>
              <div class="loyality-image">
                <img src="<?php echo TEMPLATE_URI;?>/source/img/loyal.png">
              </div>
            </div>

            
          </div> 

        </aside>
        </container>


      <div class="pr"> 
        <?php //echo do_shortcode('[ap_pagination]'); ?> 

        <?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
        //do_action( 'woocommerce_archive_description' );	?>


        <?php
        if ( woocommerce_product_loop() ) {
/**
 * Hook: woocommerce_before_shop_loop.
 *
 * @hooked woocommerce_output_all_notices - 10
 * @hooked woocommerce_result_count - 20
 * @hooked woocommerce_catalog_ordering - 30
 */
do_action( 'woocommerce_before_shop_loop' );



woocommerce_product_loop_start();



if ( wc_get_loop_prop( 'total' ) ) {

  while ( have_posts() ) {

    the_post();



      /**

       * Hook: woocommerce_shop_loop.

       */

      do_action( 'woocommerce_shop_loop' );



      wc_get_template_part( 'content', 'product' );

    }

  }



  woocommerce_product_loop_end();



  /**

   * Hook: woocommerce_after_shop_loop.

   *

   * @hooked woocommerce_pagination - 10

   */

  do_action( 'woocommerce_after_shop_loop' );

} else {

  /**

   * Hook: woocommerce_no_products_found.

   *

   * @hooked wc_no_products_found - 10

   */

  do_action( 'woocommerce_no_products_found' );

}



/**

 * Hook: woocommerce_after_main_content.

 *

 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)

 */

do_action( 'woocommerce_after_main_content' );



/**
 * Hook: woocommerce_sidebar.
 *
 * @hooked woocommerce_get_sidebar - 10
 */
//do_action( 'woocommerce_sidebar' );
?>
</div>
</div>
</section>


<? get_footer( 'shop' );

functions.php

function true_register_wp_sidebars() {
 
  /* В боковой колонке - первый сайдбар */
  register_sidebar(
    array(
      'id' => 'bar_filter', // уникальный id
      'name' => 'Фильтр сайдбар', // название сайдбара
      'description' => 'Перетащите сюда виджеты, чтобы добавить их в сайдбар.', // описание
      'before_widget' => '<div id="%1$s" class="side widget %2$s">', // по умолчанию виджеты выводятся <li>-списком
      'after_widget' => '</div>',
      'before_title' => '<h3 class="widget-title">', // по умолчанию заголовки виджетов в <h2>
      'after_title' => '</h3>'
    )
  );
    /* В боковой колонке мобильный - первый сайдбар */
  register_sidebar(
    array(
      'id' => 'bar_filter_mobile', // уникальный id
      'name' => 'Фильтр сайдбар для мобилы', // название сайдбара
      'description' => 'Перетащите сюда виджеты, чтобы добавить их в сайдбар.', // описание
      'before_widget' => '<div id="%1$s" class="side widget %2$s">', // по умолчанию виджеты выводятся <li>-списком
      'after_widget' => '</div>',
      'before_title' => '<h3 class="widget-title">', // по умолчанию заголовки виджетов в <h2>
      'after_title' => '</h3>'
    )
  );

}

Answer 1

It is unlikely that anyone here will understand your sheet of code, but I will give you some practical advice.

• No function wp_mobile(), yeswp_is_mobile()
  
• Most caching plugins still don't work with this feature.
  
• Styling a site on a mobile and desktop version is best done using media queries in css, especially since your sidebars do not even visually differ
  
• Woocommerce is better to work with hooks and filters system and only change the templates in the theme last.