Support » Plugin: WooCommerce » Change button’s font size and color in mini cart

  • Resolved kenkoleaf

    (@kenkoleaf)


    Hello, there. I am using the woocommerce mini cart as widget in my shop’s sidebar. Because of the font size, position and color, the words are very hard to read. (it is currently in Japanese, the part that says カートを表示 and 購入手続き in the two different colored boxes)

    I cannot find easy CSS to put in my customizer.

    Can someone guide me to CSS that will change the words to white color and slightly bigger.

    Arigato!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Fernando

    (@fhaps)

    Automattic Happiness Engineer

    Hi @kenkoleaf,

    Are these the buttons that you are looking to modify?

    If so, I’m not a CSS expert, but I believe this code should do the trick:

    a.button.wc-forward {
      font-size:15px;
    }

    You can add it by going to Appearance > Customize > Additional CSS.

    Plugin Support Fernando

    (@fhaps)

    Automattic Happiness Engineer

    Just to clarify – the original font size I see there is 11px. I changed that to 15px on the code above, but you can always adjust it to whatever number you prefer.

    Plugin Support Hari Shanker R

    (@harishanker)

    Automattic Happiness Engineer

    Hi @kenkoleaf

    I hope the CSS code we passed along to you in our previous reply, helped you in fixing the problem with the minute text in your cart buttons.

    We haven’t heard from you in a while, so we’re marking this thread as Resolved for now.

    Please feel free to reply to us in this thread, should the problem persist. We are happy to look into this and guide you further.

    All the best!

    @fhaps Thanks for the tip! I’ve been struggling with two buttons for half a day!

    For others… I found it only works with !important

    a.button.wc-forward {
        background: #523f6d !important;
    }
    a.button.wc-forward:hover {
        background: #413256 !important;
    }
    
    a.button.checkout.wc-forward {
        background: #a3b745 !important;
    }
    a.button.checkout.wc-forward:hover {
        background: #8a9e2c !important;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.