Customizing the payment forms used in the Stripe WooCommerce Extension is a bit different than styling other elements of your site. This is because the payment form is served in an iframe
method on your site — which means that the payment form is actually hosted on a different site hosted by Stripe and it’s embedded on your site.
Using custom CSS
↑ Back to topThe contents of the iframe
will try to mirror the styling of your site as best as possible. However, because of how the payment forms are rendered, targeting them specifically via CSS won’t work as expected.
You can still use CSS, but you will need to target the wrapping div
element to style the following properties of the payment fields:
- Background color
- Margin
- Padding
- Size
Example CSS
↑ Back to top/* Target the Credit Card */
#stripe-card-element {
background: #ffffff !important;
padding: 10px 5px !important;
margin: 5px 0px !important;
}
/* Target the Expiry Date */
#stripe-exp-element {
background: #ffffff !important;
padding: 10px 5px !important;
}
/* Target the CVC Code */
.woocommerce-checkout-review-order #stripe-cvc-element {
background: #ffffff !important;
margin: 5px 0px !important;
padding: 10px 5px !important;
}
Styling all fields simultaneously via CSS
You can use the .wc-stripe-elements-field
selector to target all of those fields simultaneously. Example:
.wc-stripe-elements-field { border-color: #999; }
NOTE: If you have the separate credit card form option disabled in your payments and transactions settings, all credit card fields will be displayed together as a single field on your site’s checkout page. As a result, you only need to use the .wc-stripe-elements-field
selector to target the wrapper of that field.
Styling an individual field via CSS
If you need to apply styles to an individual field, you can use its ID selector:
Field | Selector |
---|---|
Card Number | #stripe-card-element |
Expiry Date | #stripe-exp-element |
Card Code | #stripe-cvc-element |
Example:
#stripe-card-element { margin-bottom: 1em; }
Using PHP filters
↑ 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 will need to provide the necessary styling via PHP. This can be done using the wc_stripe_elements_styling
PHP filter.
Note: The styling details outlined on this page are only available when the new checkout experience is disabled.
Example filter
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.
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
.
Array format
↑ Back to topTo see a description of the expected array, you can review the Stripe documentation here., but the expected array needs to have the following options:
array( [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 topA state is a object that is used to contain information about the component. The following states can be used in the aforementioned array:
State | 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
color
fontFamily
fontSize
fontSmoothing
fontStyle
fontVariant
fontWeight
iconColor
lineHeight
letterSpacing
textAlign
textDecoration
textShadow
textTransform
Pseudo-classes
:disabled
:focus
hover
::-ms-clear
::placeholder
::selection
:-webkit-autofill