[Resolved] Remove underline from Category product count

Home Forums Support Remove underline from Category product count

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1059919
    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?

    #1059964
    Leo
    Staff
    Customer Support

    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 🙂

    #1059981
    Stefan

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

    #1059999
    Leo
    Staff
    Customer Support

    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.

    #1060285
    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.

    #1060368
    David
    Staff
    Customer Support

    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.

    #1062094
    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?

    #1062428
    David
    Staff
    Customer Support

    Thats one way to do it 🙂

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

    #1062835
    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 🙂

    #1062860
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1063793
    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 🙂

    #1064121
    David
    Staff
    Customer Support

    Awesome – thanks for sharing your final code 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.