Custom Sidebar for ONLY WooCommerce pages. Already tried someone else's solution to no avail

Support
#1

Edit: I used the following code to add a sidebar to the Shop page, but I want it to be displayed on all WooCommerce pages, including the individual product pages, checkout, and my cart:

  function add_sidebars_woopages($contents) {
  if ( is_shop() || is_product_category() || is_product_tag() ) {
    $contents = 'content-sidebar';
  }
  
  return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');

So, to help illustrate the issue, you can look at The Shop and see how it works properly, then Categories is displaying as the same page layout, but the sidebar is blank, and then Product page.

So that’s the main issue. All of those pages should have the sidebar that the Shop does.

I do have questions about two other things though:

  1. How can I switch the sidebar over to the left side, and

  2. Is there a way I could have the product categories more prominently displayed, like underneath The Shop text, for example? I don’t mean taking the sidebar and putting it somewhere else, rather wondering if there is a completely different way to list those categories at the top of the shop and product category pages, so that people could see each product category along the top of the products, and click on a specific one to narrow the results to that category. To clarify, in between the products and the the shop title is where I mean.

I realize that’s a lot I’m asking about, thanks in advance!

#2

Hi Randy,

The code that you added was just to change the layout of the woocommerce pages but will not assign a sidebar to those pages.

To cover all pages of woocommerce, you can try this code

  function add_sidebars_woopages($contents) {
  if ( x_is_product_index() || x_is_product() || x_is_shop() ) {
    $contents = 'content-sidebar';
  }
  
  return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');

How can I switch the sidebar over to the left side, and

You can this line $contents = 'content-sidebar'; to this $contents = 'sidebar-content';

For your guide in assigning sidebars, please check the link below

Is there a way I could have the product categories more prominently displayed, like underneath The Shop text, for example? I don’t mean taking the sidebar and putting it somewhere else, rather wondering if there is a completely different way to list those categories at the top of the shop and product category pages, so that people could see each product category along the top of the products, and click on a specific one to narrow the results to that category. To clarify, in between the products and the the shop title is where I mean.

Sorry, this could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#3

When I tried that code I got this error message:

Your PHP code changes were rolled back due to an error on line 28 of file wp-content/themes/x-child/functions.php. Please fix and try saving again.

Uncaught Error: Call to undefined function x_is_product_index() in wp-content/themes/x-child/functions.php:28
Stack trace:
#0 wp-includes/class-wp-hook.php(286): add_sidebars_woopages(‘full-width’)
#1 wp-includes/plugin.php(208): WP_Hook->apply_filters(‘full-width’, Array)
#2 wp-content/themes/x/framework/functions/helpers.php(48): apply_filters(‘x_option_x_layo…’, ‘full-width’)
#3 wp-content/themes/x/framework/functions/thumbnails.php(78): x_get_option(‘x_layout_conten…’)
#4 wp-content/themes/x/functions.php(226): x_post_thumbnail_width()
#5 wp-settings.php(479): include(’/home/ymc4aov4n…’)
#6 wp-config.php(101): require_once(’/home/ymc4aov4n…’)
#7 wp-load.php(37): require_once(’/home/ymc4aov4n…’)
#8 /home/ymc4aov4nzzx/publi

#4

Hi Randy,

Let me walk you through again on the important steps.

1.You can create your custom sidebar as follows by head over to Appearance -> Sidebars section.

2.Then note-down the sidebar ID of it (ups-sidebar-my-woocommerce).

3.You can then replace the following line in your code, added to child theme’s functions.php file.
$contents = 'content-sidebar';

With your custom sidebar id as follows.
$contents = 'ups-sidebar-my-woocommerce';

4.Now you can add widget areas to your custom sidebar by head over to Appearance -> Widgets area.

5.Finally it should display on your WooCommerce pages as follows.

Hope that helps.

#5

I am trying to use this and this is what happened:
If I use this code now I can see my woo sidebar on my front store page but not on items:

// Shop sidebar for Woocommerce producs
add_filter( 'ups_sidebar', 'assign_sidebars' );

function assign_sidebars($sidebar){
	if( x_is_shop() || x_is_product_category() || is_product_tag() ){
    	return 'ups-sidebar-my-woocommerce';
	}

	return $sidebar;
}

Now if I use this code I get some errors

function add_sidebars_woopages($contents) {
  if ( x_is_product_index() || x_is_product() || x_is_shop() ) {
    $contents = 'ups-sidebar-my-woocommerce';
  }
  
  return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');

Now, how can I fix it?

 Uncaught Error: Call to undefined function x_is_product() in wp-content/themes/pro-child/functions.php:84
    Stack trace:
    #0 wp-includes/class-wp-hook.php(286): add_sidebars_woopages('content-sidebar')
    #1 wp-includes/plugin.php(208): WP_Hook->apply_filters('content-sidebar', Array)
    #2 wp-content/themes/pro/framework/functions/helpers.php(48): apply_filters('x_option_x_layo...', 'content-sidebar')
    #3 wp-content/themes/pro/framework/functions/thumbnails.php(78): x_get_option('x_layout_conten...')
    #4 wp-content/themes/pro/functions.php(235): x_post_thumbnail_width()
    #5 wp-settings.php(479): include('/home/comenelex...')
    #6 wp-config.php(101): require_once('/home/comenelex...')
    #7 wp-load.php(37): require_once('/home/comenelex...')
    #8 /home/comenelext/public_h
#6

Hello @ElClements,

It’s my humble request please create a new thread as usually posting on ticket created by different user causes lot of confusion resulting in slow response time which often is a frustrating experience for customers. Please create a new thread and we will assist you accordingly. You can give reference to this thread for faster response time.

Thanks for understanding.

#7

Haha, thanks for trying but that didn’t help at all. My fault for not being clearer I guess.

I have the sidebar I want already being linked to the home page, and that code provided above gave me the same error that @ElClements provided. No matter which sidebar ID I include in that code it gives the same error. So I appreciate the response though.

Is there something wrong with the code provided? Again, @ElClements hit the nail on the head here, the first code I provided kind of works by linking the proper sidebar to the main shop page, but not the other pages I need it to.

The code you guys provided is unfortunately a step backwards, as it provides an error message and doesn’t seem to work at all.

#8

Hi @randylpurcell,

Please try again with the following stesp:

  • Add this code under functions.php file locates in your child theme:
add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( is_product() || is_woocommerce() || is_shop() || is_cart() || is_checkout() ){
		return 'ups-sidebar-woocommerce';
	}
	return $sidebar;
}
function add_sidebars_woopages($contents) {
	if( is_product() || is_woocommerce() || is_shop() || is_cart() || is_checkout() ){
		$contents = 'content-sidebar';
	}

	return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');
  • Create a sidebar named as WooCommerce under Appearances > Sidebars(I’ve already done it for you):

Hope that helps and thank you for understanding.

#9

Thanks, that works for the Shop and Checkout and Cart pages but displays a blank area where the sidebar should be for Product Category pages like this one. That’s pretty much the only issue left; I just don’t want the shop to lose the continuity and it’s ability to navigate when users click through the categories. There are too many products to expect people to click through each page without navigation.

#10

Hi @randylpurcell,

To include the category pages, please change your code with this.

add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( is_product() || is_woocommerce() || is_shop() || is_cart() || is_checkout() || x_is_product_category()){
		return 'ups-sidebar-woocommerce';
	}
	return $sidebar;
}
function add_sidebars_woopages($contents) {
	if( is_product() || is_woocommerce() || is_shop() || is_cart() || is_checkout() || x_is_product_category()){
		$contents = 'content-sidebar';
	}

	return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');

Hope this helps

#11

Your PHP code changes were rolled back due to an error on line 35 of file wp-content/themes/x-child/functions.php. Please fix and try saving again.

Uncaught Error: Call to undefined function x_is_product_category() in wp-content/themes/x-child/functions.php:35

Got another error with that one^

#12

Hi Randy,

It could be due to filter priority since it’s called before even that functions is declared. Please change the above codes with this

add_filter( 'ups_sidebar', 'x_woocommerce_sidebar' );
function x_woocommerce_sidebar($sidebar){
	if( is_product() || is_woocommerce() || is_shop() || is_cart() || is_checkout() || x_is_product_category()){
		return 'ups-sidebar-woocommerce';
	}
	return $sidebar;
}
  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( is_product() || is_woocommerce() || is_shop() || is_cart() || is_checkout() || x_is_product_category()){
		return 'content-sidebar';
	}

    return $layout;

  }

Hope this helps :slight_smile:

#13

@randylpurcell

I had a similar issue with the sidebar. What I ended up doing (and it’s currently working well) is that after putting in the php code for the sidebar I went to Theme Options -> layout and design and set the content layout to be content right, sidebar left, and set your sidebar width. That will make that page template your default template.

From there if you want to change the layout of a page in the future, you just change the page template in the page settings (click on the cog wheel in the left hand corner) from default to whatever you want.

As for setting the product categories up how you want them to display, I’d check out this site

They seem to have a pretty decent solution.

#14

Hello @happycolt,

Thanks for chiming in! We’re glad that the solution is working out for you.

Regards.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.