How to make category titles a button instead of text - with count

Hi there,

This should help:

.woocommerce ul.products li.product .woocommerce-loop-category__title {
    display: inline-block;
    padding: 10px 15px;
    background: #000;
    color: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:hover {
    background: #222;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
    color: #fff;
}

Let me know :)

Thanks for that. Doesn't seem to work added to custom css.

I'm not seeing the CSS being added at all.

Can you try clearing your caching plug or any server cache you might be using?

I tested Tom's code and it should work.

Let me know :)

I did and here's my custom css code in its entirety.

Cache cleared

/*Video*/
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

.page-hero {
position: relative;
overflow: hidden;
}

.background-video-content {
position: relative;
z-index: 1;
}

video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
display: inline-block;
padding: 10px 15px;
background: #000;
color: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:hover {
background: #222;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
color: #fff;
}
.boxed {
border: 1px white;
background-color: #ffffff;
}
.wt-table-lisst .wt-table td.tb-viewdetails .btn.wt-button {
color: #fffcfc;
}
#wtmain-content ul.products.columns-3 .product-category img {
width: 100%;
}
/*Hide Combos On Tags Page*/

.product-category.product.sales-flash-overlay.woocommerce-text-align-center.woocommerce-image-align-center.do-quantity-buttons {
display: none;
}
/*End Hide Combos On Tags Page*/

body.woocommerce div.product form.cart div.quantity {
display: none;
}
.woocommerce div#product_total_price {
padding: 10px;
margin: 0px;
}
.h1 {
font-size: 45px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
/*Cart Qty Treetops Variables*/

body.woocommerce div.product form.cart div.quantity {
display: inline;
}
.do-quantity-buttons div.quantity {
display: inline;
}
.quantity {
display: inline;
}
.woocommerce form .quantity.buttons-added .minus {
display: inline;
}
#quantity_5d869ac4238eb.input-text.qty.text {
display: inline;
}
/*End Cart Qty Treetops Variables*/

body.woocommerce div.product form.cart div.quantity {
display: none;
}
.site-header {
display: none;
}
.main-navigation .sticky-logo {
position: absolute;
left: 0;
top: 0;
height: 60px;
}
.main-navigation .sticky-logo img {
height: auto;
}
/*Menu Colored*/

@media (min-width: 769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
}
@media (min-width: 769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
}
/*End Menu Colored*/

body.woocommerce div.product form.cart div.quantity {
display: none;
}
.shop-wt-more-meta {
width: 90%;
}
.wt-discount-sif {
display: none;
}
.single-main-navigation {
background-color: #FF6347;
}
.text-shadow .inside-page-hero {
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}
.content-background .inside-page-hero {
padding: 2%;
background-color: rgba(0, 0, 0, 0.3);
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}
.woocommerce-review-link {
display: none;
}
.woocommerce div.product p.cart {
display: none;
}
@media only screen and (max-width: 768px) {
.single-product.woocommerce #content div.product div.summary {
width: 95%;
}
.single-product.woocommerce #content div.product div.summary {
width: 45%;
}
.woo-tour-accompanied.woo-tour-schedu.col-md-12 {
width: 95%;
}
.wt-disc-info.woo-tour-info.meta-full-style {
width: 95%;
display: none;
}
.woocommerce #content div.product .woocommerce-tabs {
width: 95%;
display: none;
}
.woo-tour-accompanied.col-md-12 {
width: 95%;
}
@media (max-width: 768px) {
h1 {
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
@media (min-width: 769px) and (max-width: 1024px) {
h1 {
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
.woocommerce div.product p.cart {
display: none;
}
.cart {
display: none;
}
.h1 {
font-size: 45px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
.profile-img {
border-radius: 50%;
}

/*Hide Mobile*?
*/
@media screen and (min-width: 0px) and (max-width: 700px) {
#div-mobile { display: block; }
#div-desktop { display: none; }
}

@media screen and (min-width: 701px) and (max-width: 3000px) {
#div-mobile { display: none; }
#div-desktop { display: block; }

}

Hi there,

can you place the CSS that Tom provided at the very top of your CSS.
If it works then it means you have an error somewhere in your other CSS. Any CSS after a broken line of CSS will not necessarily work.

You can test your CSS for errors using this site:

https://validator.w3.org/#validate_by_input