[Resolved] How to change woocommerce button and title colors?

Home Forums Support How to change woocommerce button and title colors?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #283818
    verdi

    Ugly test-site: https://www.minddump.nl/shop/
    Where: Everything that’s green.
    Goal: Changing these colors.

    When GP is deactivated, the colors revert to default black (where it now is green). This would suggest they are controlled by GP.

    In GP’s Customizer Colors Section there is no option for WooCommerce (I expected this though)

    Please help me adjust the colors.

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #283852
    Leo
    Staff
    Customer Support

    Hi there,

    Unfortunately there are no options in Customizer to control Woocommerce element. The color change is probably inheriting from some other settings. Tom is considering adding Woo settings in the future though.

    The best way to customize the button and price is to use some CSS. Check out this post: https://generatepress.com/forums/topic/woocommerce-change-button-and-price-colours-css/#post-179058

    Let me know if you need more help. It would help me if you enable right click on that page 🙂

    #283859
    verdi

    Thanks Leo, I’ll use that CSS snipper for now.

    And really great to hear that Tom is considering more support for WooCommerce. I think a lot of (potential) customers will appreciate that!

    #283892
    Leo
    Staff
    Customer Support

    You’re welcome 🙂 Let me know if you need more assistance in the mean time!

    #284474
    verdi

    Hi Leo,

    Just noticed I didn’t respond to your request to remove right click blocking. It’s gone now:
    https://www.minddump.nl/shop/

    I haven’t used the suggested snippet yet on this test site, but I’m sure it will work just fine.

    #284482
    verdi

    Update: I have used the snippet, but discovered it does not cover all color elements (like the “On sale” label). Also buttons become yellow, a color not find in the snippet. But it’s ok. I’ll figure it out.

    Thanks for your help!

    #284563
    Leo
    Staff
    Customer Support

    – On sale label:

    .woocommerce span.onsale {
        background-color: #000000;
        color: #ffffff;
    }

    – The yellow #FC0 button is added by this part of the snippet:

    .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
    	background-color:#FC0 !important;
    	color:white !important;
    	text-shadow: transparent !important;
    	box-shadow: none;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
    	
    	background-color:#FC0 !important;
    	color:white !important;
    	text-shadow: transparent !important;
    	box-shadow: none;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
    	background-color:#FC0 !important;
    	color:white !important;
    	text-shadow: transparent !important;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
    	background-color:#FC0 !important;
    	box-shadow: none;
    	text-shadow: transparent !important;
    	color:white !important;
    	border-color:#FF9900 !important;
    }

    Hope this helps 🙂

    #284705
    verdi

    This is awesome! Thank you so much Leo!

    Because there is nog other way of doing it: ★ ★ ★ ★ ★ (out of five)

    🙂

    #284709
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

    Could always leave us a quick review if you are up for it 😛
    https://wordpress.org/support/theme/generatepress/reviews/

    #284722
    verdi

    Yes I am! Just left this honest review:

    It has been my default theme for every project since I discovered it. It’s fast, easy to use and very flexible.

    The premium functions are a great addition for a very reasonable price. Being able to select witch add-on’s you want active or not, is a stroke of genius. I also was surprised at the level of Support GeneratePress gives, truly excellent.

    The theme is a perfect marriage with Elementor and also works with WooCommerce, although there is no shopping cart for your menu (yet). When they add that, perfection will be reached!

    #284723
    Leo
    Staff
    Customer Support

    Thanks for taking the time!! We really appreciate it 🙂

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