Modern Checkout – LaunchFlows Patterns

Product	Subtotal
Subtotal	$0.00
Total	$0.00
<!-- wp:columns {"epStylingOptions":{"epCustomColumnsResponsiveEnabled":true,"epCustomColumnsReverseResponsiveEnabled":true,"epCustomColumnsSpacingResponsiveEnabled":true,"epCustomColumns":{"target":"wp-block-column","responsive":true,"hover":false,"options":[{"custom":true,"control":"ColumnToggle"},{"label":"Responsive Columns","control":"Range","attribute":"epCustomColumns","defaults":{"tablet":"2","mobile":"1"},"css":"flex-basis","customValue":"calc(( 100% - ({{Range:epCustomColumnsSpacing:auto:0px}} * ({{value}} - 1))) / {{value}}) !important","props":{"max":6,"min":1,"supportedUnits":[]},"condition":{"query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"},[{"relation":"OR","query":[{"field":"viewport","compare":"EQUAL","value":"tablet"},{"field":"viewport","compare":"EQUAL","value":"mobile"}]}]]}}]},"epCustomColumnsReverse":{"target":"","responsive":true,"hover":false,"options":[{"label":"Columns Order","control":"ButtonGroup","attribute":"epCustomColumnsReverse","css":"flex-direction","customValue":"{{value}}","condition":{"relation":"AND","query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"},[{"relation":"OR","query":[[{"relation":"AND","query":[{"field":"attributes.epCustomColumns.mobile","controlledBy":"Range","compare":"IN","value":"1"},{"field":"viewport","compare":"EQUAL","value":"mobile"}]}],[{"relation":"AND","query":[{"field":"attributes.epCustomColumns.tablet","controlledBy":"Range","compare":"IN","value":"1"},{"field":"viewport","compare":"EQUAL","value":"tablet"}]}]]}]]},"defaults":{"tablet":"column","mobile":"column"},"props":{"layout":"stacked","options":[{"label":"Default","value":"column"},{"label":"Reverse","value":"column-reverse"}]}}]},"epCustomColumnsSpacing":{"target":"","responsive":true,"hover":false,"options":[{"label":"Columns Gap","control":"Range","attribute":"epCustomColumnsSpacing","defaults":{"desktop":"32px","tablet":"32px","mobile":"32px"},"css":"gap","props":{"max":100,"min":0,"supportedUnits":["px"]},"condition":{"query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"}]}}]},"savedStyling":"","clientId":"99bbb862-a3cc-48d0-a580-1bcd6dd5120c"},"epCustomColumns":{"desktop":{"value":"","important":false,"unit":"%"},"tablet":{"value":2,"important":false,"unit":""},"tabletModified":true,"mobile":{"value":1,"important":false,"unit":""},"mobileModified":true},"epCustomColumnsSpacing":{"desktop":{"value":32,"important":false,"unit":"px"},"tablet":{"value":32,"important":false,"unit":"px"},"tabletModified":true,"mobile":{"value":32,"important":false,"unit":"px"},"mobileModified":true},"epCustomColumnsReverse":{"desktop":"","tablet":"column","tabletModified":true,"mobile":"column","mobileModified":true},"epAnimationGeneratedClass":"edplus_anim-9ECWq7","epGeneratedClass":"eplus-wrapper"} -->
<div class="wp-block-columns eplus-wrapper"><!-- wp:column {"width":"60%","epAnimationGeneratedClass":"edplus_anim-g6WUid","epGeneratedClass":"eplus-wrapper"} -->
<div class="wp-block-column eplus-wrapper" style="flex-basis:60%"><!-- wp:kadence/rowlayout {"uniqueID":"_25d4a6-d0","columns":1,"colLayout":"equal","bottomMargin":10,"borderWidth":[1,1,1,1],"borderRadius":[5,5,5,5],"border":"palette7"} -->
<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_25d4a6-d0" class="kt-row-layout-inner kt-layout-id_25d4a6-d0"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row"><!-- wp:kadence/column {"topPadding":2,"bottomPadding":2,"leftPadding":2,"rightPadding":2,"border":"palette4","borderWidth":[0,0,0,0],"uniqueID":"_b366ed-86","paddingType":"%"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_b366ed-86"><div class="kt-inside-inner-col"><!-- wp:heading {"level":3,"epAnimationGeneratedClass":"edplus_anim-K7xhZh","epGeneratedClass":"eplus-wrapper"} -->
<h3 class=" eplus-wrapper">1. Contact Information</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"epAnimationGeneratedClass":"edplus_anim-Vuobty","epGeneratedClass":"eplus-wrapper"} -->
<p class=" eplus-wrapper">Already have an account? <a href="/my-account" data-type="URL" data-id="/my-account">Log in</a></p>
<!-- /wp:paragraph -->

