{"id":2295,"date":"2019-07-31T15:28:41","date_gmt":"2019-07-31T09:58:41","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&#038;p=2295"},"modified":"2023-07-18T11:31:38","modified_gmt":"2023-07-18T06:01:38","slug":"custom-checkout-step-frontend","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/magento-2-advanced-extra-fee-extension\/custom-checkout-step-frontend\/","title":{"rendered":"Custom Checkout Step in Frontend"},"content":{"rendered":"<p>Once you have configured the extension from the backend and added different checkout Addons, the extension will add a custom checkout step in frontend let your customer choose their required addons. You are free to customize and add your custom checkout addons and can charge the customer for buying extra service. Here are some example of custom checkout addons.<\/p>\n<ul>\n<li><strong>Custom Checkout Step for Delivery Options :<\/strong><\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-8995\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_delivery.png\" alt=\"frontend_checkout_step_-_delivery\" width=\"1351\" height=\"768\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_delivery.png 1351w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_delivery-300x171.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_delivery-1024x582.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_delivery-768x437.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_delivery-600x341.png 600w\" sizes=\"(max-width: 1351px) 100vw, 1351px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Custom Checkout Step for Gift Options :<\/strong><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8996\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_gifting_options.png\" alt=\"frontend_checkout_step_-_gifting_options\" width=\"1350\" height=\"768\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_gifting_options.png 1350w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_gifting_options-300x171.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_gifting_options-1024x583.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_gifting_options-768x437.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_gifting_options-600x341.png 600w\" sizes=\"(max-width: 1350px) 100vw, 1350px\" \/><\/p>\n<ul>\n<li><strong>Custom Checkout Step for Insurance Options :<\/strong><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8997\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_insurance.png\" alt=\"frontend_checkout_step_-_insurance\" width=\"1348\" height=\"768\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_insurance.png 1348w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_insurance-300x171.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_insurance-1024x583.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_insurance-768x438.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_insurance-600x342.png 600w\" sizes=\"(max-width: 1348px) 100vw, 1348px\" \/><\/p>\n<ul>\n<li><strong>Custom Checkout Step for Support Options :<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8998\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_support.png\" alt=\"frontend_checkout_step_-_support\" width=\"1351\" height=\"768\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_support.png 1351w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_support-300x171.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_support-1024x582.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_support-768x437.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/frontend_checkout_step_-_support-600x341.png 600w\" sizes=\"(max-width: 1351px) 100vw, 1351px\" \/><\/p>\n<p>Tax included at checkout order summary for extra addons<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13039\" title=\"applied tax setting in frontend\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/9_applied_tax_setting_in_frontend_1.png\" alt=\"applied tax setting in frontend\" width=\"1250\" height=\"600\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/9_applied_tax_setting_in_frontend_1.png 1250w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/9_applied_tax_setting_in_frontend_1-300x144.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/9_applied_tax_setting_in_frontend_1-1024x492.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2019\/07\/9_applied_tax_setting_in_frontend_1-768x369.png 768w\" sizes=\"(max-width: 1250px) 100vw, 1250px\" \/><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2289,"menu_order":4,"template":"","manualdocumentationcategory":[910],"manual_doc_tag":[],"class_list":["post-2295","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-m2-advanced-extra-fee"],"_links":{"self":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/2295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/2295\/revisions"}],"predecessor-version":[{"id":13040,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/2295\/revisions\/13040"}],"up":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/2289"}],"wp:attachment":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/media?parent=2295"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=2295"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=2295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}