[Solved] Override Woocommerce Info Box on Checkout

[jlbrown1]

If you go look at http://www.saddlebackstables.net and add 1 item to the cart (as a guest is fine), go to Checkout, you will see that the Woocommerce info box that shows we accept Amazon for payment. You will also notice to oddities that I wish to override/fix. The top border should be the same color green as the square to the left of the banner. Also, you can’t see it because it is white on white, but there is supposed to be a cursive “i” in the green box.

I have tried everything I can think of to override the blue border. The only way I have found to override the square is the following:

.woocommerce-info:before {
background-color: #27ae60 !important;
}

I know !important is not ideal, but I cannot make it work any other way. Interestingly, the same trick doesn’t work for the border…

.woocommerce-info {
border-top: 3px solid #27ae60 !important;
}

I have not tried figuring out why the “i” is in the wrong place. I haven’t modified that anywhere I know of…but if someone could help me with the border and the “i”, I would greatly appreciate it.

[jlbrown1]

This is solved, but I do have another question that is related. I would like the “i” to be centered in the green block. How would I achieve that? I researched pseudo before elements for about an hour, but didn’t find an easy solution.

Thanks!

[Author]

Posts