The Stripe payment gateway for WooCommerce uses Stripe Elements to display credit card fields on your checkout page. This gives you the flexibility to customize your checkout experience by styling the credit card fields according to your theme and preferences.
All fields are displayed within <iframe>
elements to provide a secure experience for customers. Because the content of iframes is technically not a part of your page, it’s not possible to directly apply styles to those components from your style sheet and must be done another way.
Note: The styling details outlined on this page are only available when the new checkout experience is disabled.
Pure CSS
↑ Back to topStripe Elements have as little styling as possible.
Out of the box, fields only display text and nothing more. That means all other styling is immediately accessible through CSS, including background colors, borders, padding, shadows, etc.
Standard layout
↑ Back to topIn normal mode, you will have three separate fields for each detail of the credit card.
Styling all fields simultaneously
You can use the .wc-stripe-elements-field
selector to target all of those fields simultaneously. Example:
.wc-stripe-elements-field { border-color: #999; }
Styling an individual field
If you need to apply styles to an individual field, you can use its identifier:
Field | Selector |
---|---|
Card Number | #stripe-card-element |
Expiry Date | #stripe-exp-element |
Card Code | #stripe-cvc-element |
Example:
#stripe-card-element { margin-bottom: 1em; }
Inline credit card form
↑ Back to topIf you enabled Inline Credit Card Form in Stripe settings, all credit card fields will be displayed together as a single field on your page. In this case, you only need to use .wc-stripe-elements-field
selector to target the wrapper of that field.
Using a filter
↑ Back to topThe CSS selectors above allow you to modify the style of field wrappers. However, if you need to also change something within the actual input, you need to provide the necessary styles to Stripe.
This can be done using the wc_stripe_elements_styling
PHP filter.
Example:
<?php function my_theme_modify_stripe_fields_styles( $styles ) { return array( 'base' => array( 'iconColor' => '#666EE8', 'color' => '#31325F', 'fontSize' => '15px', '::placeholder' => array( 'color' => '#CFD7E0', ), ), ); } add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );
Keep in mind:
- Styles you see in the example are default styles used by the extension.
- As soon as you provide custom styles, the extension will ignore its default ones. To avoid this, copy the example and build on it.
- All styles are applied through JavaScript, so you need to use JavaScript property names instead of pure CSS. For example, instead of
font-size
you should usefontSize
.
To see a description of the expected array, go to: Stripe – Element Options. As explained on that page, you need to have the following options.
Format
↑ Back to toparray( [state] => array( [property] => [value], [pseudoClass] => array( [property] => [value], ), ), )
All custom styles need to be within a nested array, containing:
- State as top-level item
- Properties and their values as second level items
- Pseudo-classes for a specific state as second level items, and their properties as third-level ones
States
↑ Back to topState | Description |
---|---|
base | Base style, all other variants inherit from this style |
complete | Applied when the Element has valid input |
empty | Applied when the Element has no customer input |
invalid | Applied when the element contains invalid values |
Allowed properties
↑ Back to topcolor
, fontFamily
, fontSize
, fontSmoothing
, fontStyle
, fontVariant
, fontWeight
, iconColor
, lineHeight
, letterSpacing
, textAlign
, textDecoration
, textShadow
, and textTransform
Pseudo-classes
↑ Back to tophover
, :focus
, ::placeholder
, ::selection
, :-webkit-autofill
, :disabled
, and ::-ms-clear
Example
function my_theme_modify_stripe_fields_styles( $styles ) { return array( 'base' => array( 'color' => '#666666', 'fontSize' => '15px', '::placeholder' => array( 'color' => '#999999', ), ), 'invalid' => array( 'color' => '#ff7500', ), ); } add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );
This example changes:
- Text color and font size in all states.
- Text color of placeholders in normal state through the
::placeholder
pseudo-class. - Text color of fields when they are invalid.