WebSync Team

<p>WebSync Checkout & Cart for Elementor gives you full visual control over the two most important WooCommerce pages — <strong>Checkout and Cart</strong>.</p>
<p>Replace the default WooCommerce checkout and cart layouts with beautifully designed, fully customizable Elementor widgets that integrate seamlessly with your Elementor-built website, without breaking WooCommerce functionality.</p>
<p>This plugin is perfect for store owners who want a modern, conversion-focused checkout and cart experience using Elementor.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Checkout Widget</strong> – Fully customizable WooCommerce checkout built with Elementor</li>
<li><strong>Cart Widget</strong> – Custom WooCommerce cart with modern layout and styling controls</li>
<li><strong>Full Design Control</strong> – Style every part of checkout and cart using Elementor</li>
<li><strong>Responsive Layouts</strong> – Optimized for desktop, tablet, and mobile</li>
<li><strong>Modern UI</strong> – Clean, professional cart and checkout interfaces</li>
<li><strong>Performance Optimized</strong> – Lightweight and WooCommerce-safe implementation</li>
<li><strong>Easy Setup</strong> – Drag & drop widgets into Elementor, no coding required</li>
</ul>
<h4>Widgets Included</h4>
<ul>
<li><strong>WooCommerce Checkout</strong></li>
<li><strong>WooCommerce Cart</strong></li>
</ul>
<h4>Checkout Layout Options</h4>
<ul>
<li><strong>One Column Layout</strong> – Mobile-first stacked checkout</li>
<li><strong>Two Column Layout</strong> – Forms on the left, order summary on the right</li>
<li><strong>Sticky Order Summary</strong> – Keeps order review visible while scrolling</li>
<li><strong>Custom Spacing Controls</strong> – Padding, gaps, and margins</li>
</ul>
<h4>Cart Features</h4>
<ul>
<li><strong>Custom Cart Table Layout</strong></li>
<li><strong>Optional Coupon Form</strong></li>
<li><strong>Continue Shopping Button</strong></li>
<li><strong>Cross-Sells Display</strong> (with column and limit controls)</li>
<li><strong>Fully AJAX Compatible</strong></li>
<li><strong>Empty Cart State Styling</strong></li>
</ul>
<h4>Style Controls</h4>
<ul>
<li><strong>Container Styles</strong> – Backgrounds, padding, borders, shadows</li>
<li><strong>Section Styles</strong> – Billing, shipping, order summary, cart totals</li>
<li><strong>Typography Controls</strong> – Fonts, sizes, colors, spacing</li>
<li><strong>Button Styles</strong> – Checkout, update cart, apply coupon, continue shopping</li>
<li><strong>Field Styles</strong> – Inputs, labels, validation states</li>
<li><strong>Table Styles</strong> – Cart and order summary tables</li>
</ul>
<h3>Data Collection (Usage Statistics)</h3>
<p>To help improve the plugin, anonymous usage statistics are collected:</p>
<p><strong>On Activation and deactivation:</strong><br />
* Plugin name, slug and version<br />
* Whether it’s an update or new installation</p>
<p><strong>On Deactivation (Optional):</strong><br />
* Reason for deactivation (if you choose to provide it)<br />
* Optional comments about your experience</p>
<p><strong>Data usage:</strong><br />
* Used solely to improve plugin features and user experience<br />
* Anonymous aggregated statistics only<br />
* Never shared or sold to third parties</p>
<p>You can review our privacy policy at https://websync.tech/privacy-policy/</p>
<h3>Support</h3>
<p>For support:<br />
1. Review the FAQ section<br />
2. Visit https://websync.tech/contact/<br />
3. Open an issue on GitHub</p>
<p>Please include:<br />
* WordPress version<br />
* Elementor version<br />
* WooCommerce version<br />
* PHP version<br />
* Error messages (if any)</p>
<h3>License</h3>
<p>This plugin is licensed under the GPL v2 or later.</p>
<h3>Credits</h3>
<ul>
<li>Built for the Elementor community</li>
<li>Powered by WooCommerce</li>
<li>Thanks to all contributors and testers</li>
</ul>
<h3>A Note on Compatibility</h3>
<p>Required:<br />
* WordPress 5.0+<br />
* Elementor Free 3.0+<br />
* WooCommerce 4.0+<br />
* PHP 7.4+</p>
<p>Always test updates on a staging site before deploying to production.</p>