<!-- wp:launchflows/notices -->
<div class="wp-block-launchflows-notices">[lf-notices]</div>
<!-- /wp:launchflows/notices -->

<!-- wp:launchflows/login -->
<div class="wp-block-launchflows-login">[lf-login]</div>
<!-- /wp:launchflows/login -->

<!-- wp:launchflows/billing {"className":"lf-hide-title"} -->
<div class="wp-block-launchflows-billing lf-hide-title">[lf-billing]</div>
<!-- /wp:launchflows/billing --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout -->

<!-- wp:kadence/rowlayout {"uniqueID":"_fbc125-08","columns":1,"colLayout":"equal","bottomMargin":10,"borderWidth":[1,1,1,1],"borderRadius":[5,5,5,5],"border":"palette7"} -->
<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_fbc125-08" class="kt-row-layout-inner kt-layout-id_fbc125-08"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row"><!-- wp:kadence/column {"topPadding":2,"bottomPadding":2,"leftPadding":2,"rightPadding":2,"border":"palette4","borderWidth":[0,0,0,0],"uniqueID":"_2c84fe-17","paddingType":"%"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_2c84fe-17"><div class="kt-inside-inner-col"><!-- wp:heading {"level":3,"epAnimationGeneratedClass":"edplus_anim-uG7cgH","epGeneratedClass":"eplus-wrapper"} -->
<h3 class=" eplus-wrapper">2. Shipping details</h3>
<!-- /wp:heading -->

<!-- wp:launchflows/shipping {"className":"lf-hide-title"} -->
<div class="wp-block-launchflows-shipping lf-hide-title">[lf-shipping]</div>
<!-- /wp:launchflows/shipping --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout -->

<!-- wp:kadence/rowlayout {"uniqueID":"_542e8c-fe","columns":1,"colLayout":"equal","marginUnit":"%","borderWidth":[1,1,1,1],"borderRadius":[5,5,5,5],"border":"palette7"} -->
<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_542e8c-fe" class="kt-row-layout-inner kt-layout-id_542e8c-fe"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row"><!-- wp:kadence/column {"topPadding":2,"bottomPadding":2,"leftPadding":2,"rightPadding":2,"border":"palette4","borderWidth":[0,0,0,0],"uniqueID":"_e3b407-01","paddingType":"%"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_e3b407-01"><div class="kt-inside-inner-col"><!-- wp:heading {"level":3,"epAnimationGeneratedClass":"edplus_anim-gKEdzg","epGeneratedClass":"eplus-wrapper"} -->
<h3 class=" eplus-wrapper">3. Payment Details</h3>
<!-- /wp:heading -->

<!-- wp:launchflows/additional -->
<div class="wp-block-launchflows-additional">[lf-additional]</div>
<!-- /wp:launchflows/additional -->

<!-- wp:launchflows/payment -->
<div class="wp-block-launchflows-payment">[lf-payment]</div>
<!-- /wp:launchflows/payment -->

<!-- wp:launchflows/checkout-button -->
<div class="wp-block-launchflows-checkout-button">[lf-checkout-button]</div>
<!-- /wp:launchflows/checkout-button -->

<!-- wp:kadence/rowlayout {"uniqueID":"_fe748d-b5","colLayout":"equal"} -->
<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_fe748d-b5" class="kt-row-layout-inner kt-layout-id_fe748d-b5"><div class="kt-row-column-wrap kt-has-2-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row"><!-- wp:kadence/column {"uniqueID":"_84b0ae-c4"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_84b0ae-c4"><div class="kt-inside-inner-col"><!-- wp:paragraph {"epAnimationGeneratedClass":"edplus_anim-13jW6X","epGeneratedClass":"eplus-wrapper"} -->
<p class=" eplus-wrapper"><strong>←</strong> <a href="/cart">Return To Cart</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"uniqueID":"_0293ac-73"} -->
<div class="wp-block-kadence-column inner-column-2 kadence-column_0293ac-73"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedbtn {"uniqueID":"_414af5-3e","btns":[{"text":"Place Order","link":"","target":"_self","size":"","paddingBT":"","paddingLR":"","color":"","background":"","border":"","backgroundOpacity":1,"borderOpacity":1,"borderRadius":"","borderWidth":"","colorHover":"","backgroundHover":"","borderHover":"","backgroundHoverOpacity":1,"borderHoverOpacity":1,"icon":"","iconSide":"right","iconHover":false,"cssClass":"","noFollow":false,"gap":5,"responsiveSize":["",""],"gradient":["#999999",1,0,100,"linear",180,"center center"],"gradientHover":["#777777",1,0,100,"linear",180,"center center"],"btnStyle":"basic","btnSize":"standard","backgroundType":"solid","backgroundHoverType":"solid","width":["","",""],"responsivePaddingBT":["",""],"responsivePaddingLR":["",""],"boxShadow":[false,"#000000",0.2,1,1,2,0,false],"boxShadowHover":[false,"#000000",0.4,2,2,3,0,false],"sponsored":false,"download":false,"tabletGap":"","mobileGap":"","inheritStyles":"inherit","iconSize":["","",""],"iconPadding":["","","",""],"iconTabletPadding":["","","",""],"iconMobilePadding":["","","",""],"onlyIcon":[false,"",""],"iconColor":"","iconColorHover":"","sizeType":"px","iconSizeType":"px","label":"","marginUnit":"px","margin":["","","",""],"tabletMargin":["","","",""],"mobileMargin":["","","",""],"anchor":"lf-checkout-button","borderStyle":""}],"widthType":"full","forceFullwidth":true} -->
<div class="wp-block-kadence-advancedbtn kt-btn-align-center kt-btn-tablet-align-inherit kt-btn-mobile-align-inherit kt-btns-wrap kt-btns_414af5-3e kt-force-btn-fullwidth"><div class="kt-btn-wrap kt-btn-wrap-0"><a id="lf-checkout-button" class="kt-button button kt-btn-0-action kt-btn-size-standard kt-btn-style-basic kt-btn-svg-show-always kt-btn-has-text-true kt-btn-has-svg-false kb-btn-global-inherit wp-block-button__link" href="#"><span class="kt-btn-inner-text">Place Order</span></a></div></div>
<!-- /wp:kadence/advancedbtn --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%","epAnimationGeneratedClass":"edplus_anim-2YG8mi","epGeneratedClass":"eplus-wrapper"} -->
<div class="wp-block-column eplus-wrapper" style="flex-basis:40%"><!-- wp:heading {"level":3,"epAnimationGeneratedClass":"edplus_anim-y5ifcO","epGeneratedClass":"eplus-wrapper"} -->
<h3 class=" eplus-wrapper">4. Order Summary</h3>
<!-- /wp:heading -->

<!-- wp:launchflows/review {"className":"lf-hide-title"} -->
<div class="wp-block-launchflows-review lf-hide-title">[lf-review]</div>
<!-- /wp:launchflows/review -->

<!-- wp:launchflows/wccoupon -->
<div class="wp-block-launchflows-wccoupon">[lf-wccoupon]</div>
<!-- /wp:launchflows/wccoupon -->

<!-- wp:paragraph {"epAnimationGeneratedClass":"edplus_anim-kW0naB","epGeneratedClass":"eplus-wrapper"} -->
<p class=" eplus-wrapper"></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
1. Contact Information

2. Shipping details

3. Payment Details

4. Order Summary

Billing details

Your order
