WooCommerce Hooks Element: Displaying Payment Methods in Checkout Builder with Elementor

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 you are experiencing issues such as:

• Payment methods not showing on the checkout page
• Express payment buttons (Apple Pay, Google Pay, etc.) missing
• Checkout appearing incomplete or missing key fields

The most common reason is that the required WooCommerce hooks are not included in your custom layout.

Solution: Use WooCommerce Hooks Element #

The WooCommerce Hooks element allows you to manually insert default WooCommerce functionality into builder-based layouts.

Key Hooks for Checkout Page #

To properly display payment methods and checkout functionality, you should use the following hook:

• woocommerce_checkout_order_review

This hook is responsible for rendering:

• Payment gateways
• Order summary
• Place order button

Without this hook, the checkout may not function correctly with additional plugins.

How to Add It #

1. Open XStore Builders > Checkout page. Edit your Checkout template with Elementor
2. Add the WooCommerce Hooks widget to the desired section
3. In widget settings, select:
   • Hook: woocommerce_checkout_order_review

Place this element in the section where you want payment methods and order details to appear.

Express Checkout Buttons #

If express payment buttons are not displayed:

• Ensure your payment plugin (e.g., Stripe, PayPal) supports express checkout
• Add the appropriate hook before the checkout form:
  • woocommerce_before_checkout_form
  • or woocommerce_checkout_before_customer_details

Some payment providers inject express buttons via these hooks.

Cart Page: Express Checkout & Cross-Sells #

Similar behavior applies to the Cart page when using builders.

To display:

• Express checkout buttons
• Cross-sell products

Use hooks like:

• woocommerce_before_cart
• woocommerce_cart_collaterals

These ensure that dynamic WooCommerce content appears correctly.

Important Notes #

• Builder layouts do not automatically include additional WooCommerce hooks
• Missing hooks = missing functionality
• Always verify hook placement when something is not displayed from additional plugins
• Clear cache after making layout changes