{"id":13805,"date":"2021-07-12T13:29:13","date_gmt":"2021-07-12T18:29:13","guid":{"rendered":"https:\/\/launchflows.com\/?post_type=documentation&#038;p=13805"},"modified":"2022-01-26T09:09:18","modified_gmt":"2022-01-26T15:09:18","slug":"oxygen-builder","status":"publish","type":"documentation","link":"https:\/\/launchflows.com\/documentation\/oxygen-builder\/","title":{"rendered":"Oxygen Builder"},"content":{"rendered":"<h3>How To Setup<\/h3>\n<p>LaunchFlows has a native integration with Oxygen Builder that allows you to output the custom checkout layout of your choice from WP Gutenberg to a Code Block in Oxygen.<br \/>\nWe recommend this instead of using individual LaunchFlows checkout components directly in Oxygen because it preseves the individual checkout component styling.<\/p>\n<h3>Step One<\/h3>\n<p>Create and save a new checkout page in WordPress with the url of your choice.<\/p>\n<h3>Step Two<\/h3>\n<p>Open Oxygen builder and add a Code Block to your structure.<\/p>\n<h3>Step Three<\/h3>\n<p>Add this snippet to an Oxygen Code Block<br \/>\n<script src=\"https:\/\/gist.github.com\/wplaunchify\/c44069549820337ff9af86d40a4a7bce.js\"><\/script><\/p>\n<h4>Step Four (optional but recommended)<\/h4>\n<p>Create or import a custom layout of the LaunchFlows checkout components of your choice using Gutenberg blocks. This layout as a whole will be output to the Code Block inside of your Oxygen layout. If you don&#8217;t create a custom layout, you will see the default WooCommerce checkout layout.<\/p>\n<p><a href=\"https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13807 size-full\" src=\"https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-scaled.jpg\" alt=\"LaunchFlows Oxygen Layout With Gutenberg\" width=\"2560\" height=\"1245\" srcset=\"https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-scaled.jpg 2560w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-300x146.jpg 300w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-1024x498.jpg 1024w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-768x373.jpg 768w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-1536x747.jpg 1536w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-2048x996.jpg 2048w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-layout-gutenberg-600x292.jpg 600w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/a> <a href=\"https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13809 size-full\" src=\"https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-scaled.jpg\" alt=\"Oxygen Code Block Snippet\" width=\"2560\" height=\"1234\" srcset=\"https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-scaled.jpg 2560w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-300x145.jpg 300w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-1024x494.jpg 1024w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-768x370.jpg 768w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-1536x740.jpg 1536w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-2048x987.jpg 2048w, https:\/\/launchflows.com\/wp-content\/uploads\/2021\/07\/launchflows-oxygen-code-block-snippet-600x289.jpg 600w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/www.loom.com\/share\/3a2e00f105ac4c2884e8b088311e1989\" target=\"_blank\" rel=\"noopener\">Click To Watch Video<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>How To Setup LaunchFlows has a native integration with Oxygen Builder that allows you to output the custom checkout layout of your choice from WP Gutenberg to a Code Block in Oxygen. We recommend this instead of using individual LaunchFlows checkout components directly in Oxygen because it preseves the individual checkout component styling. Step One&#8230;<\/p>\n","protected":false},"featured_media":0,"menu_order":25,"template":"","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"documentation_tags":[211],"acf":[],"featured_image_src_large":false,"author_info":[],"comment_info":"","taxonomy_info":{"documentation_categories":[{"value":256,"label":"Page Builders &amp; Themes"}],"documentation_tags":[{"value":211,"label":"Oxygen"}]},"_links":{"self":[{"href":"https:\/\/launchflows.com\/wp-json\/wp\/v2\/documentation\/13805"}],"collection":[{"href":"https:\/\/launchflows.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/launchflows.com\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":0,"href":"https:\/\/launchflows.com\/wp-json\/wp\/v2\/documentation\/13805\/revisions"}],"wp:attachment":[{"href":"https:\/\/launchflows.com\/wp-json\/wp\/v2\/media?parent=13805"}],"wp:term":[{"taxonomy":"documentation_tags","embeddable":true,"href":"https:\/\/launchflows.com\/wp-json\/wp\/v2\/documentation_tags?post=13805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}