The customer portal UI can be customised through CSS overrides and the standard WooCommerce template override system.

📌 What This Extension Adds: Subscriptions Pro loads portal.css and portal.js on My Account pages. All selectors, classes, and AJAX hooks listed here are Subscriptions Pro additions.

CSS Customisation #

The portal stylesheet is located at assets/css/portal.css. To override styles without modifying the plugin file, add your custom CSS to your theme’s stylesheet or via WP Admin → Appearance → Customise → Additional CSS.

Key CSS classes:

JavaScript Hooks #

The portal JavaScript exposes a global object window.DmsiSpPortal with the following properties you can use to hook into portal events:

“javascript // Fired after a pause is successfully submitted window.DmsiSpPortal.onPauseSuccess = function(subscriptionId) { ... }

// Fired after a resume is successfully submitted window.DmsiSpPortal.onResumeSuccess = function(subscriptionId) { ... }

// Fired after a payment retry attempt window.DmsiSpPortal.onRetryComplete = function(subscriptionId, success) { ... }

`

Template Overrides #

The portal HTML templates are rendered via PHP template files in templates/portal/. Override any template by copying it to your-theme/woocommerce/portal/.

—

## Next Steps

• Plan Switch Customer Experience — Detailed walkthrough of the plan switching UI.
• Customer Pause Experience — Detailed walkthrough of the pause UI.
• Admin Settings — Configure which portal features are enabled.