How to get sidebar widget with product categories visible on shop page?

Hi!

How do I get the widgets/sidebars with product categories described in this post as a sidebar on my shop page? I can’t set a sidebar to the shop page. Do I need to make a custom shop page in the builder? If so, are there instructions/demo somewhere? Everything has changed since I last did a shop.

A

Hello @Lobsterass,

Thanks for posting in! To get a sidebar widgets in your current shop page, you will need to do the following:
1.) Edit your custom Shop layout.
2.) Add a column in the first row, Section 1 > Row 1
3.) Make the template column layout into 2/3 1/3

4.) On the newly inserted Column element, you can use the Widget Area element.

Kindly let us know how it goes.

1 Like

Hi!

I’m about to give up. :sweat:I’ve spent 8 hours and I can’t get anything to work on this shop page made in the Layout builder. Please help me.

  1. A click on a sub category in the widget with product category list should only display the products in that specific sub catergory on the right. Now, it shows others too.

  2. Widget: Only the active main category should be expanded to show sub categories. Now, they are all expanded.

  3. The headlines just above all products should show the sub category. For example: A click on Cambridge > AS+A Cam Intern should say Cambridge (left) AS+A Cam Intern (right).

I really need this to function properly. Please explain it to me like I’m 5 years old. I’m missing some important steps and I pulling my hair trying to figure out what it is.

<3

Hello @Lobsterass,

1.) You should edit your custom layout and must disable any Looper Provider.

2.) The Category widget will display expanded by default. Regretfully there isn;t an option that certain category will only expand and the rest is collapsed.

3.) It seems that you are not using the dynamic content to display the Category name or Term name.

We would love to check your custom layout first. If you wouldn’t mind, please share to us your WP details. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

1 Like

Hi!

I would love for you to login. :slight_smile: Please feel free to do whatever you want with the active layout called SHOPTEST.

Could the category widget be all closed per default then, and only expand upon a click? It’s going to be too long when all are expended at all times (and I don’t like the drop-down widget option).

Yeah, I’m not sure how to set up the dynamic content with categories and subcategories, as that is not a preset option in the toolbox.

The most important issue is for a click on a subcategory to only show products within that specific subcategory, please.

I really appreciate help with this.

<3

Hey @Lobsterass,

Regarding the Category and Sub Category links:

Ruenel used the wrong word “expanded by default”. There is no expanded by default as you’ve noticed he mentioned there is no option to collapse… What he really meant is the design is static and that’s by WooCommerce actually and not our theme. We can’t provide customization for that. We apologize for the confusion.

I’d cover the most important issue first then we continue with the rest after solving it to avoid confusion.

When you click on a sub-category or even a category, you see the Layout for your Shop Page and in that Layout, you’re using the Products element which will display unfiltered products as it’s meant for the Shop page display and not Product Category ang Tag.

With that said, you must create another Layout for your Product Categories. Assign the Layout as shown in the screenshot below or with this Condition: Product Taxonomy is Category

image

