SSP Documentation
Overview
SSP High Converting Checkout is a professional WooCommerce checkout solution designed to maximize conversions. It features customizable fields with drag-and-drop reordering, automatic ZIP code lookup, trust badges, flexible account creation, and comprehensive styling options.
| Admin Location | WooCommerce → High Converting Checkout |
|---|---|
| Shortcode | [high_converting_checkout] |
| Requirements | WooCommerce 5.0+, PHP 7.4+ |
Checkout Fields
Manage which fields appear on checkout, their order, labels, placeholders, and required status.
Active Fields
- Drag the handle (☰) to reorder fields.
- Set a Custom Label to override the default.
- Add Placeholder text inside the input.
- Toggle Required on or off.
- Click Disable to move a field to Available.
Available Fields
- Click Enable to add a field to checkout.
- Core fields: First Name, Last Name, Email, ZIP, Address, City, State, Country, Phone, Company.
- Extra fields: VAT Number, Order Notes, Birthday.
Custom Fields
Add your own fields using the form at the bottom of the Fields tab:
- Enter a Field Key (auto-prefixed with
billing_). - Enter a Label and choose a Type (text, email, tel, textarea, checkbox, date, number).
- Optionally set a placeholder and mark as required.
- Click Add Field. Custom fields can be deleted anytime.
| Storage | Custom fields save to order meta as _billing_yourkey and display in admin order details. |
|---|---|
| Validation | Required custom fields are validated at checkout; errors show if empty. |
ZIP Auto-Fill
When enabled, entering a ZIP/postal code automatically populates City, State, and Country fields using the Zippopotam.us API.
- Works for US, CA, UK, DE, and 60+ other countries.
- Triggers after 3+ characters with a 500ms debounce.
- Country is auto-detected from the response.
| Enable/Disable | Features tab → ZIP code auto-fill checkbox. |
|---|---|
| API | Free public API, no key required. Requests are client-side only. |
Styling Options
Customize colors and dimensions in the Style Checkout tab.
Colors
| Primary Color | Headings, accents, focus rings. |
|---|---|
| Button Background | Place Order button fill. |
| Button Hover | Button color on hover. |
| Button Text | Button label color. |
Dimensions
| Input Corners | Border-radius for inputs (px). |
|---|---|
| Button Corners | Border-radius for Place Order button (px). |
| Button Text | Custom label for Place Order button (e.g., “Complete Purchase”). |
Trust Badge
- Enable/disable the badge that appears above the payment section.
- Customize the badge text (supports emoji).
- Default:
🔒 Secure Checkout - Your information is protected with 256-bit SSL encryption
Features
Toggle checkout behaviors in the Features tab.
Checkout Options
- Hide coupon field – Remove distraction if not running promos.
- Hide order notes – Cleaner form.
- Hide privacy policy text – Less clutter below payment.
- Allow guest checkout – Don’t force account creation.
- ZIP code auto-fill – Enable postal lookup.
Account Creation
Control how customer accounts are created at checkout.
| Disabled | No account creation; guests only. |
|---|---|
| Auto-Create | Accounts are created automatically. Password is emailed to customer. |
| Customer Choice | Checkbox lets customer opt-in. If checked, password fields appear. |
How It Works
- Email is validated to ensure no existing account.
- Username is generated from email prefix (with random suffix if taken).
- Billing address is copied to user meta.
- Customer is logged in immediately after order.
- Confirmation email is sent with login details.
Shortcode
The plugin automatically enhances the default WooCommerce checkout. For custom checkout pages, use the shortcode:
[high_converting_checkout]
How to Use
- Create a new Page (Pages → Add New).
- Title it “Checkout” or “Complete Your Order”.
- Paste
[high_converting_checkout]in the content. - Publish the page.
Page Builders
In Elementor, Divi, or similar, add a “Shortcode” widget and paste the shortcode.
Custom CSS
Add your own styles in the Custom CSS tab.
Disable Built-in Styles
Check Disable built-in styles to remove all default plugin CSS. Only your custom CSS (and WooCommerce defaults) will apply.
CSS Editor
- Syntax highlighting via CodeMirror.
- CSS is added inline after the built-in styles (if enabled).
- Target the checkout form with
.woocommerce-checkoutorform.checkout.
/* Example: Make inputs taller */
.woocommerce-checkout input[type="text"] {
min-height: 56px !important;
}
FAQ & Troubleshooting
ZIP lookup not working?
- Ensure ZIP code auto-fill is enabled in Features.
- Check browser console for blocked requests (ad blockers may interfere).
- Some postal codes have no data in the API.
Styles not applying?
- Clear any caching plugins.
- Check if your theme overrides checkout CSS with high specificity.
- Use
!importantin Custom CSS if needed.
Account not created?
- Ensure account creation mode isn’t set to “Disabled”.
- Check if email already exists in WordPress.
- Verify passwords match (Customer Choice mode).
Custom field not saving?
- Make sure the field is Enabled.
- Check order meta in admin for
_billing_yourkey. - Ensure field key has no spaces or special characters.
Compatible with my theme?
Works with any theme using standard WooCommerce checkout hooks. If your theme heavily customizes checkout, use the Disable built-in styles option and write custom CSS.