Replace WooCommerce category images with plain text.

Jun 7, 2022 | WooCommerce Tips | 0 comments

Sometimes it’s a pain to make images for all your WooCommerce product categories. Otherwise, you get the ugly default image. Add the CSS below to hide the category image and style how you want the category names appear.
li.product-category a {
    padding-top:15px;
    padding-bottom:15px;
}
li.product-category {
    background-color:#002b91;
    width:265px;
    height:130px;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}
li.product-category:hover {
    background-color:#1160d9;
    -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s;
}
h2.woocommerce-loop-category__title {
    padding-left:10px !important;
    padding-right:10px !important;
    text-align:center;
    color:#fff;
    font-size:25px !important;
    line-height:35px;
}

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.