Return to previous page

Change colour of add to cart and give wishlist an border

This topic has 9 replies, 4 voices, and was last updated 10 years, 9 months ago ago by Stan Russell

Lily

Participant

February 25, 2015 at 17:25

Hi,

I would like to know the best way to

1) Change the colour of the ‘Add to Cart’ button on the product pages
2) How to make the ‘Add to Wishlist’ the same size button but retaining the white background and thin black line border
3) On category pages I would like to change the colour of the font and background of the Add to Cart and ‘Select Options’

See example pages below

Please, contact administrator
for this information.

#45435 Copied

8 Answers
Robert Hall

Participant

February 25, 2015 at 17:37
Hello,

Please add following code into custom.css:
1)

.product-info .single_add_to_cart_button{ background:f00; color:#fff; }

2)

.wishlist-btn-container.with-styles .add_to_wishlist{ margin-top: 0px; border: 1px solid #000; padding: 16px 60px; margin-left: 10px; }

3)

.etheme_add_to_cart_button{ background:f00; color:#fff; }

Regards,
Robert Hall.
#45438 Copied
Lily

Participant

March 10, 2015 at 12:28

Sorry I thought I answered this post.

But there appears to be a jolying/up and down motion when I go to product pages.

See screenscast – It only happens on product pages with options.

Please, contact administrator
for this information.

#48490 Copied
Eva Kemp

Participant

March 10, 2015 at 16:11
Hello,

Try to use this code in custom.css:

.single-product-page .product-info .variations_form .button { font-family: Montserrat; font-size: 14px; }

Thank you.
Regards,
Eva Kemp.
#48599 Copied
Lily

Participant

March 11, 2015 at 19:40

Hi,

Sorry I thinks are getting confusing,

I have added the CSS from post 48596

So I now have this:

.product-info .single_add_to_cart_button{
background:f00;
color:#fff;
}

.wishlist-btn-container.with-styles .add_to_wishlist{
margin-top: 0px;
border: 1px solid #000;
padding: 10px 30px;
margin-left: 10px;
text-transform: uppercase;
font-size: 12px;
}

.etheme_add_to_cart_button{
background:f00;
color:black;

}

.variations_button .button{
font-size: 15px;
padding: 8px 32px;
}

.single-product-page .product-info .variations_form .button {
font-family: Montserrat;
font-size: 14px;
}

.single-product-page .product-info .single_add_to_cart_button {
font-size: 12px !important;
font-family: Montserrat !important;
}

1) Single products seem to be ok. See URL below
2) variable product seems to have a smaller ‘Add to Cart’ see URL below – I tried changing Font sizes on various CSS elements, maybe I missed the one I should have changed, but nothing seemed to work.
3) The Jumping around still occurs on Variable products – See URL for variable product below as example
4) not sure if this is connected, but on another product the Wishlist seems to have disappeared. This may have something to do with the Wishlist issue I have at the moment and nothing to do with this.

Many thanks

Please, contact administrator
for this information.

#48903 Copied

Eva Kemp

Participant

March 12, 2015 at 10:05

Hello,

You’ve already provided with the code for buttons in the other topic. Please check it.
Please don’t duplicate your queries in different topics to avoid misunderstanding.

Thank you.
Regards,
Eva Kemp.

#48999 Copied

Lily

Participant

March 14, 2015 at 17:11

Please re-read the query, I am not duplicating, what I am stating is with the CSS provided the boxes ‘Add to Cart’ and ‘add to Wichlist’ are not the same size.

And along with that there is an issue with ‘Jumping around’

So please check the links I am provided and the questions I have asked.

And just to stop futher confusion, as I stated I have stopped using post 48596

#49637 Copied

Lily

Participant

March 14, 2015 at 17:16

Ok I see what you have done, then please close this post. Thank You

#49638 Copied

Stan Russell

Participant

March 16, 2015 at 09:51

Hello,
you are welcome!

Regards,
Stan Russell.

#49760 Copied
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘change colour of add to cart and give wishlist an border’' has been successfully resolved, and the topic is now closed for further responses

Change colour of add to cart and give wishlist an border

Explore our best WordPress WooCommerce Themes collection