WebSync Checkout for Elementor

Custom Elementor widgets that replace the default WooCommerce Checkout and Cart with fully customizable, modern layouts.

ioroot.com

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/8B6TxXcDt2E?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p><strong>Class Bookings with Stripe</strong> helps studios, instructors, and venues sell places on scheduled classes using <strong>Stripe Checkout</strong> (Stripe’s hosted payment page). Customers pick a date, choose seats, and pay securely without WooCommerce or a custom cart.</p>
<p>The plugin uses <strong>Advanced Custom Fields (ACF) Free</strong> (built in). Each bookable class has schedule, price, capacity, and optional extras. Embed the form with a shortcode or Elementor widget. When a customer clicks <strong>Book & pay with Stripe</strong>, the plugin creates a soft-hold, opens a Stripe Checkout Session, and redirects to Stripe. A signed webhook marks the booking paid and can send customer and admin emails.</p>
<h4>Video tutorials — get started</h4>
<p><strong>New to the plugin?</strong> Watch these first:</p>
<ul>
<li><a href="https://youtu.be/8B6TxXcDt2E" rel="nofollow ugc">Quick start: install, API keys & first booking</a></li>
<li><a href="https://youtu.be/7HBBGPZfZL0" rel="nofollow ugc">Full installation & setup guide</a></li>
</ul>
<h4>Features</h4>
<ul>
<li><strong>Classes</strong> — Weekly recurring classes, one-off events, or external booking links.</li>
<li><strong>Capacity</strong> — Per class and date; counts paid bookings and active soft-holds.</li>
<li><strong>Cancelled dates</strong> — Block individual dates without disabling the class.</li>
<li><strong>Bookings</strong> — Pending, paid, and expired statuses with Stripe session references.</li>
<li><strong>Reports</strong> — Yearly charts, upcoming attendance, and guest lists.</li>
<li><strong>Form extras</strong> — Waiver, Mailchimp opt-in, and custom ACF fields.</li>
<li><strong>Emails</strong> — Customer and admin templates with merge tags via <code>wp_mail()</code>.</li>
<li><strong>Result pages</strong> — Booking Confirmed, Cancelled, and Error pages on activation.</li>
</ul>
<h4>Stripe Checkout</h4>
<p>The plugin uses the bundled <strong>stripe-php</strong> SDK. It does not embed card fields on your site. Checkout Sessions use inline <code>price_data</code> (GBP), session metadata, and a 30-minute soft-hold aligned with session expiry. Configure webhooks for <code>checkout.session.completed</code>, <code>checkout.session.expired</code>, and <code>checkout.session.async_payment_failed</code>.</p>
<h4>Shortcodes</h4>
<ul>
<li><code>[clasbowi_booking class_id="123"]</code></li>
<li><code>[clasbowi_booking_status type="success"]</code> (or <code>cancelled</code>, <code>error</code>)</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>WordPress 6.0+</li>
<li>Stripe account (keys and webhook signing secret)</li>
<li>ACF Free or Pro (bundled ACF Free loads if ACF is not active)</li>
<li>Elementor (optional, for the Elementor widget)</li>
</ul>
<h4>Video tutorials — full series</h4>
<p>Step-by-step guides on YouTube (IORoot):</p>
<ul>
<li><a href="https://youtu.be/8B6TxXcDt2E" rel="nofollow ugc">Quick start: install, API keys & first booking</a></li>
<li><a href="https://youtu.be/7HBBGPZfZL0" rel="nofollow ugc">Full installation & setup guide</a></li>
<li><a href="https://youtu.be/54MQBsW8qWA" rel="nofollow ugc">Stripe webhook setup</a></li>
<li><a href="https://youtu.be/8mMCkKxIH-s" rel="nofollow ugc">Result pages, Developer & Help tabs</a></li>
<li><a href="https://youtu.be/k5dlDzCyvoA" rel="nofollow ugc">Creating a weekly repeating class</a></li>
<li><a href="https://youtu.be/gzN3yzXWajo" rel="nofollow ugc">One-off events & workshops</a></li>
<li><a href="https://youtu.be/BivPyMuCGbQ" rel="nofollow ugc">Extra fields & ACF on the booking form</a></li>
<li><a href="https://youtu.be/dqg_DweIVAo" rel="nofollow ugc">Email setup</a></li>
<li><a href="https://youtu.be/D2UpGlkhJWs" rel="nofollow ugc">Bookings list & reports</a></li>
</ul>
<h3>External services</h3>
<p>This plugin connects to third-party services to process payments and, optionally, add customers to a mailing list. You must configure your own accounts and API keys for these services in <strong>Class Bookings with Stripe <span aria-hidden="true" class="wp-exclude-emoji">→</span> Settings</strong>.</p>
<h4>Stripe</h4>
<p>This plugin uses <a href="https://stripe.com/" rel="nofollow ugc">Stripe</a> Checkout to collect payments. Stripe hosts the payment page; card details are entered on Stripe’s site, not in WordPress.</p>
<p><strong>When data is sent</strong></p>
<ul>
<li>When a customer submits the booking form, your WordPress site calls the Stripe API to create a Checkout Session, then redirects the browser to Stripe’s hosted checkout page.</li>
<li>When payment completes, fails, or the session expires, Stripe sends signed webhook events to your site (<code>/wp-json/clasbowi/v1/stripe-webhook</code>).</li>
<li>If webhooks are delayed, the plugin may call the Stripe API again to retrieve the Checkout Session status when the customer returns to your success page.</li>
</ul>
<p><strong>What data is sent</strong></p>
<ul>
<li>To Stripe’s API (server-side): your Stripe secret key (authentication), customer name and email, class and booking details (class name, date, time, location, seats, booking ID), line-item title and price (GBP), and success/cancel return URLs.</li>
<li>On Stripe Checkout (customer-facing): payment and billing details the customer enters on Stripe’s hosted page.</li>
<li>From Stripe to your site (webhooks): event payloads about the Checkout Session and payment status (no card numbers are stored in WordPress).</li>
</ul>
<p>This service is provided by Stripe, Inc.: <a href="https://stripe.com/legal/ssa" rel="nofollow ugc">Terms of Service</a>, <a href="https://stripe.com/privacy" rel="nofollow ugc">Privacy Policy</a>.</p>
<h4>Mailchimp</h4>
<p>If enabled in plugin settings, this plugin can subscribe customers to a Mailchimp audience when they opt in on the booking form.</p>
<p><strong>When data is sent</strong></p>
<ul>
<li>After a booking is marked paid (via Stripe webhook), and only when all of the following are true: Mailchimp opt-in is enabled in settings, you have saved a Mailchimp API key and Audience ID, the customer checked the opt-in box on the form, and the booking has not already been synced.</li>
</ul>
<p><strong>What data is sent</strong></p>
<ul>
<li>To the Mailchimp Marketing API: the customer’s email address, first name, last name (parsed from the booking name), and subscription status (<code>pending</code> if double opt-in is enabled, otherwise <code>subscribed</code>). Your Mailchimp API key is sent in the request for authentication.</li>
</ul>
<p>This service is provided by Intuit Mailchimp: <a href="https://mailchimp.com/legal/terms/" rel="nofollow ugc">Terms of Use</a>, <a href="https://mailchimp.com/legal/privacy/" rel="nofollow ugc">Privacy Policy</a>.</p>


Class Bookings with Stripe

Stripe Checkout booking for classes: capacity-aware dates, soft holds, webhooks, emails, reports, Elementor widget, and shortcode.

WebSync Checkout for Elementor vs Class Bookings with Stripe