Customer Cart and Checkout Hooks
The twenty-nine placement points from the catalogue to the completed order.
Overview
The placement points along the customer purchase path live here: the catalogue, the product detail, configuration, the basket, checkout and the completed order.
Everything you add along this path stands in front of a buying decision. A slow script at the payment step turns directly into orders that never complete; put tracking code on the completion page.
Reference
Above the plan list
uiclient.catalog.plans.before
Appears above the plan cards on the catalogue page.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.catalog.plans.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Below the plan list
uiclient.catalog.plans.after
Appears below the plan cards.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.catalog.plans.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The foot of a plan card
uiclient.plan_card.footer
Appears at the foot of every plan card, separately. The card itself is not passed: you cannot tell which plan it is from here.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.plan_card.footer', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the product gallery
uiclient.product_detail.gallery.after
Appears after the image area on the product detail.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.product_detail.gallery.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Above the purchase box
uiclient.product_detail.purchase.before
Appears above the price and the purchase button.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.product_detail.purchase.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Below the purchase box
uiclient.product_detail.purchase.after
Appears below the purchase button. It suits a reassuring note or an extra condition.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.product_detail.purchase.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the product tabs
uiclient.product_detail.tabs.end
Appears at the end of the tab bar on the product detail.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.product_detail.tabs.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the software store grid
uiclient.software_store.grid.after
Appears after the cards in the software store.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.software_store.grid.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the add-on page
uiclient.addon_page.after
Appears after the content of the add-on purchase page.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.addon_page.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the configuration sections
uiclient.configure.sections.after
Appears after the sections in the order configuration step.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.configure.sections.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the configuration add-ons
uiclient.configure.addons.after
Appears after the add-on selection in the configuration step.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.configure.addons.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the configuration summary
uiclient.configure.summary.bottom
Appears below the price summary in the configuration step.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.configure.summary.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Above the basket items
uiclient.cart.items.top
Appears above the items in the basket.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.cart.items.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the basket summary
uiclient.cart.summary.bottom
Appears below the basket total summary.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.cart.summary.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the empty basket message
uiclient.cart.empty.after
Appears after the message shown when the basket is empty. It runs only when the basket is empty, which makes it right for a suggestion area.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.cart.empty.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the checkout header
uiclient.checkout.header.end
Appears at the end of the header area in the checkout step.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.header.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the billing details
uiclient.checkout.billing.after
Appears after the billing address section.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.billing.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the payment methods
uiclient.checkout.methods.after
Appears after the payment method choice.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.methods.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Above the saved cards
uiclient.checkout.cards.top
Appears above the list of saved cards.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.cards.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the terms box
uiclient.checkout.terms.after
Appears after the terms checkbox. If you add a consent of your own, you must enforce it yourself: the core only knows its own box.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.terms.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the checkout summary
uiclient.checkout.summary.bottom
Appears below the total summary in the checkout step.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.summary.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Before the payment step
uiclient.checkout.payment.before
Appears immediately before the payment begins. It suits a final warning.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.payment.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the checkout footer
uiclient.checkout.footer.end
Appears in the footer of the checkout step.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.checkout.footer.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the payment page
uiclient.pay.body.top
Appears at the very top of the payment page.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.pay.body.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the payment page
uiclient.pay.body.bottom
Appears at the very bottom of the payment page.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.pay.body.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the card form
uiclient.pay.card.after
Appears after the card details form. This area handles card data: remember that a script you add here can reach those fields.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.pay.card.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the paid notice
uiclient.order_complete.paid.after
Appears after the payment confirmation on the order complete page.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.order_complete.paid.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the order summary
uiclient.order_complete.paid.details.end
Appears at the end of the summary details of the completed order.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.order_complete.paid.details.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the complete page
uiclient.order_complete.body.bottom
Appears at the very bottom of the order complete page. The right place for conversion tracking.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.order_complete.body.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Pitfalls
The core does not enforce a checkbox you add
Put your own consent box at the terms point and the core never checks whether it is ticked: the order completes with the box empty. You must enforce it on your side.
Every delay on the payment path is a lost sale
A script at the payment step that calls an outside service makes the customer wait before they pay. Move work like conversion tracking to the order completion page, where waiting costs nothing.
Related Articles
- Customer Site Hooks
- Order Hooks
- Support Ticket Hooks
Was this helpful?
Thanks for your feedback!
Still Need Help?
Our support team is here around the clock for anything you can't find above.