CSS help needed! Formatting “view cart” button on shop page

  • Resolved jhsingo

    (@jhsingo)


    4 years, 9 months ago

    Hi there,

    I wondered if you could help me with some CSS I’ve been struggling with. My website has a black background, so I’ve been having to change most of the Woocommerce font colours to white. I’ve managed to achieve most of it, but there’s still one area I’ve yet to figure out.

    On the shop page of my website, once you click the green “add to cart” button, another button appears over the image of the product which says “view cart”. Currently due to the colours of both the button and the font, this is not very easy to read, so I would like to know what CSS I have to change to improve this.

    I’d be very appreciative of your help with this matter.

    Thanks,
    JHSingo

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Stef

    (@serafinnyc)

    This will give you a black background on that element.

    
a.added_to_cart {
    display: block;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-right: -60px;
    margin-top: -30px;
    width: 120px;
    height: 60px;
    background: #fff;
    background: rgba(0,0,0,0.9) !important;
    line-height: 60px;
    font-size: 14px;
    font-weight: 800;
    z-index: 100;
}

    However, you don’t need to add all that if you want just a black background. You can also use a hexicode to color it rather than an RGB

    Thread Starter jhsingo

    (@jhsingo)

    That’s perfect, and just what I wanted. Thank you!

    Stef

    (@serafinnyc)

    You’re welcome ????

    Plugin Support Tseten a11n

    (@tibetanitech)

    I’m glad @serafinnyc was able to help. I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS help needed! Formatting “view cart” button on shop page’ is closed to new replies.