[Resolved] Remove underline from Category product count

[Stefan]

Hello,

I’m displaying all of my WooCommerce categories on my hompepage with a WooCommerce shortcode. The category image is displayed with a hyperlink including a product count underneath, like this:

Internet & Marketing (1)
______________________

This works fine, but I don’t want the last part of the hyperlink underlined, so it looks like:

Internet & Marketing (1)
___________________

In fact, this is the same way a list of my categories are shown via a Widget in a Sidebar.

Any suggestions how I can achieve this?

[Leo]

Hi there,

This might be a question for WooCommerce’s support team.

Any chance you can link us to the site in question so I can make sure?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Stefan]

Thank you, I’ve edited the original topic and shared a link to my website.

[Leo]

Hmm so by default the titles aren’t underlined.

This CSS you’ve added is adding the underline:

.site-content a, .site-content a:visited, .site-content a:hover {
    text-decoration: underline !important;
}

Unfortunately, I don’t see a way to exclude the product count <mark> tag from the CSS above as it’s included in the <a> tag.

[Stefan]

Thank you again, What I’m able to do is set the product count to display: none, which works well.

.woocommerce-loop-category__title mark {
   	display: none;
}

So it’s kind of strange that text-decoration: none doesn’t remove the hyperlink from the product count.

.woocommerce-loop-category__title mark {
   	text-decoration: none;
}

I guess I have to dive deeper into the WooCommerce templates, functions and hooks.

[David]

Hi there,

doesn’t look like there is filter for the category title and as its escaped HTML theres no way to target the text without it effecting the mark tag.

What you could do is this:

.woocommerce-loop-category__title {
    position: relative;
}
.woocommerce-loop-category__title .count {
    position: absolute;
}

This moves the element out of the DOM – so it won’t be effected by its parents styling.

[Stefan]

Thank you so much, this helps!

After applying your CSS I noticed that the space between the category title and product count had disappeared.

I added some CSS to fix this:

.woocommerce-loop-category__title .count::before {
		content: '\2005';
}

Then I noticed that the centering of the category title had to be fixed also:

h2.woocommerce-loop-category__title {
		margin-left: -17px !important;
}

Is this the correct way?

Last issue: on a smartphone the Category images (with the titles and product counts underneath) on my homepage are displayed in 2 columns. I’d rather show them on a smartphone in 1 column.

Is there a setting in GeneratePress to do this or should I add some CSS and could you post an example to do this?

[David]

Thats one way to do it 🙂

You can set the number of columns for Mobile in Customizer > Layout > Woocommerce

[Stefan]

Well, the settings you mention don’t seem to have any effect on my homepage, which is a static page where products and categories are displayed by WooCommerce shortcodes.

So, what I would like to achieve on a smartphone is that products and categories are shown in 1 column.
Right now they are shown in 2 columns.

Any further help is much appreciated 🙂

[David]

Aah Woo Shortcodes which can be a bit of a pain.
Try this CSS to force them to 100% wide:

@media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}

[Stefan]

Thanks again!

I noticed that this had effect on all my other pages with WooCommerce Shortcodes, so I added .page-id-2 (ID of my homepage) so only de homepage will be affected by a 1 column display 🙂

Gladly, my shop page and product pages are unaffected 🙂

@media only screen and (max-width: 768px) {
    .page-id-2 .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}

Topic resolved 🙂

[David]

Awesome – thanks for sharing your final code 🙂

[Author]

Posts