Q: how can I change icon for "info" in WooCommerce checkout?

Hi, folks
still working on my ecommerce setup, using Newsmag and WooCommerce — I had postponed any more work on this until the “new new” version of WooCommerce was released in Feb. Now back on track and here working on the weekend (again!).

So, when on the first screen of checkout with the info boxes, such as “Have a coupon” the icon/image appears to be a square with horizontal bar across top. That doesn’t seem very intuitive as “attention!” — something like the font-awesome info-circle, or bootstrap “glyphicon glyphicon-info-sign” or similar?

Also, stupidly I had brought up the issue with how the “what is paypal” was tripped up by the PP payment icon on iPad portrait. Well, it seems WOO finally fixed that by default, so now your fix from my fix, puts the “what is paypal” all but its lonesome waaaaaaay over to right while the PP logo is small waaaaaaay over to the left.

I think I need to figure out how to just remove the damn “what is paypal link!”

oh, apparently this can be put in custom CSS

li.payment_method_paypal a.about_paypal {
display: none !important;
}


looks like this happens to be:

div class="woocommerce-info"

Sorry, also for WooCommerce, it seems like it would be good idea to possibly have custom breadcrumbs if that is part of theme style vs WooCommerce default code.

Right now it seems kind of silly to have

cart
Cart

or

checkout
Checkout

about us
About Us

my account
My Account

for breadcrumb on cart, checkout and “pages” in store.

Not sure if it’s doable but something like

store > cart > checkout

store > how to order (for pages)

sure would be awesome.

• This reply was modified 11 years by simchris.

Additionally, I noticed with latest update that on the checkout page, the theme used the class “button alt” for the “Place Order” button at bottom, however this is a size smaller than the “button” class used on page, and if anything should be “button lg” (large). So, for example the button used in the info boxes to apply a coupon code or login is a size larger than the most important button on page to actually checkout.

I was trying to figure out to make this larger, and as usual I’m not getting the syntax quite right…

eg.

.input button alt{font-size:18px !important}

.button alt{font-size:18px !important}

any help on this one appreciated 🙂

( I am running Newsmag 1.6 )

also trying

.woocommerce #checkout .input button .alt{font-size:18px !important;}

and

.woocommerce #checkout div.place-order, .woocommerce-page #checkout div.place-order .input button .alt{font-size:18px !important;}

obviously stuck on this one ! 🙂

• This reply was modified 11 years by simchris.

Hi! Thanks, Marius
I’ve been getting education on using the hooks to add custom text in the functions.php file vs hacking the WooCommerce theme, so this is my first (!) WooCommerce install, which is hard to believe after all these years, but there you are.

THANK YOU for the button alt code; that was tricky … didn’t get the syntax on that. I’ll update on that.

Figure the breadcrumbs were in-built as I did look at the woocommerce.php file in the theme folder, and went “ahhhhhh soooo.”

The only other minor quibble I have at moment (once I test button fix), is that in iPad portrait mode, on the cart view, the coupon button and update cart spacing got a little wonky due to the changes to WooCommerce — which I think they have now “stabilized” to the next generation (meaning 2015 code vs 2010 code on a lot of stuff!).

I will need to make screen cap of the iPad on this particular issue of the viewport spacing for iPad portrait, as that is the “tricky” one.

For changing the “icon” in the “info” boxes on payment pages, it looks like I need to edit the CSS to change the box you’re making with CSS, and insert a font awesome icon or something there.

the code for ‘place order’ worked perfectly, thanks 🙂

HI, Lucian
okay here are two screen shots … note I’m using iPad Air, which has “retina” screen, so would apply to all “modern” iPads (v3, v4, air, air 2). I know it works a little different than simply dragging in side of browser, as that was throwing me too for testing — hence why I always check stuff on the pesky little devil 🙂

okay screen shot 1 shows the way the add coupon and update cart fall kind of funky with the latest iteration of WooCommerce, due to their finally somewhat standardizing their darn buttons. Now everybody’s corrections for that kind of need to be undone.

So:

Seems like I also need to apply the same button 18px fix for the ‘proceed to checkout’ so that’s it’s CLEAR what to do NEXT.

————-
and this is the other thing I want to change to some kind of image icon — or something which is better, even if it’s just a 8 pixel solid color line on left side (e.g., | vs box)

I guess I can edit this in the style.css … but am “suggesting” some kind of (i) or [i] for info glypicon or something that is not so bland — a box that looks like it could be a checkbox, or something doesn’t scream (INFO!).

So, probably easiest thing is
a) how to REMOVE the little box which I think you did purely with CSS box/border in the style, to be “before” the “info” text element from woo.
b) add font awesome icon span to CSS style sheet — and I can load fontawesome fonts — or, if you have something better in your built-in glyph font (the one used for search spyglass, etc.) that we could insert into that slot in the style.css – that would be awesome (as we still say in California!). 🙂

THANK YOU!

I seem to have a fundamental misunderstanding on the syntax for these woo classes … sheesh. I cannot seem to get this to be slightly larger, e.g. 16px:

<div class="wc-proceed-to-checkout">
Proceed to Checkout
</div>

THanks for your help.
Proof once again I’m not as smart as I think I am 🙂

I seem to have a fundamental misunderstanding on the syntax for these woo classes … sheesh. I cannot seem to get this to be slightly larger, e.g. 16px:

<div class="wc-proceed-to-checkout">
a href="https://www.MYSITEINPROGRESS.zzz/store/checkout/" class="checkout-button button alt wc-forward">Proceed to Checkout /a
</div>

THanks for your help.
Proof once again I’m not as smart as I think I am 🙂

HI, Marius
thanks for all of that; truly awesome 🙂

And yes, I did want to make the text larger for the “Proceed to Checkout” button at bottom of the cart page, so that it’s basically more prominent than the update cart, apply coupon buttons (put another way, kind of like having an h2 vs h3 … so people who have not used this checkout can SEE where to go NEXT more clearly).

THANK YOU!!!!!!!!!!!!!!!!!!!!! 🙂

Hi, Marius
okay the two buttons on the cart page look fine for iPad retina “landscape” but still not quite right for portrait. See two new screenshots:

and

I decided to leave the “note” icon alone, as I realized that this is the current defacto WooCommerce icon font element for “note” — and messing with that via FontAwesome also messed with the success icon and other elements, so rather than re-engineer all of that I instead gave each “info” or “success” box a backing color of #f5f5f5 with a thicker bottom border to offset it more clearly from the page.

Thanks again 🙂

Okay… rock and roll, as we say in “the trade” …

it works!

here is my custom stuff for WooCommerce, in case anybody else playing with that and for iPad portrait layout fix.

a.about_paypal {display: none !important;}
.woocommerce .checkout input#place_order {font-size: 18px;}
.woocommerce-page .woocommerce a.button {font-size: 16px;}

• This reply was modified 11 years by simchris.
• This reply was modified 11 years by simchris.

I am also doing this to make the info/success boxes stand out a little bit more

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
border-bottom:1px #4AB915 solid !important;
background-color:#f5f5f5 !important;}