AhaPay Buy Now Pay Later vs Smush – Image Optimization, Compression, Lazy Load, WebP & CDN

AhaPay integrates with WooCommerce to provide flexible payment options for your customers. The plugin allows shoppers to split their payments into 4 or 7 installments automatically, with no hidden fees and 0% interest on 4-payment plans. Requirements WordPress 5.4 or higher WooCommerce 4.8 or higher PHP 7.4 or higher OpenSSL PHP extension SSL certificate installed on your domain (for secure transactions) Configuration Basic Settings Enable/Disable – Turn the payment method on or off Title – The payment method title shown to customers Description – The payment method description shown to customers Environment – Choose between Sandbox (testing) and Production API Key – Enter your AhaPay API key Minimum Amount – Set the minimum order amount for AhaPay availability Display Settings Product Label – Enable/disable BNPL information on product pages Product Label Text – Customize the BNPL message Product Label Color – Set the background color for labels Product Label Text Color – Set the text color for labels Features Seamless integration with WooCommerce checkout Automatic order status updates Real-time payment verification Custom product page badges and banners Responsive payment modal Support for both desktop and mobile devices Order status checking in admin panel Sandbox environment for testing Detailed payment status tracking Support for refunds Payment Flow Customer selects AhaPay at checkout Order is created and customer is redirected to AhaPay Customer completes payment setup with AhaPay Order status is automatically updated Customer is redirected back to your store Order Statuses PAYMENT_SUCCESSFUL – Payment completed CANCELLED – Payment cancelled by customer UNAVAILABLE – Payment failed PAYMENT_IN_PROGRESS – Payment pending REFUNDED – Payment refunded Support For support or questions, please contact AhaPay support team or visit your AhaPay merchant dashboard. External services This plugin connects to the AhaPay API to process Buy Now Pay Later payments and handle order status updates. It sends the following data when processing payments or checking status: – Order ID and transaction details – API key for authentication – Refund requests with order information Data is sent securely via HTTPS to AhaPay’s servers only when necessary for payment processing or status verification. This service is provided by AhaPay: Terms of Service, Privacy Policy. Development This plugin uses webpack to build JavaScript and CSS assets. Build Process Install dependencies: npm install Build assets: npm run build (or npm run dev for development) Source files are located in the blocks/ directory. Built files are in assets/blocks/. The source code is publicly available in this repository for review and modification. 1.0.0 Initial release Basic payment integration Order status management Product page integration Admin interface Sandbox/Production environments License This plugin is licensed under the terms of use provided by AhaPay. Customize Payment Fields CSS You can add custom CSS that will be applied specifically to AhaPay’s payment fields on the checkout page from the plugin settings in the WordPress admin. How to update the CSS In WordPress admin go to: WooCommerce → Settings → Payments. Find “AhaPay Buy Now Pay Later” in the list and click Manage (or click the Settings link). Scroll down to the setting named “Additional CSS for Payment Fields”. Paste your CSS into the textarea and click Save changes. How the plugin applies your CSS The plugin stores the textarea content and adds it as inline CSS attached to the plugin stylesheet handle ahapaybuynowpaylater-block-style. The payment fields output by the gateway are wrapped in a container with the class .ahapay-payment-fields, so we recommend scoping your rules under that selector to avoid affecting other parts of your site. The plugin will strip surrounding tags if you paste them by accident, and it sanitizes the textarea input on save. If you need to override existing rules, use specificity or !important as needed. Quick verification example Paste the following CSS into the “Additional CSS for Payment Fields” textarea and save. Then open your checkout page (or the block checkout) and you should see a green dashed border, a small badge that reads “ADDITIONAL CSS APPLIED”, and visible styling changes for the title, subtitle and progress bar. This is a visual test to confirm the inline CSS is applied. `css /* Visual test for Additional CSS for Payment Fields */ .ahapay-payment-fields { border: 3px dashed #27ae60 !important; background: rgba(39, 174, 96, 0.04) !important; padding: 12px !important; position: relative !important; border-radius: 6px !important; } /* Badge so you can clearly see the CSS is applied */ .ahapay-payment-fields::before { content: “ADDITIONAL CSS APPLIED”; position: absolute; top: -12px; right: 8px; background: #27ae60; color: #ffffff; font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); z-index: 9999; } .ahapay-payment-fields .ahapay-title { color: #e91e63 !important; font-size: 18px !important; font-weight: 700 !important; } .ahapay-payment-fields .ahapay-subtitle { color: #555 !important; font-style: italic !important; } .ahapay-payment-fields .ahapay-progress-bar { background: #eee !important; height: 12px !important; border-radius: 12px !important; margin: 10px 0 !important; } .ahapay-payment-fields .ahapay-progress { width: 75% !important; height: 100% !important; background: linear-gradient(90deg,#e91e63,#ff8a80) !important; border-radius: 12px !important; } .ahapay-payment-fields .ahapay-timeline div { display: inline-block !important; background: #fff8e1 !important; padding: 6px 8px !important; margin-right: 6px !important; border-radius: 4px !important; font-weight: 600 !important; } ` Small examples Change the title color only: css .ahapay-payment-fields .ahapay-title { color: #0066cc !important; } Hide the timeline if it conflicts with your theme: css .ahapay-payment-fields .ahapay-timeline { display: none !important; } Troubleshooting If you don’t see the changes after saving the CSS, try these steps: Ensure the AhaPay payment method is enabled (WooCommerce → Settings → Payments → AhaPay). Clear any caching on your site (plugin cache, server cache, CDN) and your browser cache. Confirm you’re viewing a checkout page that loads the plugin styles (block checkout or classic checkout). If you use a custom checkout template, ensure the ahapay-payment-fields wrapper is present in the markup. Use !important or increase specificity if your theme’s CSS is overriding the rules. Security and best practices The textarea is intended for admin use only. Avoid pasting untrusted CSS/JS — the plugin strips tags but does not execute arbitrary JS. Keep rules scoped (start with .ahapay-payment-fields) to avoid unintentionally affecting other areas of your site.

Compress images, optimize images, and enable image lazy load automatically with the powerful Smush image optimizer to keep your WordPress site fast, without losing quality. Smush makes it easy to optimize images, compress images, and deliver images faster across your entire WordPress site. This all-in-one image optimizer automatically reduces image file sizes, enables image lazy load, and serves modern formats like WebP and AVIF, all without breaking image quality or adding extra work. Whether you’re running a blog, store, or portfolio, Smush helps you optimize images at scale and keep your site fast with a trusted WordPress image optimizer. Trusted by 1+ Million Sites | 4.8/5 Star Rating Get everything you need to optimize images and speed up your site. Smush works out of the box with no complicated setup – just install and let it handle the rest. Compress images without losing quality Reduce image file size automatically while keeping your images sharp and clear. Smush is an easy-to-use image optimizer which let’s you compress images using both lossless and lossy compression, giving you the best balance of quality and performance without extra work. You can also compress images outside the media library using Directory Smush, making it easy to optimize images stored in theme folders, plugins, or other directories on your server. Lazy load images for faster pages Enable image lazy load across your site so images load only when needed. This image optimizer improves initial page speed and creates a smoother experience for visitors without extra configuration. Serve WebP and AVIF images automatically (PRO) Convert images to WebP and AVIF and serve them automatically to supported browsers. Smush helps you optimize images using next-gen formats to reduce file size and improve load times across your WordPress site. Deliver images faster with an Image CDN (PRO) Serve images through a global image CDN to reduce latency and improve load times for visitors around the world. 119 global CDN servers Up to 500 GB of bandwidth Faster image delivery based on visitor location Improved performance for image-heavy and high-traffic sites Automatically resize and fix image dimensions (PRO) Eliminate common PageSpeed warnings and improve layout stability with automatic image sizing. Smush dynamically resizes images to perfectly fit their containers, regardless of original size, helping fix the “Properly size images” warning in Google PageSpeed Insights. It also automatically adds missing width and height attributes to your images, improving rendering speed and reducing layout shifts. This helps you meet the “Ensure images have explicit width and height” recommendation without any manual work. Optimize your entire site, automatically Smush works across your whole site as a powerful image optimizer to optimize images as you upload them and maintain performance over time without manual work. Optimize images automatically on upload Compress images in bulk or individually Works with your existing media library No need to re-upload images Enable image lazy load across your site Convert images to WebP and AVIF Deliver images with an integrated image CDN Automatically resize and serve correctly sized images Optimize images outside the media library with Directory Smush Built for performance Smush improves page speed and overall performance by reducing image weight and improving how images are delivered. Reduce page load times Improve user experience Better performance for image-heavy pages Supports image lazy load and preload images (PRO) for faster perceived performance Works with your existing setup Smush is built to work with your current WordPress setup, including popular themes, page builders, and plugins. Compatible with Gutenberg, Elementor, WPBakery, and more Works with WooCommerce stores No need to change your workflow Easy to enable and configure Designed to be simple You don’t need to be a performance expert to optimize images with Smush image optimizer. Works out of the box Simple settings when you need them No technical knowledge required Safe to use on any site Why choose Smush? There are plenty of image optimization plugins, but Smush focuses on making it easy to optimize images, compress images, and improve performance without complexity. As a leading WordPress image optimizer, Smush gives you powerful optimization tools without the technical hassle. Trusted by over 1 million WordPress users Built specifically for WordPress Regular updates and improvements Backed by the WPMU DEV team Get started in minutes Install Smush, activate it, and start to compress images, optimize images, and enable image lazy load right away. This easy-to-use image optimizer helps most sites see improvements immediately without changing how they upload or manage images. About Us WPMU DEV is a premium supplier of quality WordPress plugins, services and support. Learn more here: https://wpmudev.com/ Don’t forget to stay up to date on everything WordPress from the Internet’s number one resource: WPMU DEV Blog Hey, one more thing… we hope you enjoy our free offerings as much as we’ve loved making them for you! Contact and Credits Originally written by Alex Dunae at Dialect (dialect.ca, e-mail ‘alex’ at ‘dialect dot ca’), 2008-11.