{"id":27188,"date":"2022-09-25T12:00:00","date_gmt":"2022-09-25T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=27188"},"modified":"2025-06-05T15:53:25","modified_gmt":"2025-06-05T12:53:25","slug":"woocommerce-checkout-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/","title":{"rendered":"WooCommerce Checkout widget"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Intro<\/h2>\n\n\n\n<p>Elementor\u2019s WooCommerce <em>Checkout<\/em> widget can provide you with an even more customizable solution for your ecommerce website. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section.&nbsp;<\/p>\n\n\n\n<p>When publishing, you will be prompted with the option to automatically set your new page as the default checkout page rather than needing to go through the WooCommerce settings.<\/p>\n\n\n\n<p>[callout type=&#8221;note&#8221;]You must have WooCommerce installed in order to use its features, including products and WooCommerce widgets.[\/callout]<\/p>\n\n\n\n<p>[callout type=&#8221;note&#8221;]This widget works perfectly with the Hello theme. The widget works with other themes as well but you may encounter some layout and style issues.[\/callout]<\/p>\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 title=\"How to Use the WooCommerce Checkout Widget in Elementor [PRO]\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/_5IaA32RAh8?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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">General<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-General-Content.png\" alt=\"\" class=\"wp-image-27190\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Layout<\/strong>: From the dropdown menu, select between one column, or two column layout<\/li>\n\n\n\n<li><strong>Sticky Right Column<\/strong>: If two column layout is used, use the toggle control enable \/ disable sticky option for the right column<\/li>\n\n\n\n<li><strong>Offset<\/strong>: If sticky option is enabled, enter a value in PX to offset the top margin of the sticky effect<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Billing Details<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Billing-Details.png\" alt=\"\" class=\"wp-image-27191\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Section Title<\/strong>: Edit the default section title by entering text into the field or choosing the dynamic settings<\/li>\n\n\n\n<li><strong>Alignment<\/strong>: Using the icons, select between left, center, or right alignment<\/li>\n\n\n\n<li><strong>Form Items<\/strong>: For each of the form items you may edit the options below\n<ol class=\"wp-block-list\">\n<li><strong>Label<\/strong>: Enter the desired value in the text field<\/li>\n\n\n\n<li><strong>Placeholder<\/strong>: Enter the desired value in the text field\n<ol class=\"wp-block-list\">\n<li><strong>Advanced Options<\/strong>: Additional options may be found in the advanced tab below\n<ol class=\"wp-block-list\">\n<li><strong>Default Value<\/strong>: Enter a default value in the text field if required.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Shipping Details<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Shipping-Details.png\" alt=\"\" class=\"wp-image-27192\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Section Title<\/strong>: Edit the default section title by entering text into the field or choosing the dynamic settings<\/li>\n\n\n\n<li><strong>Alignment<\/strong>: Using the icons, select between left, center, or right alignment<\/li>\n\n\n\n<li><strong>Form Items<\/strong>: For each of the form items you may edit the options below\n<ol class=\"wp-block-list\">\n<li><strong>Label<\/strong>: Enter the desired value in the text field<\/li>\n\n\n\n<li><strong>Placeholder<\/strong>: Enter the desired value in the text field\n<ol class=\"wp-block-list\">\n<li><strong>Advanced Options<\/strong>: Additional options may be found in the advanced tab below\n<ol class=\"wp-block-list\">\n<li><strong>Default Value<\/strong>: Enter a default value in the text field if required.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Additional Information<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Additional-Information.png\" alt=\"\" class=\"wp-image-27193\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Additional Information Toggle<\/strong>: Use the toggle control to show \/ hide the additional information section.<\/li>\n\n\n\n<li><strong>Items<\/strong>: For each of the items you may edit the options below\n<ol class=\"wp-block-list\">\n<li><strong>Label<\/strong>: Enter the desired value in the text field<\/li>\n\n\n\n<li><strong>Placeholder<\/strong>: Enter the desired value in the text field\n<ol class=\"wp-block-list\">\n<li><strong>Advanced Options<\/strong>: Additional options may be found in the advanced tab below\n<ol class=\"wp-block-list\">\n<li><strong>Default Value<\/strong>: Enter a default value in the text field if required.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Your Order<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Your-Order.png\" alt=\"\" class=\"wp-image-27194\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Section Title<\/strong>: Edit the default section title by entering text into the field or choosing the dynamic settings<\/li>\n\n\n\n<li><strong>Alignment<\/strong>: Using the icons, select between left, center, or right alignment<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Coupon<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Coupon.png\" alt=\"\" class=\"wp-image-27195\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Show\/Hide Coupon<\/strong>: You may use the toggle if you wish to hide the coupon field from the checkout page<\/li>\n\n\n\n<li><strong>Section Title<\/strong>: Edit the default section title by entering text into the field or choosing the dynamic settings<\/li>\n\n\n\n<li><strong>Link<\/strong>: Edit the default text of the coupon code link by entering the value in the text field<\/li>\n\n\n\n<li><strong>Alignment<\/strong>: Using the icons, select between left, center, or right alignment<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Apply Button<\/h4>\n\n\n\n<p>Choose the alignment options are left, center, right, or justified for the Apply Coupon button by clicking the appropriate icon.<\/p>\n\n\n\n<p class=\"callout-yellow\">Note: This control will only affect the screen sizes on tablet and below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Payment<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Payment-Options.png\" alt=\"\" class=\"wp-image-27196\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Terms and conditions<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Message<\/strong>: Enter the value in the text field or use the dynamic settings<\/li>\n\n\n\n<li><strong>Link<\/strong>:<strong> <\/strong>Edit the default link text by entering the desired value in the text field<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Purchase Button<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Alignment<\/strong>: Using the icons, select between left, center, or right alignment<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Style<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Sections<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Style-Sections.png\" alt=\"\" class=\"wp-image-27197\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Background Color<\/strong>: From the color picker, choose the background color for your sections. This color will apply to all sections. You may apply a different background color to a section(s) in the <em>Customize<\/em> options shown below&nbsp;<\/li>\n\n\n\n<li><strong>Box Shadow<\/strong>: Click the pencil icon to set the color and shadow options<\/li>\n\n\n\n<li><strong>Border type<\/strong>: From the dropdown menu select between solid, double, dotted, dashed, or grooved<\/li>\n\n\n\n<li><strong>Width<\/strong> (border): Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Color<\/strong> (border): From the color picker, choose the background color for your border<\/li>\n\n\n\n<li><strong>Border Radius<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Margin<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Style-Typography.png\" alt=\"\" class=\"wp-image-27198\"\/><\/figure>\n\n\n\n<p>For each of the following components, <em>Titles, Secondary Titles, Descriptions, Messages, Checkboxes, and Radio Buttons<\/em> the following style options are available.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the <em>Customize<\/em> options shown below&nbsp;<\/li>\n\n\n\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n\n\n\n<li><strong>Text Shadow<\/strong> (Titles Only): Click the pencil icon to open the shadow properties options.<\/li>\n\n\n\n<li><strong>Spacing<\/strong>: Use the slider to increase or decrease the spacing between components.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Links<\/h4>\n\n\n\n<p>Choose the appearance of the link options on normal and hover states<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Link Color<\/strong>: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the <em>Customize<\/em> options shown below&nbsp;<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Forms&nbsp;<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Style-Fields-196x1024.png\" alt=\"\" class=\"wp-image-27199\" style=\"width:326px\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Layout<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Column Gap<\/strong>: Use the slider or enter the value in the field in PX<\/li>\n\n\n\n<li><strong>Rows Gap<\/strong>: Use the slider or enter the value in the field in PX<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Labels<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your labels. This color will apply to all labels. You may apply a custom color to a sections labels in the <em>Customize<\/em> options shown below&nbsp;<\/li>\n\n\n\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n\n\n\n<li><strong>Spacing<\/strong>: Use the slider to increase or decrease the spacing between components.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Fields<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n\n\n\n<li><strong>Color<\/strong> (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the <em>Customize<\/em> options shown below<\/li>\n\n\n\n<li><strong>Background Type<\/strong>: Use the icons to choose between a solid or gradient background<\/li>\n\n\n\n<li><strong>Color<\/strong> (background): From the color picker, select the color(s) for the field<\/li>\n\n\n\n<li><strong>Image<\/strong>: Click to select or upload an image to the media library to use as the background image of your field<\/li>\n\n\n\n<li><strong>Box Shadow<\/strong>: Click the pencil icon to open the shadow properties options.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Button<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n\n\n\n<li><strong>Color<\/strong> (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the <em>Customize<\/em> options shown below<\/li>\n\n\n\n<li><strong>Background Type<\/strong>: Use the icons to choose between a solid or gradient background<\/li>\n\n\n\n<li><strong>Color<\/strong> (background): From the color picker, select the color(s) for the field<\/li>\n\n\n\n<li><strong>Image<\/strong>: Click to select or upload an image to the media library to use as the background image of your field<\/li>\n\n\n\n<li><strong>Box Shadow<\/strong>: Click the pencil icon to open the shadow properties options.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Borders<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Border type<\/strong>: From the dropdown menu select between solid, double, dotted, dashed, or grooved<\/li>\n\n\n\n<li><strong>Width<\/strong> (border): Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Color<\/strong> (border): From the color picker, choose the background color for your border<\/li>\n\n\n\n<li><strong>Border Radius<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Order Summary<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-Style-Summary.png\" alt=\"\" class=\"wp-image-27200\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Layout<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Rows Gap<\/strong>: Use the slider or enter the value in the field in PX<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Items<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your Items<\/li>\n\n\n\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Variations<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your Variations<\/li>\n\n\n\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Dividers<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your Dividers<\/li>\n\n\n\n<li><strong>Weight<\/strong>: Use the slider or manual enter a value in the field (PX, EM)<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Titles and Totals<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your Variations<\/li>\n\n\n\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Divider Total<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color<\/strong>: From the color picker, choose the color for your Divider Total<\/li>\n\n\n\n<li><strong>Weight<\/strong>: Use the slider or manual enter a value in the field (PX, EM)<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Purchase Button<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Commerce-Style-Checkout-Button.png\" alt=\"\" class=\"wp-image-27201\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Typography<\/strong>: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options<\/li>\n\n\n\n<li><strong>Text Shadow<\/strong>: Click the pencil icon to open the shadow properties options<\/li>\n\n\n\n<li><strong>Text Color<\/strong> (Text): From the color picker, choose the color for your field text.&nbsp;<\/li>\n\n\n\n<li><strong>Background Type<\/strong>: Use the icons to choose between a solid or gradient background<\/li>\n\n\n\n<li><strong>Color<\/strong> (background): From the color picker, select the color(s) for the field<\/li>\n\n\n\n<li><strong>Image<\/strong>: Click to select or upload an image to the media library to use as the background image of your field<\/li>\n\n\n\n<li><strong>Box Shadow<\/strong>: Click the pencil icon to open the shadow properties options.<\/li>\n\n\n\n<li><strong>Border type<\/strong>: From the dropdown menu select between solid, double, dotted, dashed, or grooved<\/li>\n<\/ol>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><strong>Width<\/strong> (border): Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Color<\/strong> (border): From the color picker, choose the background color for your border<\/li>\n\n\n\n<li><strong>Border Radius<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Enter a chosen value in the fields based on px, em, or %<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Customize<\/h3>\n\n\n\n<p>The customize option allows you to style a section(s) independently of the other sections. Click the + icon to add or remove actions from the customizer. Additional styling options per section will appear below the customizer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/CustomizeCheckout.gif\" alt=\"\" class=\"wp-image-27202\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced<\/h2>\n\n\n\n<p>Global <a href=\"https:\/\/elementor.com\/help\/advanced-tab\/\">Advanced tab<\/a> options are available for this widget.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Intro Elementor\u2019s WooCommerce Checkout widget can provide you with an even more customizable solution for your ecommerce website. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section.&nbsp; When publishing, you will be [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3f1d50e9e5869153c8b1f"],"footnotes":""},"categories":[1454],"tags":[1389,1388,1382,1390,1398,1235],"class_list":["post-27188","post","type-post","status-publish","format-standard","hentry","category-woocommerce-widgets","tag-advanced","tag-agency","tag-ecommerce","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce Checkout widget | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about WooCommerce Checkout widget in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Checkout widget | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about WooCommerce Checkout widget in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-25T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-05T12:53:25+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"WooCommerce Checkout widget\",\"datePublished\":\"2022-09-25T09:00:00+00:00\",\"dateModified\":\"2025-06-05T12:53:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\"},\"wordCount\":1748,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-General-Content.png\",\"keywords\":[\"Advanced\",\"Agency\",\"eCommerce\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"WooCommerce widgets\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\",\"url\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\",\"name\":\"WooCommerce Checkout widget | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-General-Content.png\",\"datePublished\":\"2022-09-25T09:00:00+00:00\",\"dateModified\":\"2025-06-05T12:53:25+00:00\",\"description\":\"Learn everything about WooCommerce Checkout widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Online Commerce\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/online-commerce\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"WooCommerce widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/online-commerce\/woocommerce-widgets\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"WooCommerce Checkout widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WooCommerce Checkout widget | Elementor","description":"Learn everything about WooCommerce Checkout widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce Checkout widget | Elementor","og_description":"Learn everything about WooCommerce Checkout widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/","og_site_name":"Help","article_published_time":"2022-09-25T09:00:00+00:00","article_modified_time":"2025-06-05T12:53:25+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"WooCommerce Checkout widget","datePublished":"2022-09-25T09:00:00+00:00","dateModified":"2025-06-05T12:53:25+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/"},"wordCount":1748,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-General-Content.png","keywords":["Advanced","Agency","eCommerce","Expert","Legacy Essential","Pro"],"articleSection":["WooCommerce widgets"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/","url":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/","name":"WooCommerce Checkout widget | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/10\/Woo-Checkout-General-Content.png","datePublished":"2022-09-25T09:00:00+00:00","dateModified":"2025-06-05T12:53:25+00:00","description":"Learn everything about WooCommerce Checkout widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/woocommerce-checkout-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Online Commerce","item":"https:\/\/elementor.com\/help\/elementor-editor\/online-commerce\/"},{"@type":"ListItem","position":4,"name":"WooCommerce widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/online-commerce\/woocommerce-widgets\/"},{"@type":"ListItem","position":5,"name":"WooCommerce Checkout widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=27188"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27188\/revisions"}],"predecessor-version":[{"id":58518,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27188\/revisions\/58518"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=27188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=27188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=27188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}