Joyn Woocommerce button color

[sam]

Hello,

Using the color customiser, which option controls the color of Woocommerce ‘Add to cart’ and checkout buttons in Joyn? I can not find this for the life of me, and all these buttons appear to be transparent until hovered on.

Any help greatly appreciated.

Many thanks,

Sam.

[Klarity]

Im probably being really stupid but i can’t see where to edit this too?
Sorry i’m a new to this

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.single_add_to_cart_button{
background:#ff0000 !important;
}

.bag-buttons checkout-button{
background:#ff0000 !important;
}

Thanks
Mohammad

[Klarity]

Hi Thanks for this,

Ive changed this setting no problem.
however i would like to know if i can get the css for mouse hover over color for add to basket and checkout
and also the css to match for favorites start and the qty.

Many thanks in advance (great advice so far)

Cheers

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.single_add_to_cart_button:hover{
background:#eee !important;
}

.bag-buttons checkout-button:hover{
background:#eee !important;
}

Thanks
Mohammad

[sam]

Glad to hear it wasn’t only me having these issues!

Thanks for the help on this Mohammed. For everyone else I found this didn’t work for all the buttons, so i had to target them separately as follows:

.single_add_to_cart_button, a.add_to_wishlist, div.quantity, .woocommerce .quantity input.qty, .woocommerce .quantity input {
background:#fff !important;
}

.woocommerce button[type=”submit”], a.checkout-button.button.alt.wc-forward {
background:#fff !important;
}

.woocommerce .cart input[name=”update_cart”], .woocommerce input[name=”apply_coupon”] {
background:#fff !important;
}

Also with noting I keep custom styles in styles.css in a child theme and not all of these will work and override if kept in here – you need to put them in the custom CSS box within your theme options.

Cheers,

S.

[Mohammad – SUPPORT]

Hi,
You can insert the code at custom css of theme option.
Thanks
Mohammad

[beardymouse]

I’ve been having issues with this too.

Sam’s solution worked – but it seems to impact the ‘add to basket’ button on product pages. How do I exclude this button from being impacted in the code?

[Mohammad – SUPPORT]

Hi,
Please find this code :-

.single_add_to_cart_button, a.add_to_wishlist, div.quantity, .woocommerce .quantity input.qty, .woocommerce .quantity input {
background:#fff !important;
}

Change to :-

a.add_to_wishlist, div.quantity, .woocommerce .quantity input.qty, .woocommerce .quantity input {
background:#fff !important;
}

Thanks
Mohammad

[beardymouse]

Thanks Mohammad, that doesn’t seem to have changed anything unfortunately.

[Mohammad – SUPPORT]

Hi,
Please provide me marked screenshot to indicate the issue and specific page url with issue.
Thanks
Mohammad

[beardymouse]

Here’s a URL with the dark Add to Basket button: https://independentmusicpodcast.net/product/arsivplak-%e2%80%8e-moog-edits/

Attached screengrab of the code and marked screengrab of the button

Custom CSS is currently:

a.add_to_wishlist, div.quantity, .woocommerce .quantity input.qty, .woocommerce .quantity input {
background:#fff !important;
}

.woocommerce button[type="submit"], a.checkout-button.button.alt.wc-forward {
background:#000 !important;
}

.woocommerce .cart input[name="update_cart"], .woocommerce input[name="apply_coupon"] {
background:#000 !important;
}

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

@beardymouse – that product link is not working. I cannot see it on your site, do you have another working link?

– David.

[beardymouse]

Hi David,

Here you go: https://independentmusicpodcast.net/product/d-e-d-s-t-i-l-l-d-e-d/

[Kyle – SUPPORT]

Do you have this in your custom css?

.woocommerce button[type="submit"], a.checkout-button.button.alt.wc-forward {
  background: #000 none repeat scroll 0 0 !important;
}

Because that’s what’s forcing the button to be black

– Kyle