Woocommerce page with storefront or groups

[smart_x]

Hi X Team,

How can I change my Woocommerce page? (see Secure note)

I want to start the page with a storefront or with groups/categories to choose from. Now it’s just a mix of products when visitors enter the webshop.

Thank you.

[smart_x]

Hi X Team,

Ok I found something in the dashboard. Woocommerce>Settings:

There is a small text with a link that says:
Looking for shop settings? This can be found in the adjustment menu.
If I click the link from the adjustment menu then it brings me to a menu which I don’t know how to find in another way.

Here I can set to display my page by products by categories.

The problem I have when displaying my page by products by categories is that the text of the categories shows very (too) large. How to solve this.

[ruenel]

Hello @smart_x,

Thanks for writing in!

To display smaller category titles, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce-loop-category__title {
    font-size: 1.3em;
}

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

Feel free to adjust the font size if necessary.

[smart_x]

HI X team,

Thank you. I added the css code.

Now the number of items are gone. Can I get them back?
Whit what I have to replace the title count none?
Can the count be on the image?
And why is the count number yellow marked?

What is the css code for the sub category to make smaller titles?

How can I find out by myself which part to css code to change something?

[Prasant]

Hello @smart_x,

Thanks for updating the thread.

@smart_x

Now the number of items are gone. Can I get them back?

Please remove the code shared in previous reply.

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

To remove the Yellow background, please add following CSS under Pro > Theme Options > CSS:

.woocommerce-loop-category__title .count {
    background-color: transparent !important;
}

@smart_x

Can the count be on the image?

Please add following CSS under Pro > Theme Options > CSS:

.woocommerce-loop-category__title .count {
    position: absolute;
    bottom: 90px;
    font-size: 250%;
    color: #000000;
}

@smart_x

What is the css code for the sub category to make smaller titles?

Please add following CSS under Pro > Theme Options > CSS:

.woocommerce li.product .entry-header {
    font-size: 60%;
}

@smart_x

How can I find out by myself which part to css code to change something?

I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.