Caddy cart screen action hooks

The Caddy Cart Screen provides several action hooks that allow developers to customize and enhance the functionality of the cart screen. Below is a comprehensive guide to the available hooks, their purposes, and when they should be used.

Action Hooks Overview

1. caddy_before_cart_screen_data

• Purpose: Fires before any cart screen data is displayed.
• Use Case: Add content, scripts, or notices that should appear at the very beginning of the cart screen.

2. caddy_before_cart_items

• Purpose: Fires before displaying cart items.
• Conditions: Only executes if the cart is not empty.
• Use Case: Insert additional content or features (e.g., promotional banners) above the cart items list.

3. caddy_after_cart_items

• Purpose: Fires after all cart items have been displayed.
• Conditions: Only executes if the cart is not empty.
• Use Case: Insert content or actions (e.g., discount codes, cart review messages) after the cart items list.

4. caddy_after_cart_screen_data

• Purpose: Fires after all cart screen data is displayed.
• Use Case: Add closing notes, additional scripts, or messages after the cart details.

5. caddy_before_cart_screen_totals

• Purpose: Fires before displaying the cart totals section.
• Conditions: Only executes if the cart is not empty.
• Use Case: Insert custom notices, such as reminders or conditional messages, above the cart totals.

6. caddy_after_cart_screen_totals

• Purpose: Fires after the cart totals section.
• Conditions: Only executes if the cart is not empty.
• Use Case: Add additional calls-to-action, messages, or dynamic offers below the totals.

7. caddy_after_cart_screen_checkout_button

• Purpose: Fires after the checkout button.
• Conditions: Only executes if the cart is not empty.
• Use Case: Include upsell messages, a cart reminder, or additional prompts to increase cart value or enhance the checkout experience.

Practical Examples

Example 1: Adding a Custom Message Before Cart Items

Hook: caddy_before_cart_screen_data

add_action('caddy_before_cart_screen_data', function() {
    echo '<div class="custom-banner">? Big Sale Today! Get an extra 10% off at checkout!</div>';
});

Example 2: Adding a Custom Message After Cart Items

Hook: caddy_after_cart_items

add_action('caddy_after_cart_items', function() {
    echo '<div class="cart-summary-note">Want to save more? Add one more item to qualify for free shipping!</div>';
});

Example 3: Displaying a Discount Reminder After Cart Totals

Hook: caddy_after_cart_screen_totals

add_action('caddy_after_cart_screen_totals', function() {
    echo '<div class="discount-reminder">Use code <strong>SAVE10</strong> at checkout to get 10% off your order!</div>';
});

Best Practices

• Always check for conditions (e.g., whether the cart is empty) to ensure the hook executes effectively.
• Use priority arguments to control the order of execution when multiple hooks target the same area.
• Avoid overwriting existing content; instead, append or prepend to maintain compatibility with other customizations.

These hooks provide robust flexibility to enhance the cart screen, helping tailor the shopping experience to meet specific needs and goals.

More hooks available in Caddy 3.0

In addition to the hooks above, Caddy 3.0’s cart templates fire these actions:

• caddy_free_shipping_title_text — inside the free shipping bar title (fires when a free shipping amount is configured).
• caddy_display_registration_message — where the welcome/registration message renders, on both the cart and saves screens.
• caddy_product_upsells_slider — at the product recommendations slider position.
• caddy_after_quantity_input — after the quantity field on each cart item. Receives $product_id.
• caddy_cart_after_product — after each cart item’s markup. Receives $cart_item, $cart_item_key.
• caddy_after_nav_tabs — after the cart/saves tab navigation.
• caddy_after_screen_tabs — after the tab content screens.

There’s also a filter for the floating bubble’s icon: caddy_cart_bubble_icon receives the icon SVG markup — see how to change the cart icon for an example.