WooCommerce single product “ADD TO CART” BUTTON colors

[Ghost]

Hello,

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.

[Zex]

Hello, 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

[Ghost]

Hello 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?

[Ghost]

Hello 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.

[Zex]

Hello, 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

[Ghost]

Hello 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.

[Zex]

Hello, Ghost!

You should be able to modify this from the Customizing->General->Headings menu (H1).

https://prnt.sc/r793xy

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

[Ghost]

Hello Zex!

That option does not work. And like you said it should work via that settings.

Regards.

[Zex]

Hi,

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

[Ghost]

Hi,

unfortunately that code does not work as well.

I can try to disable all plugins that I am using later tonight.

Regards.

[Zex]

Try 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.

[Ghost]

That does not work for me too.

[Ghost]

I have disabled all plugins not related with theme and still no change in article header…
WooCommerce plugins are active.

[Ghost]

Deactivating all plugins including woocommerce does not help as well.

Looks like your help is needed.

Regards.

[Zex]

Hello, 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;
}

https://prnt.sc/r7s782

Regards

[Author]

Posts