Customizing the Screen Synchronisation Loading Page
The Screen Synchronisation type is intentionally minimal: a lightweight “loading” screen shown while the plugin synchronises cart state and UI between shops. Because the visual layer is driven by CSS, you can change branding, layout and text quickly — no PHP or templating changes required.
Where to place your custom CSS
WooCommerce Global Cart will automatically use a custom stylesheet if it exists at this exact path on your WordPress installation:
/wp-content/uploads/woogc/sync-page-styles.css
Create that file (or upload it) and place any CSS rules you want there. When the synchronization screen is shown, WPGlobalCart will load this CSS instead of the default styling, allowing you to present a fully branded loading experience.
Example CSS
Below is the exact example you provided (included verbatim). You can copy-paste this into sync-page-styles.css to show a custom logo and text on the synchronization screen:
p {display: none}
p::after { content: 'Your custom text here'; color: #000; font-size: 20px;}
#loader-wrapper { content: url( "https://cdn.overleaf.com/img/ol-brand/overleaf_og_logo.png" ); width: 256px; height: 256px; top: calc( 50% - 128px); left: calc( 50% - 128px);}
This snippet demonstrates a few basic techniques: removing or hiding the default <p> content, injecting text via ::after, and replacing the loader container content with an image. You do not have to keep these exact rules — they are only a starting point.
Quick customization tips
- Use absolute URLs for images (https://…) so remote shops and CDN content load reliably.
- Keep the file small — the synchronization screen should load quickly. Large images will slow synchronization.
- Use !important only when needed. The sync screen may include default styles with high specificity; !important can override them but use sparingly.
- Test on different screen sizes. Positioning with top/left and calc() is fine, but confirm the appearance on mobile and narrow viewports.
- Prefer background images for scaling: background-image, background-size: contain; background-repeat: no-repeat; gives better control than content: url(…) in many cases.
- Control caching — if you update the file and don’t see changes, clear site-level caches (CDN, page cache, object cache) and browser cache. Some setups cache uploads/ content aggressively.
Advanced suggestions
If you want richer visuals, consider these patterns:
- Centered container with responsive scaling
#loader-wrapper { width: 40vmin; height: 40vmin; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("https://example.com/logo.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } - Animated spinner or subtle pulse (pure CSS, no JS)
#loader-wrapper::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(0,0,0,0.2); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.14); } 70% { box-shadow: 0 0 0 20px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
Accessibility & best practices
- Avoid completely hiding textual content that screen readers rely on. For example, display: none removes the element from assistive technologies. If you replace visible text via ::after, screen readers might not announce it. Instead:
- Use visibility: hidden for visual hiding but provide the visible message in an aria-live region or an aria-label.
- Add role=”status” or aria-live=”polite” to the loader container in markup (if you can modify it), or include visible textual content that is not hidden from assistive tech.
- Provide a short textual message such as “Synchronising carts — one moment please” in addition to branding so users with slow connections understand what’s happening.
- Keep contrast and font sizes readable for all users.
Using a single CSS file to brand the synchronization screen keeps the solution lightweight and easy to maintain. Drop your sync-page-styles.css into /wp-content/uploads/woogc/, test across your networked shops, verify accessibility, and keep assets small for the best experience. If you need templates or JavaScript-level changes (for richer preloader logic), those require deeper plugin hooks — but for branding and quick changes, the CSS file is the supported, simplest approach.