Add Sidebar to Product Page

Hi there,

I would like to get the same sidebar that displays (to the right) on my shop page and shop category pages to display on single product pages. I do not see an option in the customizer. I do use a child theme and can add code to the functions.php file, but I can’t seem to get it right.

Thanks,
TJM

Hi there,

Our theme does not have such an option out of the box and this needs to be implemented by customizing the code which is out of our support scope. We can give you guidance on how to add the sidebar to single product page but we can not implement it for you nor support the code if it breaks in the future for any reason. Thank you for your understanding.

Kindly add the code below to functions.php file of your Child Theme:

function x_get_content_layout() {

    $stack          = x_get_stack();
    $content_layout = x_get_option( 'x_' . $stack . '_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_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
          $layout = 'sidebar-content';
        } else {
          $opt    = x_get_option( 'x_archive_layout', 'sidebar' );
          $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', '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;
    }

      if ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      }

    return $layout;

  }

add_filter( 'ups_sidebar', function ( $default_sidebar ) {

  $sidebars = get_option( 'ups_sidebars' );

  foreach ( $sidebars as $id => $sidebar ) {
    if (  x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
      if ( array_key_exists( 'index-shop', $sidebar ) && $sidebar['index-shop'] == 'on' ) {
        return $id;
      }
    }
  }

  return $default_sidebar;

}, 9999 );

Hope it helps.

1 Like

Thank you. That does work, but the side bar is on the left. How can I get it to the right?

Hi,

To get it to the right, change the line of code that reads.

} elseif ( x_is_product() ) {
        $layout = 'sidebar-content';
      }

to


} elseif ( x_is_product() ) {
        $layout = 'content-sidebar';
      }

Then entire code will now look like this

function x_get_content_layout() {

    $stack          = x_get_stack();
    $content_layout = x_get_option( 'x_' . $stack . '_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_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
          $layout = 'sidebar-content';
        } else {
          $opt    = x_get_option( 'x_archive_layout', 'sidebar' );
          $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', '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;
    }

      if ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      }

    return $layout;

  }

add_filter( 'ups_sidebar', function ( $default_sidebar ) {

  $sidebars = get_option( 'ups_sidebars' );

  foreach ( $sidebars as $id => $sidebar ) {
    if (  x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
      if ( array_key_exists( 'index-shop', $sidebar ) && $sidebar['index-shop'] == 'on' ) {
        return $id;
      }
    }
  }

  return $default_sidebar;

}, 9999 );

Hope that helps

1 Like

That explains it. Thank you. I had to update it in a couple other place. Here is what I have and working:

// Add Sidebar to All Shop Pages
// =============================================================================

function x_get_content_layout() {

    $stack          = x_get_stack();
    $content_layout = x_get_option( 'x_' . $stack . '_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_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
          $layout = 'content-sidebar';
        } else {
          $opt    = x_get_option( 'x_archive_layout', 'sidebar' );
          $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', '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;
    }

      if ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      }

    return $layout;

  }

add_filter( 'ups_sidebar', function ( $default_sidebar ) {

  $sidebars = get_option( 'ups_sidebars' );

  foreach ( $sidebars as $id => $sidebar ) {
    if (  x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
      if ( array_key_exists( 'index-shop', $sidebar ) && $sidebar['index-shop'] == 'on' ) {
        return $id;
      }
    }
  }

  return $default_sidebar;

}, 9999 );

You’re welcome. Cheers!

hello sorry for hacking this subject

but have same problem, using x theme latest version and integrity

but this code is not working fully. it put the sidebar as a footer…
any update on the code to add to child function?

Hello Lkd,

Please don’t mind but this is a post although similar is started by a different user and is fairly old ticket. Posting on someone else thread create lot of confusion and slows down the response time. Faster response we encourage users to create a new ticket. In that regards I request you to please create a new ticket and someone from support team will take a look. For more details please take a look at our support handbook.

Thanks.