Sidebar on Product Pages

Hi, I created a sidebar (named Shop) and would like it to appear on individual product pages in my Woo Commerce Store. I have it appearing in the Store, but can’t get it to appear on the product pages
I tried the solution in this post and ended up breaking my whole site for two days. (Not sure what I did wrong – but it’s fixed now.)

Could you help me get this sidebar to appear on the product pages?
Thank you kindly!

Hi there,

Thanks for posting in.

You said Not sure what I did wrong -- but it's fixed now.. Is it okay now? Maybe it’s just typo error. Else, please provide your site’s URL and login credentials in a secure note. Make sure your child theme is active too.

Thanks!

Sorry for the miscommunication. My whole site was broken when I tried to fix this problem without support. Now the site is working, but, I do still need to get the Shop sidebar on the product pages.

Provided login info in a secure note

Hi,

To add sidebar to your product page, you can add this in your child theme’s 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 = 'content-sidebar';
      } 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;
    }
    return $layout;
  }

Hope that helps

Not really sure exactly where to add that. Last time I tried to add something to the functions,php file I broke the site. :open_mouth:
Also, it seems like my functions.php file has been renamed:

Do I need to select something from the dropdown menu?
Do I need to rename the file back to functions.php

Hi,

You can leave that as is for baclup.

Create a new file called functions.php on the same directory where you have functions-TEST.php then copy the code below into that file.

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

  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 = 'content-sidebar';
      } 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;
    }
    return $layout;
  }

Hope that helps.

ok, so that displayed the main sidebar on the product pages, however, I wanted to display a different sidebar that I created and named “Shop”.
I can’t seem to find any option to do that.

Hi There,

Please also add the following code under functions.php file locates in your child theme:

add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( x_is_product() ){
		return 'ups-sidebar-shop';
	}
	return $sidebar;
}

That did it! So thankful! Appreciate your help!

You’re most welcome.

Could you show me how to get that “Shop” sidebar to appear on the “Category Archive” pages in the store as well? Now, the main sidebar is appearing. Thank you kindly.

https://patsieler.com/product-category/music/mp3/

Hello There,

To get that “Shop” sidebar to appear on the “Category Archive” pages, you will have to update the code given by @Thai and make use of this code instead:

add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( x_is_product() && x_is_product_category() ){
		return 'ups-sidebar-shop';
	}
	return $sidebar;
}

Hope this helps. Kindly let us know.

Unfortunately, that did not work. It caused the main sidebar to appear on all product pages and category archive pages

Hey again,

Try updating the previous code to this:

add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( x_is_product_category() ){
		return 'ups-sidebar-shop';
	}
	return $sidebar;
}

Let us know how this goes!

ok, that worked for the category archive pages, but now the individual product pages are back to showing the main sidebar instead of the shop sidebar.

Hi,

Kindly change the code to this.

add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( x_is_product_category() || x_is_product()){
		return 'ups-sidebar-shop';
	}
	return $sidebar;
}

Hope that helps.

That did it! Thanks so much for your great help! Really appreciate it!

You’re welcome.

Man, I just noticed that the sidebar on the product tag pages needs to be switched over as well: https://patsieler.com/product-tag/spanish/
Any way to do that?

Hey there,

Further customization from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.