{"id":21753,"date":"2022-04-30T12:36:08","date_gmt":"2022-04-30T06:36:08","guid":{"rendered":"https:\/\/hasthemes.com\/blog\/?p=21753"},"modified":"2026-10-05T17:57:34","modified_gmt":"2026-10-05T11:57:34","slug":"shopify-style-checkout-in-woocommerce","status":"publish","type":"post","link":"https:\/\/hasthemes.com\/blog\/shopify-style-checkout-in-woocommerce\/","title":{"rendered":"How to Add a Shopify Style Checkout in WooCommerce Using ShopLentor"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A long checkout form can make it harder for customers to review their information and complete an order. A Shopify-style checkout organizes contact information, shipping, and payment into a clear sequence that is easier to follow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ShopLentor (formerly WooLentor) includes a Shopify Style Checkout module that applies this step-by-step flow to a WooCommerce store without custom code. This guide shows you how to install the plugin, enable the module, configure its settings, and test the checkout before going live.<\/p>\n\n\n\n<p class=\"has-palette-color-5-background-color has-background wp-block-paragraph\"><strong>Quick answer:<\/strong> Install ShopLentor, open <strong>ShopLentor \u2192 Settings \u2192 Modules<\/strong>, and enable <strong>Shopify Style Checkout<\/strong>. Configure the checkout fields and branding, then test shipping and payment from the storefront. The normal flow has three steps: Information, Shipping, and Payment, but it becomes a two-step Information and Payment flow when the shipping step is hidden, or the cart does not require shipping.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#what-is-shopify-style-checkout-in-woo-commerce\">What Is a Shopify Style Checkout?<\/a><\/li><li><a href=\"#before-you-begin\">Before You Begin<\/a><\/li><li><a href=\"#checkout-block-compatibility\">Checkout Block Compatibility<\/a><\/li><li><a href=\"#key-checkout-features\">Key Checkout Features<\/a><ul><li><a href=\"#email-first-checkout\">Email-First Checkout<\/a><\/li><li><a href=\"#clear-checkout-navigation\">Clear Checkout Navigation<\/a><\/li><li><a href=\"#detailed-order-summary\">Detailed Order Summary<\/a><\/li><li><a href=\"#focused-layout\">Focused Layout<\/a><\/li><li><a href=\"#mobile-responsive-flow\">Mobile-Responsive Flow<\/a><\/li><\/ul><\/li><li><a href=\"#default-vs-shopify-style-checkout\">Default vs. Shopify Style Checkout<\/a><\/li><li><a href=\"#how-does-shopify-style-checkout-page-work-in-woo-commerce\">How to Add Shopify Style Checkout in ShopLentor<\/a><ul><li><a href=\"#step-1-download-and-activate-the-required-plugin\">Step 1: Install and Activate ShopLentor<\/a><ul><\/ul><\/li><li><a href=\"#step-2-go-to-the-settings-panel-and-enable-the-module\">Step 2: Enable Shopify Style Checkout<\/a><\/li><li><a href=\"#step-3-go-to-the-checkout-page-of-the-woo-commerce-store-and-modify-the-contents\">Step 3: Configure the Checkout<\/a><\/li><li><a href=\"#step-4-set-up-the-shipping-method\">Step 4: Configure and Test Shipping<\/a><\/li><li><a href=\"#step-5-set-up-the-payment-gateway\">Step 5: Set Up the Payment Gateway<\/a><ul><\/ul><\/li><\/ul><\/li><li><a href=\"#checkout-testing-checklist\">Checkout Testing Checklist<\/a><\/li><li><a href=\"#final-words\">Final Words<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 id=\"what-is-shopify-style-checkout-in-woo-commerce\" class=\"wp-block-heading\">What Is a Shopify Style Checkout?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A Shopify-style checkout is a focused checkout layout that separates customer information, shipping, and payment into clear steps. Instead of asking customers to work through one long form, it guides them from one stage to the next.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The ShopLentor Shopify Style Checkout module applies this layout to your existing store. It lets you control the logo, logo link, bottom menu, phone and company fields, cart navigation, shipping step, theme header and footer, and checkout labels from one settings panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The module changes the checkout presentation and flow. Your products, shipping zones, taxes, payment methods, orders, and other store data continue to be managed through WooCommerce.<\/p>\n\n\n\n<p class=\"has-palette-color-5-background-color has-background wp-block-paragraph\">If you want to compare this module with another step-based approach, read our guide on <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hasthemes.com\/blog\/create-multistep-checkout-for-woocommerce\/\">creating a multistep checkout for WooCommerce<\/a>.<\/p>\n\n\n\n<h2 id=\"before-you-begin\" class=\"wp-block-heading\">Before You Begin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Confirm that WooCommerce is active, at least one product can be added to the cart, and the shipping and payment methods you intend to offer are configured.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Back up your site and test the checkout on a staging environment before changing a live store.<\/p>\n\n\n\n<h2 id=\"checkout-block-compatibility\" class=\"wp-block-heading\">Checkout Block Compatibility<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">New WooCommerce stores use the Checkout Block by default. When the ShopLentor Shopify Style Checkout module is enabled, it replaces the checkout presentation with its own classic shortcode-based checkout flow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You do not have to replace the Checkout Block manually before enabling the module. However, extensions built specifically for the Checkout Block may not appear inside this classic checkout flow, so test every checkout-related extension on staging before publishing the change.<\/p>\n\n\n\n<h2 id=\"key-checkout-features\" class=\"wp-block-heading\">Key Checkout Features<\/h2>\n\n\n\n<h3 id=\"email-first-checkout\" class=\"wp-block-heading\">Email-First Checkout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Information step collects the customer&#8217;s email before shipping and payment. This gives the checkout a clear starting point and keeps contact information separate from the later order steps.<\/p>\n\n\n\n<h3 id=\"clear-checkout-navigation\" class=\"wp-block-heading\">Clear Checkout Navigation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buttons such as <strong>Continue to Shipping<\/strong>, <strong>Continue to Payment<\/strong>, and <strong>Return to Cart<\/strong> tell customers what happens next. You can rename supported tab and button labels to match your store&#8217;s preferred wording.<\/p>\n\n\n\n<h3 id=\"detailed-order-summary\" class=\"wp-block-heading\">Detailed Order Summary<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">On desktop, the module places the order summary in a separate right-side panel. It shows product thumbnails and quantities, followed by the coupon form, subtotal, shipping, applicable fees or taxes, and the final total.<\/p>\n\n\n\n<h3 id=\"focused-layout\" class=\"wp-block-heading\">Focused Layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The default module layout keeps customers focused on checkout instead of surrounding the form with the full theme layout. If needed, you can display the active theme&#8217;s header and footer and hide the duplicate checkout logo.<\/p>\n\n\n\n<h3 id=\"mobile-responsive-flow\" class=\"wp-block-heading\">Mobile-Responsive Flow<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The checkout rearranges its content for smaller screens and keeps the steps manageable on mobile devices. For mobile-specific recommendations, read our guide to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hasthemes.com\/blog\/shopify-style-checkout-for-woocommerce\/\">improving mobile conversions with a Shopify-style checkout<\/a>.<\/p>\n\n\n\n<h2 id=\"default-vs-shopify-style-checkout\" class=\"wp-block-heading\">Default vs. Shopify Style Checkout<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>Standard WooCommerce checkout<\/th><th>ShopLentor Shopify Style Checkout<\/th><\/tr><\/thead><tbody><tr><td>Checkout flow<\/td><td>Depends on whether the Checkout Block or classic checkout is assigned; information is generally completed in one continuous checkout view<\/td><td>Separates the process into Information, Shipping, and Payment steps<\/td><\/tr><tr><td>Shipping step<\/td><td>Shipping fields and methods appear as part of the standard checkout structure when required<\/td><td>Shows a dedicated Shipping step only when the cart requires shipping and <strong>Hide Shipping Step<\/strong> is off<\/td><\/tr><tr><td>Navigation<\/td><td>Customers complete the checkout in the order presented by the active checkout layout<\/td><td>Uses clear forward and return controls between checkout steps<\/td><\/tr><tr><td>Order summary<\/td><td>Position and presentation depend on the Checkout Block, classic template, and active theme<\/td><td>Uses a separate desktop summary panel with product thumbnails, quantities, coupon entry, subtotal, shipping, fees or taxes, and total<\/td><\/tr><tr><td>Phone and company fields<\/td><td>Availability and behavior depend on the WooCommerce checkout type and other checkout settings<\/td><td>Provides direct switches for showing or hiding the phone and company fields<\/td><\/tr><tr><td>Broader field management<\/td><td>Core options and compatible extensions can control supported checkout fields<\/td><td>The Shopify Style Checkout module controls its listed fields; broader field editing requires other checkout controls or ShopLentor Pro&#8217;s Checkout Field Manager<\/td><\/tr><tr><td>Store branding<\/td><td>Styling follows the active theme or Checkout Block settings<\/td><td>Provides module controls for the checkout logo, logo URL, bottom menu, optional theme header and footer, and supported labels<\/td><\/tr><tr><td>Distraction control<\/td><td>The full theme layout may remain visible depending on the checkout configuration<\/td><td>Uses a focused checkout canvas by default and can hide cart navigation<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"how-does-shopify-style-checkout-page-work-in-woo-commerce\" class=\"wp-block-heading\">How to Add Shopify Style Checkout in ShopLentor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Work through the following five steps on a staging site first. After setup, complete the testing checklist before enabling the checkout on your live store.<\/p>\n\n\n\n<h3 id=\"step-1-download-and-activate-the-required-plugin\" class=\"wp-block-heading\">Step 1: Install and Activate ShopLentor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"408\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2024\/02\/install-and-activate-the-shoplentor-plugin.png\" alt=\"Install and Activate the ShopLentor Plugin\" class=\"wp-image-63254\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2024\/02\/install-and-activate-the-shoplentor-plugin.png 750w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2024\/02\/install-and-activate-the-shoplentor-plugin-577x314.png 577w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption class=\"wp-element-caption\">Install and Activate the Plugin<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Log in to your WordPress dashboard and go to:<\/p>\n\n\n\n<p class=\"has-palette-color-5-background-color has-background wp-block-paragraph\"><strong>Plugins \u2192 Add New Plugin<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Search for <strong>ShopLentor<\/strong>, click <strong>Install Now<\/strong>, and then click <strong>Activate<\/strong>. If an onboarding screen appears, complete it or continue to the plugin settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Shopify Style Checkout module is included in the free version of ShopLentor. You do not need ShopLentor Pro to enable this module.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If ShopLentor is already installed, update it and back up the site before continuing.<\/p>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-container-core-group-is-layout-e9b484bf wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:#f36247;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<h4 class=\"wp-block-heading alignfull has-text-align-center has-palette-color-8-color has-text-color\" id=\"shoplentor--woocommerce-builder-for-elementor-amp-gutenberg\" style=\"padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);font-size:clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 0.645), 24px);\">ShopLentor- WooCommerce Builder for Elementor &amp; Gutenberg<\/h4>\n\n\n\n<p class=\"has-text-align-center has-white-color has-text-color wp-block-paragraph\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.313), 18px);\">A versatile page builder to build modern and excellent online stores with more than 100k+ Active Installations.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe0a7de2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-palette-color-4-color has-palette-color-8-background-color has-text-color has-background has-custom-font-size wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/woolentor-addons\/\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50);font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.313), 18px);\" target=\"_blank\" rel=\"noreferrer noopener\">Try for Free<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-custom-font-size wp-element-button\" href=\"https:\/\/woolentor.com\/pricing\/\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50);font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.313), 18px);\" target=\"_blank\" rel=\"noreferrer noopener\">Purchase Pro<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 id=\"step-2-go-to-the-settings-panel-and-enable-the-module\" class=\"wp-block-heading\">Step 2: Enable Shopify Style Checkout<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1298\" height=\"731\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-panel-and-enable-the-module.png\" alt=\"Enable the Shopify Style Checkout module in ShopLentor\" class=\"wp-image-30280\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-panel-and-enable-the-module.png 1298w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-panel-and-enable-the-module-768x432.png 768w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><figcaption class=\"wp-element-caption\">Enable the Shopify Style Checkout module in ShopLentor<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">From the WordPress dashboard, go to:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ShopLentor \u2192 Settings \u2192 Modules<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Find <strong>Shopify Style Checkout<\/strong>, switch it on, and open its settings. Save the change before previewing the checkout.<\/p>\n\n\n\n<h3 id=\"step-3-go-to-the-checkout-page-of-the-woo-commerce-store-and-modify-the-contents\" class=\"wp-block-heading\">Step 3: Configure the Checkout<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"406\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/configure-shopify-style-checkout-module.png\" alt=\"Shopify Style Checkout module\" class=\"wp-image-72340\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/configure-shopify-style-checkout-module.png 750w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/configure-shopify-style-checkout-module-580x314.png 580w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption class=\"wp-element-caption\">Go to the Checkout Page of the <a href=\"https:\/\/hasthemes.com\/blog\/how-to-add-product-filter-in-woocommerce-store\/\">WooCommerce Store<\/a> and Modify the Contents<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Stay in the Shopify Style Checkout module settings. Configure the options that match your store&#8217;s checkout requirements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable\/Disable:<\/strong> Turns the Shopify Style Checkout module on or off.<\/li>\n\n\n\n<li><strong>Logo:<\/strong> Uploads the logo shown in the checkout area.<\/li>\n\n\n\n<li><strong>Logo URL:<\/strong> Links the checkout logo to an existing page or a custom URL.<\/li>\n\n\n\n<li><strong>Bottom Menu:<\/strong> Displays a selected menu containing useful links such as contact, privacy, refund, or support pages.<\/li>\n\n\n\n<li><strong>Enable Theme Header &amp; Footer:<\/strong> Displays your active theme&#8217;s header and footer around the checkout.<\/li>\n\n\n\n<li><strong>Hide Checkout Logo:<\/strong> Hides the checkout logo when the theme header is enabled, preventing duplicate logos.<\/li>\n\n\n\n<li><strong>Show Phone Number Field:<\/strong> Displays the phone field when you need a contact number for delivery or order updates.<\/li>\n\n\n\n<li><strong>Show Company Name Field:<\/strong> Displays the company field when it is relevant to business orders or invoices.<\/li>\n\n\n\n<li><strong>Hide Cart Navigation:<\/strong> Removes the Cart breadcrumb and <strong>Return to Cart<\/strong> link.<\/li>\n\n\n\n<li><strong>Hide Shipping Step:<\/strong> Removes the dedicated Shipping step.<\/li>\n\n\n\n<li><strong>Rename Labels:<\/strong> Lets you change supported tab and button labels for the Information, Shipping, and Payment steps.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When <strong>Hide Shipping Step<\/strong> is off and the cart requires shipping, customers follow <strong>Information \u2192 Shipping \u2192 Payment<\/strong>. When the option is on\u2014or the cart does not require shipping, the flow becomes <strong>Information \u2192 Payment<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use short, action-based button labels. For example, <strong>Continue to Shipping<\/strong> tells customers more than a vague label such as <strong>Next<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Save Changes<\/strong> after configuring the module.<\/p>\n\n\n\n<h3 id=\"step-4-set-up-the-shipping-method\" class=\"wp-block-heading\">Step 4: Configure and Test Shipping<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Go to:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WooCommerce \u2192 Settings \u2192 Shipping<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Confirm that the required shipping zones, methods, and rates are active. The checkout module displays the shipping methods made available by your WooCommerce shipping configuration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a physical product to the cart and open the checkout from the storefront. Enter an address covered by one of your shipping zones, continue to the Shipping step, and confirm that the correct methods and charges appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your store sells only virtual or downloadable products, enable <strong>Hide Shipping Step<\/strong>. If you sell both physical and virtual products, test each product type and a mixed cart.<\/p>\n\n\n\n<h3 id=\"step-5-set-up-the-payment-gateway\" class=\"wp-block-heading\">Step 5: Set Up the Payment Gateway<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"333\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/setup-woocommerce-payment.webp\" alt=\"Add WooCommerce Payment\" class=\"wp-image-72344\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/setup-woocommerce-payment.webp 750w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/04\/setup-woocommerce-payment-600x266.webp 600w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption class=\"wp-element-caption\">Add WooCommerce <a href=\"https:\/\/hasthemes.com\/blog\/best-woocommerce-payment-gateways\/\">Payment Gateway<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Go to:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WooCommerce \u2192 Settings \u2192 Payments<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enable and configure the payment methods you want to offer. The Shopify Style Checkout module displays the payment gateways that WooCommerce makes available for the current customer, location, currency, cart, and order total.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Place a test order with every enabled gateway before going live. For each gateway, check:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The payment method appears when its conditions are met.<\/li>\n\n\n\n<li>Required checkout fields and error messages work correctly.<\/li>\n\n\n\n<li>A successful payment creates the order and returns the customer to the correct confirmation page.<\/li>\n\n\n\n<li>A failed or cancelled payment displays an understandable message and does not create an incorrect paid order.<\/li>\n\n\n\n<li>The order status, transaction details, stock reduction, and customer and administrator emails are correct.<\/li>\n\n\n\n<li>Gateway callbacks or webhooks update the order when the gateway uses them.<\/li>\n<\/ol>\n\n\n\n<h4 id=\"how-to-add-a-shopify-style-checkout-to-woo-commerce-woo-commerce-checkout-like-shopify\" class=\"wp-block-heading\">How to Add a Shopify Style Checkout to WooCommerce | WooCommerce Checkout like Shopify<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Add a Shopify Style Checkout to WooCommerce |  WooCommerce Checkout like Shopify [2021]\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/ZPvbcgELUlE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">How to Add a Shopify Style Checkout to WooCommerce | WooCommerce Checkout like Shopify<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Next:<\/strong> <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hasthemes.com\/blog\/shopify-style-checkout-for-woocommerce\/\">Improve mobile conversions with a Shopify-style checkout<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also review practical ways to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hasthemes.com\/blog\/how-to-reduce-cart-abandonment-in-woocommerce\/\">reduce cart abandonment in WooCommerce<\/a> after completing the checkout setup.<\/p>\n\n\n\n<h2 id=\"checkout-testing-checklist\" class=\"wp-block-heading\">Checkout Testing Checklist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Complete these checks on staging and repeat them after moving the setup to your live store:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a simple physical product to the cart and complete an order.<\/li>\n\n\n\n<li>Test a virtual or downloadable product if your store sells one.<\/li>\n\n\n\n<li>Test a mixed cart if you sell both physical and virtual products.<\/li>\n\n\n\n<li>Test guest checkout and registered-customer checkout when both are enabled.<\/li>\n\n\n\n<li>Confirm that Information, Shipping, and Payment open in the correct order.<\/li>\n\n\n\n<li>Enable <strong>Hide Shipping Step<\/strong> and confirm that the checkout changes to Information and Payment.<\/li>\n\n\n\n<li>Test separate billing and shipping addresses.<\/li>\n\n\n\n<li>Use addresses from each important shipping zone and confirm the available methods and charges.<\/li>\n\n\n\n<li>Apply valid and invalid coupons and check the resulting totals and messages.<\/li>\n\n\n\n<li>Check the subtotal, shipping, fees, taxes, discounts, and final total.<\/li>\n\n\n\n<li>Complete a successful sandbox transaction with every enabled payment gateway.<\/li>\n\n\n\n<li>Test a declined, failed, or cancelled payment where the gateway&#8217;s sandbox supports it.<\/li>\n\n\n\n<li>Confirm that the order status and transaction details are correct.<\/li>\n\n\n\n<li>Confirm that stock is reduced only when appropriate.<\/li>\n\n\n\n<li>Check customer and administrator order emails.<\/li>\n\n\n\n<li>Check the order confirmation page and account order details.<\/li>\n\n\n\n<li>Confirm that required-field and invalid-field messages are understandable.<\/li>\n\n\n\n<li>Test the logo, logo link, bottom menu, cart navigation, and renamed labels.<\/li>\n\n\n\n<li>Review the checkout on desktop, tablet, and mobile screens.<\/li>\n\n\n\n<li>Test checkout-related extensions, especially extensions designed for the Checkout Block.<\/li>\n\n\n\n<li>Clear page, object, CDN, and server caches after changing the checkout.<\/li>\n\n\n\n<li>Repeat checkout tests after updating ShopLentor, WooCommerce, your theme, or a payment extension.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"frequently-asked-questions\" class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1737196072752\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Is the Shopify Style Checkout module free?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes. The Shopify Style Checkout module is included in the free version of ShopLentor. ShopLentor Pro is not required to enable it.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1737196082327\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Do I need a developer?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No. All setup is done in the module settings. No code is needed.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1737196109032\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Does the module change my products or orders?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No. It changes the checkout presentation and flow. Products and orders remain managed through WooCommerce.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1737196143263\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I change the checkout logo?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes. Open the Shopify Style Checkout settings and use <strong>Logo<\/strong> to upload an image. Use <strong>Logo URL<\/strong> to link it to an existing page or a custom address.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1737196154313\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I hide the phone or company field?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes. Open the Shopify Style Checkout settings and switch the <strong>Phone Number Field<\/strong> or <strong>Company Name Field<\/strong> on or off. Keep the phone field on if you need it for delivery or order updates.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1737196162792\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I use the module for digital products?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes. Turn on <strong>Hide Shipping Step<\/strong> so customers move from Information directly to Payment. Test a complete order afterward to confirm that no unnecessary shipping fields or methods appear.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1791198740374\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Does it work with the WooCommerce Checkout Block?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The module does not use the Checkout Block. When enabled, it replaces the block-based checkout presentation with ShopLentor\u2019s classic shortcode-based checkout flow. Test any extensions designed specifically for the Checkout Block because they may not appear or work in the ShopLentor checkout.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1777179707643\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Why are my shipping methods missing?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Check the customer&#8217;s address, shipping zone, enabled methods, rate conditions, product shipping class, and whether the cart requires shipping. The module cannot show a shipping method that WooCommerce does not make available for the order.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1791198963774\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I add custom checkout fields?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, but adding new custom fields requires ShopLentor Pro\u2019s Checkout Field Manager. It lets you add, edit, reorder, require, or remove billing and shipping fields. The free Shopify Style Checkout module only lets you show or hide the phone and company fields and rename supported checkout labels.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 id=\"final-words\" class=\"wp-block-heading\">Final Words<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">ShopLentor turns the standard checkout into a guided Information, Shipping, and Payment flow. You can configure the checkout logo, navigation, optional phone and company fields, shipping step, theme header and footer, and supported labels without writing code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The setup is only complete after you test real storefront behavior. Check shipping, payment, validation, totals, emails, order creation, responsive layout, and checkout-extension compatibility before publishing the change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ready to try it? Get <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hasthemes.com\/plugins\/woolentor-pro-woocommerce-page-builder\/\">ShopLentor<\/a> and enable the Shopify Style Checkout module in a few minutes. Then read our guide on <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hasthemes.com\/blog\/shopify-style-checkout-for-woocommerce\/\">improving mobile checkout conversions<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A long checkout form can make it harder for customers to review their information and complete an order. A Shopify-style checkout organizes contact information, shipping, and payment into a clear sequence that is easier to follow. ShopLentor (formerly WooLentor) includes a Shopify Style Checkout module that applies this step-by-step flow to a WooCommerce store without [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":50189,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[56],"class_list":["post-21753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-woocommerce-plugin"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts\/21753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/comments?post=21753"}],"version-history":[{"count":11,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts\/21753\/revisions"}],"predecessor-version":[{"id":72346,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts\/21753\/revisions\/72346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/media\/50189"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/media?parent=21753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/categories?post=21753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/tags?post=21753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}