Docs

[BeardedRick]

Hi there,

I’m trying to show a sidebar only on Shop and product categories page.

I’ve followed the instructions from this thread but the sidebar breaks the layout and it covers the logo and some of the products.
I will attach a screenshot in the next post with my login details as well.

Do you have any suggestions?

Thank you

[BeardedRick]

This reply has been marked as private.

[Lely]

Hi There,

Please double check the credentials above. It is now working when I tried to login.

[BeardedRick]

This reply has been marked as private.

[Rue Nel]

Hello There,

Please be advised that the sidebar in the stack icon is designed as fixed sidebar on the left side or right sidebar. You can check it here: http://theme.co/x/demo/icon/1/

I would recommend that you try to switch stack and see which one is good for your layout. And if you wanted the sidebar just in the shop page and product page, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ICON/WP-SIDEBAR.PHP
// -----------------------------------------------------------------------------
// Sidebar output for Icon.
// =============================================================================

?>

<?php if ( x_get_content_layout() != 'full-width' || x_is_shop() || x_is_product() ) : ?>

  <aside class="x-sidebar nano" role="complementary">
    <div class="max width nano-content">
      <?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
        <?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
      <?php else : ?>
        <?php dynamic_sidebar( 'sidebar-main' ); ?>
      <?php endif; ?>
    </div>
  </aside>

<?php endif; ?>

3] Save the file named as wp-sidebar.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/icon/

Hope this may help.

[BeardedRick]

Hey @Rue Nel,

Thanks a lot for the snippet, unfortunately the sidebar appears at the bottom of the page and products. I’m guessing it’s a layout problem but I can’t quite workout what the problem is.

Any suggestions?

Thank you

[Lely]

Hi There,

Please also add the following code on your child theme functions.php file.

  function x_get_content_layout() {

    $content_layout = x_get_option( 'x_layout_content' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
        if ( x_is_shop() || x_is_product_category()) {
      		  $layout = 'content-sidebar';
        } else {
      			$layout = $content_layout;
		}

    }

    return $layout;

  }

Your entire site is setup to have fullwidth. Above code will override that default setup and add the sidebar space.

Hope this helps.

[BeardedRick]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code in functions.php file to :

//Add sidebar to single product
// =============================================================================

if ( ! function_exists( 'x_get_content_layout' ) ) :
  function x_get_content_layout() {

    $stack          = x_get_stack();
    $content_layout = x_get_option('x_layout_content', 'content-sidebar' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content','sidebar' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout', 'sidebar' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }

    return $layout;

  }
endif;

If you need further assist, please implement the code in a staging site and provide us with URL, login and FTP credentials so we can check the issue.

Hope it helps.

[BeardedRick]

This reply has been marked as private.

[Paul R]

Hi,

Please remove wp-sidebar.php in wp-content/themes/x-child/framework/views/icon/

Then change the code in your child theme’s functions.php file with this.

function x_get_content_layout() {

    $content_layout = x_get_option( 'x_layout_content' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
      if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $layout = 'content-sidebar';
      } 
    }

    return $layout;

  }

Hope that helps.

[BeardedRick]

Tried that, as you can see now whatever is on the left side where the sidebar is supposed to show, it’s not clickable.

Also it’s not showing the shop sidebar but the blog one.

Thanks

[Rue Nel]

Hello There,

The sidebar is actually showing but it is behind the shop contents. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .site .x-sidebar {
    float: right;
  }   
}

Please let us know if this works out for you.

[BeardedRick]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates!

1] To have the sidebar on the left instead of the right, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .site .x-sidebar {
    float: left;
  }   

  .site .x-main.left{
      float: right;
  }
}

2] To change which sidebar to display, please edit the code and change this line:

$layout = 'content-sidebar';

You can replace the 'content-sidebar' with the sidebar ID you have created as shown here:

3] To make sure that the sidebar will not display on the single product page, Please find this line;

if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
  $layout = 'content-sidebar';
}

you need to replace it using this instead:

if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
  $layout = 'content-sidebar';
} else {
  $layout = 'full-width';
}

Hope this works out for you.

[Author]

Posts