Return to previous page

Woocommerce buttons - by ljesha - on WordPress WooCommerce support

This topic has 9 replies, 2 voices, and was last updated 9 years, 6 months ago ago by Eva Kemp

ljesha

Participant

April 28, 2015 at 17:05

Hello, I would like to ask for some quick teaching so I am less bother to you.
I would like to change the style of buttons in woocommerce.
I have learned that with google’s “inspect element” I can see the name of the element, and I was able to change some things but I’m having trouble between static and mouse hover.
The “li a/ li a:hover”seems to work only for text, not buttons.
I know this is beginners stuff but I had such great support on this forum so I thought this is better than asking for the code for each change I need to make to those buttons.
Thank you in advance

#60350 Copied

8 Answers
Eva Kemp

Support staff

April 28, 2015 at 18:25
Hello,

If you want to change background color for “Add to Cart” button you need use this code:
```
.etheme_add_to_cart_button {
 background-color: red !important;
}
.etheme_add_to_cart_button:hover {
  background-color: balck !important;
}
```
Regards,
Eva Kemp.
#60374 Copied
ljesha

Participant

May 5, 2015 at 16:51

Ok, thank you,
what is the code for buttons on the cart hover-menu that shows when you are with mouse over cart icon in header?

#61820 Copied

ljesha

Participant

May 5, 2015 at 17:18

How do I change the color of list and grid switch-boxes on shop page?
Also, how do I remove breadcrumbs completely from single product pages?

#61822 Copied
Eva Kemp

Support staff

May 5, 2015 at 17:59
Hello,

Could you please show a screenshot what you want to change in cart widget in the header?
Please add this code in custom.css file to change color for grid/list icons:
```
.filter-wrap .view-switcher .switchToGrid .icon-th-large::before, .filter-wrap .view-switcher .switchToList .icon-th-list::before {
 color: green !important;
}
```
To remove breadcrumbs use this code:
.woocommerce-breadcrumb {display: none !important;}

Regards,
Eva Kemp.
#61829 Copied
ljesha

Participant

May 5, 2015 at 19:11

Thank you,I would like to change the cart button and checkout button in cart widget in header.
Also, how do I remove/change hover effect on products on shop page – the “quick view” semi transparent baner that shows on mouse hover.

#61848 Copied
Eva Kemp

Support staff

May 5, 2015 at 19:58
Hello,

Use this code for “Checkout” and “View Cart” buttons in the header:
```
.shopping-container .btn.border-grey:hover {
background-color: green !important;
}
.shopping-container .btn.filled.big:hover {
background-color: green !important;
}
```
And this code for “Quick view” hover effect:
```
.show-quickly:hover {
  color: #367400 !important;
}
```
Regards,
Eva Kemp.
#61868 Copied
ljesha

Participant

May 19, 2015 at 16:00

How do I change the color of round arrow buttons that show in the corner of owl image gallery?
Thank you, best regards

#64801 Copied

Eva Kemp

Support staff

May 19, 2015 at 16:20

Hello,

Could you please show a screenshot what arrows you want to modify?
You can upload your screenshot to some image storage, for example http://imgur.com/ .

Regards,
Eva Kemp.

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