[Support request] How to make category titles a button instead of text – with count

Home Forums Support How to make category titles a button instead of text – with count

  • This topic has 5 replies, 4 voices, and was last updated 10 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1073184
    rossnmia

    Hi I want to change my category titles from text to buttons. What css and where can I add it please (custom css I presume in appearance)

    Page is here: https://adventurehelicopters.co.nz/categories/ I want the Title text to be buttons with center aligned text.

    Thanks

    #1073251
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1074399
    rossnmia

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

    #1074922
    Leo
    Staff
    Customer Support

    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 🙂

    #1077295
    rossnmia

    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; }

    }

    #1078062
    David
    Staff
    Customer Support

    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

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