Woocommerce Product Page - Show Sidebar & Breadcrumbs

[gavn8r]

Hey team - I’ve been trying to figure out how to display the sidebar and breadcrumbs on product pages in Woocommerce. I can’t get it to show.

For sidebar:
I’ve selected “Sidebar Left, Content Right” in Options -> Layout and Design -> Content Layout.
I’ve selected “Use Global Content Layout” in Options -> Woocommerce -> Shop Layout.

For breadcrumbs:
I’ve selected “On” in Options -> Header -> Breadcrumbs.

I’ll send you a link to the site with admin credentials in a secure note.

[ruenel]

Hello @gavn8r,

Thanks for writing in!

1.) To display the breadcrumbs and the rest of the landmark header, please remove this custom css:

.masthead {
    position: absolute;
    width: 100%;
}

I am not sure why you added this code. If you want to have a fixed navbar, please go to X > Theme Options > Header and change the navbar position to “Fixed Top”.

2.) And to display the sidebars in product pages, please add the following code in your child theme’s functions.php file

// Display sidebars in single product page
// =============================================================================
function add_sidebars_woopages($contents) {
  if ( x_is_product() ) {
    $contents = 'content-sidebar';
  }
  
  return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');
// =============================================================================

We would love to know if this has worked for you. Thank you.

[gavn8r]

Thank you so much for the reply! The CSS fix worked, but the functions.php fix didn’t. I got this error:

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() in wp-content/themes/x-child/functions.php:28
Stack trace:
0 wp-includes/class-wp-hook.php(286): add_sidebars_woopages(‘sidebar-content’)
1 wp-includes/plugin.php(208): WP_Hook->apply_filters(‘sidebar-content’, Array)
2 wp-content/themes/x/framework/functions/helpers.php(48): apply_filters(‘x_option_x_layo…’, ‘sidebar-content’)
3 wp-content/themes/x/framework/functions/thumbnails.php(83): x_get_option(‘x_layout_conten…’)
4 wp-content/themes/x/functions.php(229): x_post_thumbnail_width()
5 wp-settings.php(499): include(’/home/ahe42m88d…’)
6 wp-config.php(90): require_once(’/home/ahe42m88d…’)
7 wp-load.php(37): require_once(’/home/ahe42m88d…’)
8 /home/ahe42m88dv


Any ideas?

[ruenel]

Hello @gavn8r,

There is a JS error on the page. It is caused by this JS script:

<!-- Global site tag (gtag.js) - Google Ads: 790500336 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-790500336"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-790500336');
</script>

I have removed it in X > Theme Options > Custom JS and I installed Insert Headers and Footers plugin which is the proper way of adding the script.

And lastly, I removed the php code and replaced it with this one instead:

if ( ! function_exists( 'x_get_content_layout' ) ) :
  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 = 'sidebar-content';
      } 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;

  }
endif;

Please check your product page now.

[gavn8r]

Looks fantastic. Thank you!

[ruenel]

You are most welcome!