No widget for Woocommerce?

[jpvr]

Hi guys,

I have spent quite some time searching through the forums, but don’t find what I’m looking for.

I am using X - Ethos stack
Cornerstone 4.1.2
X version 7.1.2
Woocommerce 3.9.2
Wordpress 5.3.2

There seems to be some layout issues on my site.

Firstly, on wp-admin/appearance/widgets I do not have a widget for woocommerce.
When viewing the shop page in Customizer, it shows that I have the site Main Sidebar available, along with the 4x headers and footers.
Viewing the single product page, I only have the 4x headers and footers available.

If this relates to the page layout chosen in page editor, I have no X-related Layouts available, while I do see some layout template files in the X Theme directory.
I also see that woocommerce.php is present in the X Theme directory.

I checked and can confirm that I have no Woocommerce-related files in my child theme directory.

Secondly, I cannot find any way to change the layout or look of product listings in the main shop page.
The single product page is ok, but I would like to make the products show wider than it currently shows, even if I have to choose “List view”, but cannot find that setting either.

Lastly, could you remind me what folder structure a person should use if you want to change certain functions of a plugin? Eg. if the file is located in wp-content/plugins/theplugin/inc/file.php - Can you still change functions in the plugin by copying a portion of that folder structure into your child theme?

[christian]

Hey Jean,

Our themes does not support a sidebar for the single products page as the design aims to make the user concentrate on the product being sold.

With that said, you will need to override the theme’s layouts. I believe you have some knowledge of this already but in case not, the documentation to customize our theme is here: https://theme.co/docs/best-practices

After reading that, add the following code below in your child theme’s functions.php. Once you’ve added the code, the sidebar area will show up but you’ll still have no sidebar so read on after the code part.

/* Override Theme Layouts */

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;

  }

Before I proceed, please notice this part of the code:

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

The original code in our theme is fullwidth for the single product and not content-sidebar. You can change other layouts with that block of code and not just the Single Product. I believe you’ll get the pattern in that code.

-----------------------------------------------------------------------------------

Now to displaying a sidebar specific for single products. Go to Appearance > Sidebars and add a new sidebar. Name it Single Product

Next, add this code again to your child theme’s functions.php to assign that sidebar to the single product page.

function single_product_sidebar( $sidebar ){ 
       if ( is_product() )  {      
           return 'ups-sidebar-single-product';        
       }    
  return $sidebar;
}

add_filter( 'ups_sidebar', 'single_product_sidebar');

Next, fill the sidebar/widget area with widgets.

You’ll see the widget in the single product page after that.

As with the previous code, this sidebar assignment code could be tweaked for other parts of the theme. Notice that the name of the sidebar is in the code 'ups-sidebar-single-product. I believe you get where it is.

For the rest of the code parts, you will need WordPress development knowledge. This is beyond the scope of our product support so if you find it hard to work with, I’d recommend you consult with a developer.

The purpose of me explaining the code is to show you how you can work on sidebars in our theme.

In the future, we will have a Layout Builder so there would be no coding required to achieve layouts for single and archive pages.

@kyle

Layout Builder

Finally, work has begun on our next cycle which will bring the highly anticipated Layout Builder. The next iteration in our family of integrated builders will allow you incredible control over blogs, index pages, archives, and more. Several new Elements will be making a debut in addition to Design Cloud templates and of course a step-by-step YouTube series. It is a little early to speculate on an expected launch date, but we will know more after the first of the year.

Hope that helps.

[jpvr]

Thank you for your reply, it all makes sense.

Your aim at focus on the product in the single page makes sense and I agree. I wanted to add the sidebar for currency selection, but I guess it may be better to just include it somewhere in the page itself.

Can we also have a look at my question on the main shop archive layout?
I would prefer to use a function rather than css.

Also if I look at this code
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;

I would think all Woocommerce archives would have the same sidebar, but I had to create a sidebar for the main shop page using Appearance/Sidebars - and I cannot assign it to the product category or product tag pages.

Is this normal behaviour so I should assign them via functions.php?

Thanks for your time!

[ruenel]

Hello Jean-Pierre,

Thanks for updating in!

1.) Please keep in mind that you cannot modify the layout of the shop page using the WP editor or the Cornerstone builder. You will need to recode or reconstruct both the PHP functions for the shop index and add some custom css to be able to accomplish what you have in mind. Be advised that this will require custom development already which is beyond the scope of our support.

The code:

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

2.) In the code above, it will only force the shop, product category and product tag archive pages to have a sidebar. This does not include which sidebar to display. That is why @Christian gave an instruction on how you can go to Appearance > Sidebars to create a custom sidebar and be able to assign this sidebar to the shop, product category and product tag archive pages.

Hope this helps.

[jpvr]

OK, it all makes sense.

One last question:
I did purchase Pro, but I’ve been holding off from changing my site to Pro.

With the type of customizations I do, would Pro be a better fit than X?
And will the transition be smooth, with the entire Ethos-based setup working perfectly?

I would use Pro only if the current setup remains in tact, with the benefit of enhanced customization.

Thank you guys for your time and have a good day!

[nabeel]

Hey Jean,

All of your customization should work in Pro. The main difference between X and Pro is that Pro includes a native family of interconnected Header, Content, and Footer Builders whereas in X you have access to the Content Builder which is called Cornerstone in X (see https://theme.co/docs/the-difference-between-x-pro).

The transition is quite smooth and easy, see https://theme.co/docs/converting-from-x-to-pro

Hope this helps!