[Resolved] Niche category list on shop/category page. child category name in lowercase

[Bartosz]

Template: Niche
Where: category list on shop/category page.
How to transform child category name to lowercase?

I made a little change in hook Woocommerce Shop Category Menu:
`$cat_args = array(
‘orderby’ => ‘menu_order’,

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Bartosz]

This is what I mean:

PARENT CATEGORY 1 PARENT CATEGORY 2 subcategory 1 subcategory 2 PARENT CATEGORY 3 subcategory 1

Link in private message.

[David]

Hi there,

theres no easy way to do that as the Niche function uses only the get_terms function of WP.
What you may be interested in is the final code found here:

https://generatepress.com/forums/topic/add-a-category-menu-to-product-pages/page/2/#post-1684272

You can replace the existing code with that. What it does is explained here:

https://generatepress.com/forums/topic/add-a-category-menu-to-product-pages/page/2/#post-1402255

So only subcategories are shown on the parent category page.

[Bartosz]

I saw that and it’s not for what I am looking for.

I was able to make it working.

Can you help me with some css to make it look all inline (like it was before)?

This is a code that I found on the internet:

<?php

 echo hierarchical_term_tree();

function hierarchical_term_tree($category = 0)
{
    $r = '';

    $args = array(
        'parent' => $category,
    );

    $next = get_terms('product_cat', $args);

    if ($next) {
        $r .= '<ul class="woo-cat-nav">';

        foreach ($next as $cat) {
            $r .= '<li><a href="' . get_term_link($cat->slug, $cat->taxonomy) . '" title="' . sprintf(__("View all products in %s"), $cat->name) . '" ' . '>' . $cat->name . ' (' . $cat->count . ')' . '</a>';
            $r .= $cat->term_id !== 0 ? hierarchical_term_tree($cat->term_id) : null;
        }
        $r .= '</li>';

        $r .= '</ul>';
    }

    return $r;
}
?>

And added this to css:

ul.woo-cat-nav li ul.woo-cat-nav li {
text-transform: lowercase;
}

[Bartosz]

I also have in my css standard niche code:

/* Woo category nav */

.woo-cat-nav {
	list-style-type: none;
	margin-left: 0;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 80px;
}

.woo-cat-nav li {
	padding: 5px 0;
	margin: 0 10px;
	border-bottom: 1px solid #ccc;
	font-size: 0.95em;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.woocommerce .woocommerce-result-count {
		display: none;
	}

	#wc-column-container .product {
		margin-bottom: 2em;
	}

	.woo-cat-nav {
		margin-bottom: 40px;
	}

	h1.woocommerce-products-header__title,
	.term-description {
		text-align: center;
	}

	.woo-cat-nav {
		justify-content: center;
	}
	
	.woocommerce ul.products li.product a.button {
		margin-right: unset !important;
		padding: 10px 0;
	}
}

[David]

Thats a nice snippet 🙂
But it creates a new problem in regards to layout. The sub-categories are output as nested list ( inside the parent list item ). Making them inline is tricky.

For example changing the desktop CSS ( code above the @media query ) from flex to inline:

/* Woo category nav */

.woo-cat-nav {
  list-style-type: none;
  margin-left: 0;
  display: inline;
}

.woo-cat-nav li {
  padding: 5px 0;
  margin: 0 10px;
  font-size: 0.95em;
  text-transform: uppercase;
  display: inline;
  line-height: 2;
}

Problem with it is that words will break to form new lines when there is not enough space.

[Bartosz]

Thank you. I was able to fix subcategories in your code and now it is working great. 🙂

ul.woo-cat-nav li ul.woo-cat-nav li {
	text-transform: lowercase;
	display: inline-flex;
}

[David]

Awesome – glad to hear that!

[Bartosz]

And this fixed parent category:

.woo-cat-nav li a {
	border-bottom: 1px solid #ccc;
	display: inline-flex;
	padding: 5px 0;
	font-size: 0.95em;	
}

So now everything is working. 😀

[Author]

Posts