How do I change the Add to Cart button from green to another color?

I'm using the latest version of MP and have a theme from Solostream.

I'm sure changing the button color is possible - just need guidance on how to do it.

Thanks,
Lori

  • PC
    • WPMU DEV Initiate

    Hello Lori,

    Greetings and thanks for posting on the forums.

    We can change the color using CSS however I will need to check which is the right element to apply the CSS to.

    Can you please provide me a direct link to the page where I can see the green button as you stated in the title ?

    Cheers
    PC
    Sales &Support

  • PC
    • WPMU DEV Initiate

    Hello Lori,

    Greetings and thanks for posting back.

    Its pretty easy to findout the right element with the right tools.

    You can use Firebug from firefox tool in order to do that.

    Then you can use the plugin like : http://wordpress.org/plugins/imporved-simpler-css/ to add your custom CSS

    #mp_product_list input.mp_button_addcart, .type-product input.mp_button_addcart, input.mp_cart_direct_checkout_link, #mp_shipping_submit, form.mp_buy_form .mp_adding_to_cart, .mp_cart_direct_checkout_link, .mp_link_buynow
    {background-image: -webkit-linear-gradient(bottom, rgb(211, 93, 37) 0%, rgb(153, 51, 51) 100%) !important}

    Should make it look like the below screenshot. You can add the rgb values to achieve the desired effects.

    I hope that helps. Please feel free to ask if you have more questions on the same.

    Cheers
    PC
    Sales &Support

  • lori_sawaya7
    • Flash Drive

    I just realized that the buttons changed only on the Store>Products page but not the actual product page.

    The button at the bottom of the product page (see link) is the default and I added another at the top using a short code.

    Will you please tell me how to change these buttons so they match the other buttons.

    I think consistency for call to actions is super important for decent conversions.

    Thanks!

    http://thelandofcolor.com/store/products/color-secrets-unlocked-%E2%80%A2-color-psychology-and-meaning/

  • PC
    • WPMU DEV Initiate

    Hey Lori,

    Thanks for posting back.

    Can you try and add the below code and see if that helps ?

    form.mp_buy_form input.mp_button_addcart{background-image: -webkit-linear-gradient(bottom, rgb(208, 47, 114) 0%, rgb(208, 47, 114) 100%) !important}

    Cheers
    PC
    Sales &Support

  • PC
    • WPMU DEV Initiate

    Works Beautifully!

    Yay :slight_smile:

    Would it be too much to ask to make the font white and bolder?

    Umm, I will charge you $1million for that :stuck_out_tongue: lol

    Here we go :

    form.mp_buy_form input.mp_button_addcart {
    font-weight: bold;
    color: white;}

    Cheers
    PC
    Sales &Support

  • lori_sawaya7
    • Flash Drive

    Uh-oh. A little problem. The button is not showing the right color in FireFox and Explorer.

    FireFox - light gray
    Explorer - light gray with a blue outline

    Chrome and Safari - perfect, no problem.

    Any ideas how to correct this? I noticed in my stats that a lot of my visitors do use FireFox in particular. Here's the link:

    http://thelandofcolor.com/store/products/color-secrets-unlocked-%E2%80%A2-color-psychology-and-meaning/

    Thanks!

  • PC
    • WPMU DEV Initiate

    Hey Lori,

    Sorry I missed your post

    Any ideas how to correct this? I noticed in my stats that a lot of my visitors do use FireFox in particular. Here's the link:

    Previously I asked you to add the below CSS

    form.mp_buy_form input.mp_button_addcart{background-image: -webkit-linear-gradient(bottom, rgb(208, 47, 114) 0%, rgb(208, 47, 114) 100%) !important}

    Can you change that CSS to the below code and see if that works ?

    form.mp_buy_form input.mp_button_addcart {background: #D02F72 !important}

    Please advise.

    Cheers
    PC
    Sales &Support

  • jeff arnold
    • The Incredible Code Injector

    I, too, was looking to change the color of the add to cart buttons. Found this and it worked great.

    I am using the uDesign theme, and since it's so popular, I thought that I would add that to make this work with that theme, you need to:
    -- Go to the uDesign options and 'enable Style.css' - then save
    -- Then, under "Appearance -- Editor" go to the 'style.css' file under "uDesign" file and add the code listed above.

    Jeff

  • PC
    • WPMU DEV Initiate

    Hello Jeff,

    Sorry for the delay in acknowledgement.

    Glad to see that this helped you get this done. Thanks for sharing it for your specific theme :slight_smile:

    -- Then, under "Appearance -- Editor" go to the 'style.css' file under "uDesign" file and add the code listed above.

    That would get the style.css overwritten whenever there is a code update in the theme, so the best way is to either create a Child Theme or use a plugin like : http://wordpress.org/plugins/imporved-simpler-css/ to add the CSS externally and keep it safe from upgrades.

    Cheers, PC

  • Stephen
    • Site Builder, Child of Zeus

    Hello,

    I followed this thread because I had a similar issue. I followed the CSS advice in this forum to change the color. However, the color of the shadow/border is still the original green color. What is the CSS code for changing that element as well?

    Thanks

  • lori_sawaya7
    • Flash Drive

    Below is the code that's working ok for me. I now have "The 7" theme.

    There seems to be a slight green shadow-line above the button. And can't change the color of the letters. Changing "white" in the code doesn't do anything.

    MarketPress should have options within the plugin to customize the button - should be able to choose "Add to Cart" or "Buy Now" as well as background and letter colors.

    #mp_product_list input.mp_button_addcart, .type-product input.mp_button_addcart, input.mp_cart_direct_checkout_link, #mp_shipping_submit, form.mp_buy_form .mp_adding_to_cart, .mp_cart_direct_checkout_link, .mp_link_buynow
    {background-image: -webkit-linear-gradient(bottom, rgb(255, 149, 1) 0%, rgb(255, 149, 1) 100%) !important}
    form.mp_buy_form input.mp_button_addcart {background: #FF9501 !important}
    form.mp_buy_form input.mp_button_addcart {
    font-weight: bold;
    color: white;}
  • Stephen
    • Site Builder, Child of Zeus

    @lori_sawaya7 - Thanks for that bit of code!

    I'm now one step closer to getting the button the way that I want it, but have the same issue with the green shadow line.

    I agree that being able to edit these features out of the box would be a great addition to this plugin.

  • PC
    • WPMU DEV Initiate

    Hey there Stephen,

    Thanks for posting back on this thread. We strongly recommend creating a new thread for the issues so that we can assist you for your issue separately and in a faster way :slight_smile:

    That helps us follow up better and provide a faster resolution.

    If you are still facing any issue, kindly create a new thread and we will be around to assist :slight_smile:

    Also, please include a link to your site so that we can suggest the CSS accordingly.

    Cheers, PC

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.