Categories Display and Product Link Issues

Hi there,
I have included 3 screenshots:

1. How do I choose which product categories to display here?
I want to be able to control which specific product categories display above the shop pages because my client’s site has tons of product categories and I just want to choose the most important. Or can I add a menu there instead that I have complete control over? Plus the category dropdown (appearing on mobile) doesn’t work on mobile, I’ve tested. The link seems to not be working.

2. Current widget settings.
How do I control which specific product categories display in the sidebar using this widget? I see that there is a mega menu option, but it is very different in terms of styling and if possible I would like to be able to have more control over the product categories in the sidebar. Any ideas?

3. Display inline…
This is a strange issue. When using Chrome (latest version), Windows 10, I hover over product titles (link) on a category page and the link/title loses it’s link but only for the first portion of the title. In Chrome devtools if I change inline to inline-block then they work perfectly, but then the underline goes away. I could tinker myself but thought as this seems to be a theme error I would let you handle it.

4. The mega menu in the sidebar doesn’t work at all on mobile. When you click on a link the popout appears off canvas. Not at all mobile friendly and shouldn’t even be allowed to appear on mobile unless you can fix it to display properly.

I need to launch this site in a few weeks, going to have to blitz it, so would love your swift responses on this if possible.
Thanks,
Zach

Attachments:

You must be logged in to view attached files.

Apologies, I made one mistake, the product categories cloud menu that sits above shop pages does work on mobile. So cross that off the list of grievances. 🙂

Hello,

We are glad to know that you considered using Basel for your web-site. I hope you will be happy with it.

1. This menu is generated based on all categories available in your shop and can’t be managed as a regular WordPress menu. If you want to change its structure then better to disable it and put your categories as a mega menu dropdown to your main navigation in Appearance -> Menus.

2. This widget comes with WooCommerce plugin and it works in the same way as our categories menu. You can’t have any control on both of them. The only one way to change their content or reorder categories is to edit them from Dashboard -> Products -> Categories.

3. Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.basel-hover-alt .product-title {
    font-family: unset;
}

Kind Regards
Xtemos

Your solution for #3 worked! Thanks for that.

Would it be possible for me to turn the categories menu that displays below the header and above shop pages (with black background colour) into a widget area?

I already added a switch in the theme settings, and registered the widget so it appears in the widget page in the back-end. I called it Shop promo Widget Area and used the same code as the filter widget but renamed everything to promo instead of filter. But I can’t seem to figure out how to actually make the widget area content appear in that area below the header. I know you don’t do customizations but I’m close and would love just a little guidance. Even if you point me to the code areas that need updating I can fiddle around, there’s a lot of files and I want to make sure I’m not missing anything.

Thanks,
Zach

OR, would it be possible to show children instead of ancestors? I think that would work well.

Because the ancestors functionality isn’t working well anyway. When I am on the product-cat Facial Oils it should show Skin Care as the ancestor product-cat, but instead it shows All which links to the shop. Shouldn’t it show the direct ancestor? So either it should show direct ancestor like Skin Care as the parent cat or it should work the other way where it shows sub-cats or children and when I’m on Skin Care it shows all 5 skin care children cats. Does that make sense? Right now when the ancestors switch is on in theme settings it seems to mostly show All no matter which cat page I’m on which is pretty useless.

Anyway, I feel like there is a solution out there and I’ve listed several issues when it comes to UX so hopefully you can help me work something out.

Cheers,
Zach

I’m so sorry, I was working on the wrong staging site. So the ancestors setting works sort of how I want it to work. Just ignore all the other comments.

Here’s what I want and let me know if it’s possible.

1. Right now when I’m on Hair Care cat it shows all sub-cats (Conditioner, Shampoo, Styling Products) which is great! But could it work that when I’m on Hair Care and I click on one of the sub-cats that it keeps all sub-cats visible and lets me use that as a permanent sub-menu until I go to another parent cat? And could it keep working with AJAX so I can quickly navigate through the sub-cats one after the other without the page reloading?

2. Or could you help guide me in making this area into a widget area so I can promote sales, shipping or rewards here? I should preface this by saying that this area is quite unique and is a brilliant idea from your side, I just feel it would be better if there were more options as it’s such a useful shop pages area.

Let me know what’s possible from your side.

Cheers,
Zach

Hi,

1. Try to enable both Show current category ancestors and Show category neighbors if there is no children options in Theme Settings -> Shop -> Shop page layout.

2. Sorry, what do you mean here? Could you please send a screenshot of what area are talking about?

Regards

1. Haha, you guys are awesome! I needed to update the theme from 3.6.2 to 3.7 and then that last setting you mention showed up. That does exactly what I want.

2. This is referring to the same area (product categories with black background section below header and above shop pages, that also includes page title if switched on). I was hoping to develop this section so that I can make it into a widget area. As I described in earlier posts I have created the widget and the theme setting, but I am unable to figure out your theme code so I can add the widget area I have created to that product categories bar. I would like to keep the product categories as an option, and to add the option of being able to use that area for sale text, promo text or rewards/loyalty text. So I thought turning it into a widget area made the most sense. Any help or guidance you can offer (even though it’s a bit out of scope) would be much appreciated!

You can try to add your custom code to that area customizing our template files. We can only give you the location of the menu in our files. Find it in int/template-tags.php file. PHP function that contains this code is called – basel_page_title.

Regards

One more thing I wonder if it’s possible to change the functionality of the page title on category/shop pages? When I’m on a parent category page and all the child categories are listed right beneath it (again, the page title/product categories bar underneath the header on shop pages), when I click on a child category the child category’s name is then shown as the page title. Although on some level that makes sense, wouldn’t it make more sense that the name of the parent category remains on top while I navigate through the child categories?

For example: I’m on a parent category page called Hair Care, and below are listed 2 sub-categories, Shampoo, Conditioner. When I click on Shampoo I want the page title to still say Hair Care as that is sort of the section I’m on. Also it seems strange to have the page title and sub-category title to be repeated, one in large text and the other smaller text with an underline.

Any solution for this?

Unfortunately, there is no solution at the moment. We will consider implementing it in our future updates too.

Regards

Thanks for pointing me in the right direction, I managed to solve this, here’s the code:

<?php
/* Woocommerce page title is always parent category */
function get_parent_terms($term) {
    if ($term->parent > 0) {
        $term = get_term_by("id", $term->parent, "product_cat");
        return get_parent_terms($term);
    } else {
        return $term->term_id;
    }
}
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$Root_Cat_ID = get_parent_terms($cat_obj);
?>								

<?php if ( $shop_title ): ?>
	<!-- $Root_Cat_ID holds the category ID value -->
	<h1><?php if ( $term = get_term_by( 'id', $Root_Cat_ID, 'product_cat' ) ) {echo $term->name;}
	?></h1>
<?php endif ?>

Great, we are glad that you have found the solution.

[Author]

Posts