In that Layout, you need to build a product loop manually so you need to know 3 things:

  1. How to build an Archive Layout (tutorial video here: https://youtu.be/L1719j7J7LE)
  2. How to set up a Looper (tutorial playlist here https://www.youtube.com/watch?v=-LSZ7cGLNso&list=PLWPh_GoP7hYWzrfwrzAYL53b8YaQhFhfD)
  3. Dynamic Content doc here: https://theme.co/docs/dynamic-content

Those require a bit of learning to be proficient. The fastest way to learn all those is to add in an element that already has a Looper and Dynamic Content set like the Posts elements.

image

Add one of those to your Archive Layout and simply disable the Layout Provider like what Ruenel said:

image

image

image

Please first set the Layout for your Product Category up to solve your previous query which is this:

Thanks.

Hi!

Thanx but that didn’t really help as I can’t find the option PRODUCT TAXONOMY under conditions.

I have said this before, it would REALLY help if you guys had some simple demos that one could install and mimic. That’s what all big themes got and that’s the only reason why Pro hasn’t taken over the world. Then you wouldn’t have to deal with all these questions from people like me.

Since there is no working guide for this extremely complex matter, could you please do what Ruel was about to do - login and just make what you are suggesting work on just 2 categories? PLEASE! It would be a simple task for you and it would save me several days of work. I might have to fire this client because I can’t afford not moving forward. I have another site to start on and I was planning on using Pro for that one too.

If not, please move me up to your second line support or management.

Thank you.

Hello @Lobsterass,

You are designing your Shop index incorrectly. You DO NOT use the Products elements to display the product items.

You need to have a Looper Consumer and insert the necessary elements to display the product item information like featured image, title, price, description, etc. The best example you can have is by using the built in templates. You can edit them later on as you go on your own design layout.

I have check your your Shop layouts and I found out that there is one layout that you created that is on the right track. Please see the secure note for the URL.

Before we dive in to the Categories on the sidebar, please check out the example layouts to make you more familiar in creating a custom Archive layout and what elements needs to be on the custom archive layouts.

Best Regards.

1 Like

Hi @ruenel!

Thank you! That was very helpful! The correct products show for each category clicked now. Great! :slight_smile:

https://witrapublishinggroup.com/cornerstone/layouts/1730

The active category is only red on hover. It would be great to somehow show the user which category he is currently viewing. Preferably, it should be red on active AND show the category (+ sub-category) name in a dynamic headline under LITTERATURE.

NOT WORKING CSS
.widget ul li a:active .widget ol li a:active {
color: red;
}

Is there a way to somehow show hierarchy in the 3 level categories? It’s currently difficult for the user to spot even the main categories as they look almost like their sub-categories. Can I assign a class?

Btw, I watched the Looper video. I understand how you made the looper consumer but I can’t see how the sidebar widget became the looper provider? I would love to understand that.

THANK YOU! <3

Hello @Lobsterass,

It is not display the Category name because you used {{dc:post:title}}. You should be using {{dc:term:name}}.

The custom CSS is not working because that code is not related in anyway to the Category Widget that you added. The widget category only displays all the categories but it does not have any class that indicates that it is the active category that is showing on the page. You will need other methods to be able to see the active category.

Changing the headings for the hierarchy of the categories would mean that you need to customize the widget or even more, create your own widget that fits the need to be displayed on your site. Be advised that our support only covers getting your site set up, bug fixes and minor cosmetic changes. The feature that you are looking for requires custom coding which is beyond the scope of our support and is considered as custom development.

Be advised that the sole purpose of the Widget Area element is to display the widgets which you have assigned in the widget areas in Appearance > Widgets. It does not have Looper Provider capabilities.

If you need to display the the Categories using the Loopers, perhaps these thread might help you:

Best Regards.

OK… :sweat:. It would have been great if there were demos on this.

I can’t believe it’s only possible to show the lowest subcategory as {{dc:term:name}}. It MUST be possible to show the other two levels of categories as well.

Tags would also have been very useful as part of the product single layout demo. I’ve read previous support questions on this but it doesn’t work. Please tell me how to show product tags.

{{dc:woocommerce:product_tags}} does not work.

Hello @Lobsterass,

In order to display multiple categories and tags which is assigned to the product then you would need a looper. I have set up a product category and product tag with the looper. I have kept it in hidden mode, I would suggest you please go to the element —>customize —>Hide During Breakpoints, you need to unhide it and then check it.

Product-single-Witra-Layout-Builder-Pro

Thanks

1 Like

Thank you! Tags work now. :slight_smile:

Hi @Lobsterass,

Glad that we are able to help you.

Thanks

Hi!

Is there a way to get the categories in hierarchical order upon click?
https://witrapublishinggroup.com/cornerstone/layouts/1730


Hello @Lobsterass,

Regretfully there is no option for that at the moment, it would require custom development. I would suggest you please contact a developer who can assist you with your concern or you can subscribe to One where customization questions are answered. Please note we don’t provide custom development support. It is out of the theme support scope.

Thanks for understanding

1 Like

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