1. Home
  2. Advanced
  3. Adding Custom CSS to WP Simple Pay

Adding Custom CSS to WP Simple Pay

Do you need to style your WP Simple Pay payment forms with custom CSS? There are a few ways to add custom CSS to your WordPress site for your forms and other page elements.

  1. Edit your theme’s stylesheet file directly (usually style.css). Be cautious of any theme updates that will overwrite your changes though, which is why we recommend #2 or #3.
  2. Add a separate CSS file to your theme and use the wp_enqueue_style function to reference it in your functions.php or a separate custom plugin.
  3. Add CSS to your theme’s customizations in the WP admin. Go to Appearance → Customize, then Additional CSS.

If you need to dequeue the plugin styles completely from some pages, see our code snippet library.

At this time we don’t have a CSS style guide for WP Simple Pay payment forms, so the best way to find the class and ID names you need to modify is to inspect the page elements using your browser’s developer tools.

Here’s a great guide for getting started using this method: Basics of Inspect Element: Customizing WordPress for DIY Users

WP Simple Pay form element CSS classes and IDs tend to start with simpay-, but if you need some additional classes added please let us know.

Note that you can also create hidden fields using CSS if you’d like to include hidden data with your Stripe charges and subscriptions.

You’d simply add custom text fields to your payment forms, find their class or ID names as described above, then hide them using the CSS rule display: none;.

Here’s an example where the form ID is 83 and text field ID is 4:

#simpay-form-83 #simpay-text-4 { display: none; }

Updated on March 23, 2018

Was this article helpful?

Related Articles