Shop Categories

X

WooCommerce single product “ADD TO CART” BUTTON colors

Home Forums Agama Pro WooCommerce single product “ADD TO CART” BUTTON colors

Topic Resolution: Resolved
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #24601
    Ghost
    Participant

    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.

    #24614
    Zex
    Moderator

    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

    #24706
    Ghost
    Participant

    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?

    #24707
    Ghost
    Participant

    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.

    #24781
    Zex
    Moderator

    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

    #24829
    Ghost
    Participant

    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.

    #24837
    Zex
    Moderator

    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

    #24841
    Ghost
    Participant

    Hello Zex!

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

    Regards.

    #24843
    Zex
    Moderator

    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

    #25017
    Ghost
    Participant

    Hi,

    unfortunately that code does not work as well.

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

    Regards.

    #25018
    Zex
    Moderator

    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.

    #25019
    Ghost
    Participant

    That does not work for me too.

    #25020
    Ghost
    Participant

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

    #25021
    Ghost
    Participant

    Deactivating all plugins including woocommerce does not help as well.

    Looks like your help is needed.

    Regards.

    #25055
    Zex
    Moderator

    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

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.