{"id":2634,"date":"2026-05-01T11:28:26","date_gmt":"2026-05-01T11:28:26","guid":{"rendered":"https:\/\/www.8theme.com\/documentation\/?post_type=docs&#038;p=2634"},"modified":"2026-05-01T11:38:05","modified_gmt":"2026-05-01T11:38:05","password":"","slug":"woocommerce-hooks-element-displaying-payment-methods-in-checkout-builder-with-elementor","status":"publish","type":"docs","link":"https:\/\/www.8theme.com\/documentation\/xstore\/troubleshooting\/woocommerce-hooks-element-displaying-payment-methods-in-checkout-builder-with-elementor\/","title":{"rendered":"WooCommerce Hooks Element: Displaying Payment Methods in Checkout Builder with Elementor"},"content":{"rendered":"\n<p>When using the XStore Checkout Builder, some additional WooCommerce elements (such as payment methods, express checkout buttons, or dynamic blocks) may not appear automatically. This happens because the builder overrides the default WooCommerce template structure.<\/p>\n\n\n\n<p>To restore or control these elements, you should use the <strong>WooCommerce Hooks<\/strong> element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Payment Methods May Not Appear<\/h3>\n\n\n\n<p>If you are experiencing issues such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Payment methods not showing on the checkout page<\/li>\n\n\n\n<li>Express payment buttons (Apple Pay, Google Pay, etc.) missing<\/li>\n\n\n\n<li>Checkout appearing incomplete or missing key fields<\/li>\n<\/ul>\n\n\n\n<p>The most common reason is that the required WooCommerce hooks are not included in your custom layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Solution: Use WooCommerce Hooks Element<\/h3>\n\n\n\n<p>The <strong>WooCommerce Hooks<\/strong> element allows you to manually insert default WooCommerce functionality into builder-based layouts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Hooks for Checkout Page<\/h3>\n\n\n\n<p>To properly display payment methods and checkout functionality, you should use the following hook:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>woocommerce_checkout_order_review<\/code><\/li>\n<\/ul>\n\n\n\n<p>This hook is responsible for rendering:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Payment gateways<\/li>\n\n\n\n<li>Order summary<\/li>\n\n\n\n<li>Place order button<\/li>\n<\/ul>\n\n\n\n<p>Without this hook, the checkout may not function correctly with additional plugins. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Add It<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <strong>XStore Builders > Checkout page<\/strong>. Edit your Checkout template with Elementor<\/li>\n\n\n\n<li>Add the <strong>WooCommerce Hooks<\/strong> widget to the desired section<\/li>\n\n\n\n<li>In widget settings, select:\n<ul class=\"wp-block-list\">\n<li>Hook: <code>woocommerce_checkout_order_review<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Place this element in the section where you want payment methods and order details to appear.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Express Checkout Buttons<\/h3>\n\n\n\n<p>If express payment buttons are not displayed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure your payment plugin (e.g., Stripe, PayPal) supports express checkout<\/li>\n\n\n\n<li>Add the appropriate hook before the checkout form:\n<ul class=\"wp-block-list\">\n<li><code>woocommerce_before_checkout_form<\/code><\/li>\n\n\n\n<li>or <code>woocommerce_checkout_before_customer_details<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"191\" src=\"https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-1024x191.png\" alt=\"\" class=\"wp-image-2639\" srcset=\"https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-1024x191.png 1024w, https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-300x56.png 300w, https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-768x144.png 768w, https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-1536x287.png 1536w, https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-2048x383.png 2048w, https:\/\/www.8theme.com\/documentation\/wp-content\/uploads\/2026\/05\/image-1-360x67.png 360w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Some payment providers inject express buttons via these hooks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cart Page: Express Checkout &amp; Cross-Sells<\/h3>\n\n\n\n<p>Similar behavior applies to the Cart page when using builders.<\/p>\n\n\n\n<p>To display:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Express checkout buttons<\/li>\n\n\n\n<li>Cross-sell products<\/li>\n<\/ul>\n\n\n\n<p>Use hooks like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>woocommerce_before_cart<\/code><\/li>\n\n\n\n<li><code>woocommerce_cart_collaterals<\/code><\/li>\n<\/ul>\n\n\n\n<p>These ensure that dynamic WooCommerce content appears correctly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Important Notes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Builder layouts do not automatically include additional WooCommerce hooks<\/li>\n\n\n\n<li>Missing hooks = missing functionality<\/li>\n\n\n\n<li>Always verify hook placement when something is not displayed from additional plugins<\/li>\n\n\n\n<li>Clear cache after making layout changes<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When using the XStore Checkout Builder, some additional WooCommerce elements (such as payment methods, express checkout buttons, or dynamic blocks) may not appear automatically. This happens because the builder overrides the default WooCommerce template structure. To restore or control these elements, you should use the WooCommerce Hooks element. Why Payment Methods May Not Appear If [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"doc_category":[44],"doc_tag":[],"class_list":["post-2634","docs","type-docs","status-publish","hentry","doc_category-troubleshooting"],"aioseo_notices":[],"year_month":"2026-05","word_count":340,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"author_nicename":"docs","author_url":"https:\/\/www.8theme.com\/documentation\/author\/docs\/"},"doc_category_info":[{"term_name":"Troubleshooting","term_url":"https:\/\/www.8theme.com\/documentation\/xstore\/troubleshooting\/"}],"doc_tag_info":[],"author_list":[{"ID":"1","user_login":"docs","display_name":"docs","id":"1"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs\/2634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/comments?post=2634"}],"version-history":[{"count":3,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs\/2634\/revisions"}],"predecessor-version":[{"id":2640,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs\/2634\/revisions\/2640"}],"wp:attachment":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/media?parent=2634"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=2634"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=2634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}