WooCommerce single product “ADD TO CART” BUTTON colors
- This topic has 17 replies, 2 voices, and was last updated 3 years, 4 months ago by
Zex.
-
AuthorPosts
-
February 19, 2020 at 7:58 pm #24601
Ghost
ParticipantHello,
WooCommerce single product “ADD TO CART” BUTTON color is not from page template.
All other buttons (View Cart, Back to shop) in WooCommerce have RED color from page template as I want them to be.
I would also like my Contact Form Button to be RED color as well – this one you can find on my contact page.
Really appreciate your support.
February 20, 2020 at 5:40 am #24614Zex
ModeratorHello, Ghost!
Insert the following code into Customizing->General->Additional CSS:
.wc-proceed-to-checkout .checkout-button, .single_add_to_cart_button{ background: #DD3333!important; } button.wpforms-submit{ background: #DD3333!important; color:white!important; font-size: 14px; font-weight: 900; }
Regards
February 21, 2020 at 8:27 pm #24706Ghost
ParticipantHello Zex!
That worked like a charm!
Would you be so nice to add code for different color once buttons are hovered by mouse (I want them to be “my template blue” on hover).I am working on products views for WooCommerce and I found that subcategories on sidebar are hidden by default. Whats even worse that arrow graphic does not reveal them it simply does nothing.
I would appreciate if you could make default view for WooCommerce sidebar with subcategories revealed. Specially because there is no breadcrumbs available for categories and subcategories.
What I find missing is that once user pick subcategory that subcategory should be colored in sidebar just like in menu – easier navigation for user.Lastly please tell me is it possible to change side of only WooCommerce sidebar? Currently its on the right side I want to see how it fits on the left and I am not sure is it possible.
Looking forward for your support.
P.S. Any chance for breadcrumbs in categories/subcategories views for blog posts and WooCommerce in future update?
February 21, 2020 at 8:44 pm #24707Ghost
ParticipantHello again 😉
I forgot about sidebar fonts – both for Blog and WooCommerce and category function.
I have tried to manage fonts via theme headings parameters but that did not worked.
Please point me where to change those fonts settings.Sidebar menu has another defect. Clicking category only reveals subcategories but does not change the view for products. I was expecting to see all products from category that was clicked according to theme parameters.
Once again really appreciate your work and help and of course looking forward for your support.
February 24, 2020 at 9:18 am #24781Zex
ModeratorHello, Ghost!
1. To change the Button background color on hovering, add the following codes additionally:
.wc-proceed-to-checkout .checkout-button:hover, .single_add_to_cart_button:hover{ background: #074b88!important; } button.wpforms-submit:hover{ background: #074b88!important; color:white!important; }
2. To keep the list of subcategories open, add the following codes:
.product-categories .cat-has-children ul{ display:block!important; } #secondary .cat-item .children{ border-bottom:none!important; }
3.
To mark the currently active subcategory and modify the font, add the following codes:#secondary .cat-item .children .current-cat{ background-color:#074b88!important; } #secondary .cat-item .children .current-cat a{ color:#FFF!important; font-family: Raleway!important; font-size: 14px!important; }
Change the color codes as you wish.
5. I see you already found the way to change the shop-sidebar side.
6. We plan to add the breadcrumb to the woocommerce pages on some of the next updates (it’s already on our TO-DO list).
7. To modify the Sidebar main category and subcategory fonts, use the next codes:
/*Sidebar Header*/ #secondary .widget a { font-family: Raleway!important; font-size: 18px!important; color: #DD3333!important;} /*Sidebar Subcategory*/ #secondary .cat-item .children a{ font-family: Raleway!important; font-size: 14px!important; color:#074b88!important;}
As for the sidebar opening issue (not showing the main category), I will contact our head developer to check that.
If he finds that there is something needs to change, we’ll do it in one of the following updates.
Regards
February 25, 2020 at 1:47 am #24829Ghost
ParticipantHello Zex!
All codes work great. Only problem is that I am finding more buttons and more headers that are not controlled via theme settings or codes above.
I am looking forward for an answer from head developer (side bar main category not showing).
As for now I can’t find how to adjust H1 fonts for class “entry-title” which shows article titles on main page and blog sites as well. Those should be linked with theme headings settings imo.
Thank you very much for your support.
February 25, 2020 at 8:32 am #24837Zex
ModeratorHello, Ghost!
You should be able to modify this from the Customizing->General->Headings menu (H1).
Please, let me know if for some reason this option didn’t work, and I will give you the right code to change that.
Regards
February 25, 2020 at 11:18 am #24841Ghost
ParticipantHello Zex!
That option does not work. And like you said it should work via that settings.
Regards.
February 25, 2020 at 11:49 am #24843Zex
ModeratorHi,
The Customizer should work… You may have some conflict with other active plugins.
Anyway… here is the code:
.entry-title a { font-family: Raleway; font-size: 25px!important; color: #074b88; }
Regards
February 25, 2020 at 7:17 pm #25017Ghost
ParticipantHi,
unfortunately that code does not work as well.
I can try to disable all plugins that I am using later tonight.
Regards.
February 25, 2020 at 7:22 pm #25018Zex
ModeratorTry next one:
.entry-title a { font-family: Raleway!important; font-size: 25px!important; color: #074b88!important; }
change the color code and size as you need.
February 25, 2020 at 7:26 pm #25019Ghost
ParticipantThat does not work for me too.
February 25, 2020 at 7:33 pm #25020Ghost
ParticipantI have disabled all plugins not related with theme and still no change in article header…
WooCommerce plugins are active.February 25, 2020 at 7:34 pm #25021Ghost
ParticipantDeactivating all plugins including woocommerce does not help as well.
Looks like your help is needed.
Regards.
February 26, 2020 at 8:22 am #25055Zex
ModeratorHello, Ghost!
From what I see, you have inserted the code and the code works. The problem is that you haven’t changed anything in the code values, e.g. The size or color of the letters, so the values are the same as the ones you already have, so no difference is seen. https://prnt.sc/r7s4f9
Try to insert the following code – replace the code I gave you earlier (it’s the same code as the one you inserted just changed the color code and font size):
.entry-title a { font-family: Raleway!important; font-size: 35px!important; color: #DD3333!important; }
Regards
-
AuthorPosts
- You must be logged in to reply to this topic.