Change the background colour on Stripe Woo Commerce Plugin gateway

  • Resolved larzrick27

    (@larzrick27)


    4 years, 7 months ago

    Hey so I’ am having issues changing the background for the actual inline credit card gateway on my woocommerce checkout. It is grey with white text and I would like it to be black as the default text colour on my site is white.

    If you go to my shop – https://assetacademy.co.uk/shop/
    Add a product at checkout, fill in the billing details and then click CONTINUE you will get to the actual stripe gateway and see the issue.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Support dougaitken

    (@dougaitken)

    Automattic Happiness Engineer

    Hey @larzrick27

    Taking a look at the Checkout page on your site, I can see the standard WooCommerce checkout fields rather than any Stripe payment fields. They are grey on white and this is controlled by a CSS style sheet from “fusion styles” – it seems to be a page builder?

    The Stripe payments fields are also using that CSS
    https://assetacademy.co.uk/wp-content/uploads/fusion-styles/299cfdc0e13183c64cbf2c4abc474301.min.css?ver=3.0.1

    #reviews #comments > h2, #wrapper .meta, .fusion-blog-timeline-layout .fusion-timeline-date, .fusion-body #main .tribe-common .tribe-events-c-day-marker__date, .fusion-body .fusion-wrapper #main .tribe-common .tribe-common-h6--min-medium, .fusion-body .quantity, .fusion-body .quantity .minus, .fusion-body .quantity .plus, .fusion-body .quantity .qty, .fusion-body .tribe-block__tickets__registration__tickets__header, .fusion-body .tribe-common .tribe-common-b2, .fusion-body .tribe-common .tribe-common-b3, .fusion-main-menu .fusion-custom-menu-item-contents, .fusion-project-details-tb .project-info h4, .fusion-rollover .price .amount, .post .post-content, .post-content blockquote, .project-content .project-info h4, .review blockquote div, .search input, .sidebar .jtwt, .sidebar .widget .recentcomments, .sidebar .widget_archive li, .sidebar .widget_categories li, .sidebar .widget_layered_nav li, .sidebar .widget_links li, .sidebar .widget_meta li, .sidebar .widget_nav_menu li, .sidebar .widget_pages li, .sidebar .widget_product_categories li, .sidebar .widget_recent_entries li, .title-row, body {
	color: #ffffff;
}

    I used the browser Inspector tool to change that to #000 and the fields changed.

    Aside from that CSS, for styling the Stripe payment fields I can offer some guidance. It will involve custom code but you can style the Stripe billing fields. We have documentation around that here – https://docs.woocommerce.com/document/stripe-styling-fields/

    I hope this helps, have a great day!

    Thanks,

Viewing 1 replies (of 1 total)
  • The topic ‘Change the background colour on Stripe Woo Commerce Plugin gateway’ is closed to new replies.