Altitude Pro Buttons with Woo Commerce

[beriuqam]

I was hoping someone could help me with my buttons on my site. Originally I wanted to change the wording of the buttons for my woo commerce products. It's too long and it overlaps other buttons when the width of the user screen is too narrow. It's annoying. I've tried changing the wording or changing the font size, but nothing is "sticking". I spoke to app developers and various forums and it seems to be an issue with loading priority. They say my theme's CSS has priority, which contradicts what my brain is thinking.

Looking at my site, the buttons for the Altitude Pro parts is formatted differently from the Woo Commerce parts. So how can my theme have style priority if the Woo Commerce buttons don't match the theme's buttons? I don't get it. I think that if I could get the Woo Commerce buttons to look like my Altitude Pro buttons - I wouldn't need to change the wording and font size for Woo Commerce. Which would be a double win because then it would actually look better anyway.

While I've been able to change many things on my site through help in forums, this is the one thing where the explanation and "how to fix" really seems to go over my head. If you know of a fix, can you give me a step by step "for dummies" guide on how to make my buttons better. Either how to change the font size/wording on Woo Commerce buttons, or best, how to make the Woo Commerce button style just match the themes style. I do have the Genesis for Woo Commerce or whatever plug-in and a "Change your Woo Commerce button" plug-in, but neither seems to change what's happening.

http://kidstravelbooks.com

[Susan]

You mean something like this:

(larger, clickable image here)

To do this, I added this code to the bottom of your stylesheet (grabbing the code from your button's styling, and adding in the declaration that you wanted it to apply to your WooCommerce buttons; you may need to adjust further):

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background-color: #22a1c4;
    border: 2px solid #22a1c4;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 15px 25px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    white-space: normal;
    width: auto;
}

[beriuqam]

That looks good! Do I add it to the theme's style sheet or the widget's style sheet? I'll give it a go.

Thank you!

[Susan]

Add it to your theme's stylesheet.

[beriuqam]

OMG!!

Yes!!!! It worked. Thank you so much!!!!

[Susan]

You are welcome 🙂

I will close this as resolved.

[Author]

Posts