[Felix MParticipant]

Hi there,

I am currently setting up a corporate website and try to make use of woocommerce for presenting the company’s product portfolio. For this purpose I want to apply some of the woocommerce widgets (like categories, layered navigation, …) for navigating through the products. However, so far I had no luck in getting WordPress to show the sidebar I set up for this purpose.

I am using the the Renew stack, created a new sidebar, added the different widgets and activated the checkbox “Enable sidebar on shop index page” in the sidebar’s settings. But no sidebar on the store frontend – neither on the shop page nor on any category page.

Any suggestions what I could do differently?

Sorry for not being able to present a link to the website since it is developed behind a corporate firewall.

Best, thanks,

Felix

[Paul RModerator]

Hi Felix,

Thanks for writing in!

You can select a layout with a sidebar for your global content layout.

http://screencast.com/t/lVBJDFn9sun

You can then set your shop page to use it.

http://screencast.com/t/YaPiocfA

and also set your blog and archives to global content to have a sidebar.

http://screencast.com/t/gOFXURnCp6D

—-

Or you can also set the page layout for your page individually under page attributes.

http://screencast.com/t/Sv26DDoSq9I

Hope this helps. 🙂

[Felix MParticipant]

Hi there,

thanks for your feedback. Highly appreciated.

I should have mentioned that I had already tried to adjust the page layout of the shop page but this also did not work. What worked was to change the global page layout from full width to sidebar left. The only downside is that I now have to individually change the page layout of all of my content pages. But at least this fixes the problem.

Am I right that this is a bug of the template? You should be able to adjust the page layout for the shop page individually, right?

Best
Felix

[Paul RModerator]

Hi Felix,

Can you provide us your site url so we can see your current set-up and provide you with a more accurate
suggestion or solution.

Yes it should adjust the page layout by setting it individually under page attributes.
However I would not consider this a bug because I have tested this kind of set-up and is working just fine in my local test site.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Felix MParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Felix,

Please add the code below in your functions.php

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()  ) {
        $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;
  }
  
    if ( 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';
    }

  return $layout;

}

Hope that helps. 🙂

[Felix MParticipant]

Hi there,

thanks for your quick reply but sadly this does not fix the problem. In fact I cannot see any difference.

What I am looking for is to set the layout of the woocommerce shop, product_tag, and product_category pages to sidebar left although I close a full width layout for the rest of the site.

For me the most natural place to search for such an option is in the customizer. In the “WooCommerce” section you can select a ‘Shop Layout’. However, the user can only choose between “Use Global Content Layout” and “Fullwidth”. What is missing are the options “Content right, Sidebar left” and “Content left, Sidebar right”.

Another way to possibly achieve this is by setting individual page layouts for the pages that are used for shop, product_categoy, and procduct_tag. And I guess this is the approach your functions.php code tackles, right? However I am not 100% sure which pages to adjust. In the woocommerce settings I point woocommerce to a specific page to show the shop. Is this page also used for displaying the categories and tags? I also set up a sidebar for which I enabled the option “Enable sidebar on shop index page”. But there is no sidebar if I have set the global layout to fullwidth.

Anny suggestions how to proceed with this issue?

Btw., great template and awesome support!

Best
Felix

[ZeshanMember]

Hi Felix,

Thanks for writing in!

It can be achieved by template change, to do so, follow these instructions:

Step 1: Copy the file wp-content/themes/x/framework/views/renew/wp-sidebar.php in your child theme’s folder /framework/views/renew/, open it in a text editor and replace the following line of code (probably line # 11):

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

Width following:

<?php if ( x_get_content_layout() != 'full-width' || ( is_shop() || is_product_category() || is_product_tag() ) ) : ?>

Step 2: Add following code in your child theme’s functions.php file:

// Main Content Class
// =============================================================================

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

    switch ( x_get_content_layout() ) {
      case 'content-sidebar' :
        $output = 'x-main left';
        break;
      case 'sidebar-content' :
        $output = 'x-main right';
        break;
      case 'full-width' :
        $output = 'x-main full';
        break;
    }

    if ( is_shop() || is_product_category() || is_product_tag() ) {
      $output = 'x-main left';
    }

    echo $output;

  }
  add_action( 'customize_save', 'x_main_content_class' );
endif;

// Sidebar Class
// =============================================================================

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

    switch ( x_get_content_layout() ) {
      case 'content-sidebar' :
        $output = 'x-sidebar right';
        break;
      case 'sidebar-content' :
        $output = 'x-sidebar left';
        break;
      default :
        $output = 'x-sidebar right';
    }

    if ( is_shop() || is_product_category() || is_product_tag() ) {
      $output = 'x-sidebar right';
    }

    echo $output;

  }
  add_action( 'customize_save', 'x_sidebar_class' );
endif;

Step 3: That’s it!

Now, no matter which layout you choose in the Customizer, the sidebar will always be visible on Shop index, category and tag archive pages (Content Left, Sidebar Right).

Hope this helps. 🙂

Thank you.

[Felix MParticipant]

Hi there,

thanks again for helping me tackling this nasty issue.

After inserting your code some space is “reserved” for a sidebar on the shop pages. However, no sidebar is visible. Moreover, the main menue is now broken on the shop pages. The nabber is visible but the submenue items are invisible when overing over the navbar.

Any idea how to fix this?

Thanks again

[Paul RModerator]

Hi Felix,

In that case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Felix MParticipant]

This reply has been marked as private.

[RadModerator]

Hi Felix,

Authentication login won’t work and it just redirect me to magento site.

For the meantime, please try this one.

Please disregard the instruction above (you may do backup). This should be done with conflict from above codes. Add this code at your child theme’s functions.php

if ( ! function_exists( 'x_get_content_layout' ) ) :
  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 = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      }

    return $layout;

  }
endif;

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 );

Then create your custom sidebar at Admin > Appearance > Sidebars and assigned it at your shop index. The sidebar assigned to your shop index should be assigned to your product, category, tags, and etc, pages too.

Then you may add your widgets to your shop sidebar at Admin > Appearance > Widgets.

Please clear your cache and disable it after doing this. It’s best if you’re not using any cache plugin during development.

Hope this helps.

[Felix MParticipant]

Hi there,

this helped. Thanks a lot! After slightly changing your code it now does exactly what I want:

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

    $stack          = x_get_stack();
    $content_layout = x_get_option( 'x_' . $stack . '_layout_content', 'sidebar-content' );

//    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 = 'full-width';
      } 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 = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      }

    return $layout;

  }
endif;

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 );

I got rid of the second ‘if’ statement since my global layout is full-width and thus I want your code to kick in when the layout is full-width, and not when it is not. Against this background: Is there a way to shorten this code and git rid of a few of the if clauses?

Thanks again for your guys’ awesome support!

Best
Felix

[RadModerator]

Hi Felix,

Glad it fixed your issue 🙂

The second if-condition is required. It checks if the sidebar is assigned for shop, if you will remove that, then it will display the first sidebar (assigned for shop or not).

Thanks.

[Felix MParticipant]

Hi there,

I am not 100% sure if we are talking about the same “second if-condition”. I am talking about the one that was commented out in the code above:

// if ( $content_layout != ‘full-width’ )

If I remove the comments the code does not work since my content layout is full-width. Moreover, I tried to set up a second sidebar and assigned it to the woocommerce shop and it worked.

Best
Felix

[Author]

Posts