Delivery Options Checkout Setup

March 21, 2025 · AI Conversations

User
lient would like to add the following delivery options (perhaps a dropdown) at checkout:

COLLECTION – FREE
TINAHELY – €5
ARKLOW – €18
ANNACURRA – €8
AUGHRIM – €12
BALLINGLEN -€6
BALLYCONNELL – €12
CARNEW – €10
COOLKENNO – €10
HACKETSTOWN – €10
GOREY – €18
KILTEGAN – €15
KNOCKANANNA -€10
RATHDRUM – €18
SHILLELAGH – €7
TULLOW – €18

FOR NON LISTED AREA DELIVERY CHARGES PLEASE CONTACT US!
and adjust price based on his

Assistant
You can add these custom delivery options in WooCommerce using one of the following methods:

—

### ✅ **Option 1: Using a Plugin (Recommended for Simplicity)**

Install a plugin like **[Table Rate Shipping for WooCommerce by Flexible Shipping](https://wordpress.org/plugins/flexible-shipping/)** or **[Conditional Shipping and Payments](https://woocommerce.com/products/conditional-shipping-and-payments/)**.

#### Steps (using Flexible Shipping):
1. **Install & Activate** the plugin.
2. Go to **WooCommerce → Settings → Shipping**.
3. Add a new shipping **zone** and call it something like “Local Areas.”
4. Add a **shipping method** → Choose "Flexible Shipping".
5. Inside the method settings, add rules like:

| Condition | Value | Cost |
|——————|—————|——|
| Destination | Tinahely | €5 |
| Destination | Arklow | €18 |
| Destination | Annacurra | €8 |
| … | … | … |

> *Each “destination” would typically be matched based on postcode or city, depending on your WooCommerce setup.*

6. Add a "Collection – FREE" option with cost €0.
7. At the end, display a message like:
_“For non-listed areas, please contact us for delivery charges.”_

—

### ✅ **Option 2: Custom Dropdown at Checkout (Code-Based Solution)**

If you'd prefer a dropdown instead of regular shipping zones:

#### Add this code to your theme's `functions.php` or a custom plugin:

add_action('woocommerce_review_order_before_payment', 'custom_delivery_dropdown');

function custom_delivery_dropdown() {
    echo '<h3>Delivery Options</h3>';
    woocommerce_form_field('custom_delivery_area', array(
        'type'    => 'select',
        'label'   => 'Choose your delivery area',
        'required'=> true,
        'options' => array(
            '' => 'Select an option',
            'COLLECTION'     => 'COLLECTION - FREE',
            'TINAHELY'       => 'TINAHELY - €5',
            'ARKLOW'         => 'ARKLOW - €18',
            'ANNACURRA'      => 'ANNACURRA - €8',
            'AUGHRIM'        => 'AUGHRIM - €12',
            'BALLINGLEN'     => 'BALLINGLEN - €6',
            'BALLYCONNELL'   => 'BALLYCONNELL - €12',
            'CARNEW'         => 'CARNEW - €10',
            'COOLKENNO'      => 'COOLKENNO - €10',
            'HACKETSTOWN'    => 'HACKETSTOWN - €10',
            'GOREY'          => 'GOREY - €18',
            'KILTEGAN'       => 'KILTEGAN - €15',
            'KNOCKANANNA'    => 'KNOCKANANNA - €10',
            'RATHDRUM'       => 'RATHDRUM - €18',
            'SHILLELAGH'     => 'SHILLELAGH - €7',
            'TULLOW'         => 'TULLOW - €18',
            'OTHER'          => 'Other area – Please contact us',
        )
    ));
}

add_action('woocommerce_checkout_process', 'validate_custom_delivery_dropdown');
function validate_custom_delivery_dropdown() {
    if (empty($_POST['custom_delivery_area'])) {
        wc_add_notice('Please select a delivery area.', 'error');
    }
}

add_action('woocommerce_checkout_create_order', 'add_custom_delivery_fee', 10, 2);
function add_custom_delivery_fee($order, $data) {
    $fees = array(
        'TINAHELY' => 5, 'ARKLOW' => 18, 'ANNACURRA' => 8, 'AUGHRIM' => 12,
        'BALLINGLEN' => 6, 'BALLYCONNELL' => 12, 'CARNEW' => 10,
        'COOLKENNO' => 10, 'HACKETSTOWN' => 10, 'GOREY' => 18,
        'KILTEGAN' => 15, 'KNOCKANANNA' => 10, 'RATHDRUM' => 18,
        'SHILLELAGH' => 7, 'TULLOW' => 18
    );

    $selected_area = sanitize_text_field($_POST['custom_delivery_area']);

    if ($selected_area && isset($fees[$selected_area])) {
        $order->add_fee('Delivery to ' . $selected_area, $fees[$selected_area]);
    }
}

—

### 💬 Frontend Display Idea (Optional)

You can use a notice at the checkout to say:

> _Delivery is available to selected areas. For areas not listed, please contact us directly._

—

Would you prefer the **plugin** route or the **custom code**? I can tailor it further depending on your setup (e.g., theme or builder being used).

User
also update price at checkout when selected
Assistant
Perfect! To update the price dynamically **at checkout** when a customer selects a delivery area from the dropdown, we'll enhance the **custom code approach** with JavaScript so the delivery fee is added **without refreshing the page**.

—

### ✅ Final Working Solution

#### 🧩 Step 1: PHP – Add dropdown & apply delivery fee

Put this in your theme's `functions.php` or a custom plugin:

// 1. Add the delivery dropdown to checkout
add_action('woocommerce_review_order_before_payment', 'custom_delivery_dropdown');
function custom_delivery_dropdown() {
    $options = [
        '' => 'Select an option',
        'COLLECTION' => 'COLLECTION - FREE',
        'TINAHELY' => 'TINAHELY - €5',
        'ARKLOW' => 'ARKLOW - €18',
        'ANNACURRA' => 'ANNACURRA - €8',
        'AUGHRIM' => 'AUGHRIM - €12',
        'BALLINGLEN' => 'BALLINGLEN - €6',
        'BALLYCONNELL' => 'BALLYCONNELL - €12',
        'CARNEW' => 'CARNEW - €10',
        'COOLKENNO' => 'COOLKENNO - €10',
        'HACKETSTOWN' => 'HACKETSTOWN - €10',
        'GOREY' => 'GOREY - €18',
        'KILTEGAN' => 'KILTEGAN - €15',
        'KNOCKANANNA' => 'KNOCKANANNA - €10',
        'RATHDRUM' => 'RATHDRUM - €18',
        'SHILLELAGH' => 'SHILLELAGH - €7',
        'TULLOW' => 'TULLOW - €18',
        'OTHER' => 'Other area – Please contact us',
    ];

    echo '<h3>Delivery Options</h3>';
    woocommerce_form_field('custom_delivery_area', [
        'type' => 'select',
        'class' => ['form-row-wide'],
        'required' => true,
        'options' => $options,
    ]);
}

// 2. Validate field
add_action('woocommerce_checkout_process', 'validate_custom_delivery_dropdown');
function validate_custom_delivery_dropdown() {
    if (empty($_POST['custom_delivery_area'])) {
        wc_add_notice('Please select a delivery area.', 'error');
    }
}

// 3. Save field to order meta
add_action('woocommerce_checkout_create_order', function ($order, $data) {
    if (!empty($_POST['custom_delivery_area'])) {
        $order->update_meta_data('custom_delivery_area', sanitize_text_field($_POST['custom_delivery_area']));
    }
}, 10, 2);

// 4. Apply delivery fee
add_action('woocommerce_cart_calculate_fees', 'apply_custom_delivery_fee');
function apply_custom_delivery_fee($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;

    $fees = [
        'TINAHELY' => 5, 'ARKLOW' => 18, 'ANNACURRA' => 8, 'AUGHRIM' => 12,
        'BALLINGLEN' => 6, 'BALLYCONNELL' => 12, 'CARNEW' => 10,
        'COOLKENNO' => 10, 'HACKETSTOWN' => 10, 'GOREY' => 18,
        'KILTEGAN' => 15, 'KNOCKANANNA' => 10, 'RATHDRUM' => 18,
        'SHILLELAGH' => 7, 'TULLOW' => 18
    ];

    $selected = WC()->session->get('custom_delivery_area');

    if ($selected && isset($fees[$selected])) {
        $cart->add_fee('Delivery to ' . $selected, $fees[$selected]);
    }
}

// 5. Set session from posted field
add_action('woocommerce_checkout_update_order_review', function ($post_data) {
    parse_str($post_data, $data);
    if (isset($data['custom_delivery_area'])) {
        WC()->session->set('custom_delivery_area', sanitize_text_field($data['custom_delivery_area']));
    }
});

—

#### 🧩 Step 2: JavaScript – Refresh cart totals when dropdown changes

Add this in your theme (via `functions.php`) to enqueue the JS:

add_action('wp_enqueue_scripts', function () {
    if (is_checkout()) {
        wp_add_inline_script('woocommerce', "
            jQuery(function($) {
                $('form.checkout').on('change', 'select[name=custom_delivery_area]', function() {
                    $('body').trigger('update_checkout');
                });
            });
        ");
    }
});

—

### ✅ Result

– The delivery dropdown is shown on the checkout page.
– Selecting a location **updates the delivery charge instantly** without reloading the page.
– The selected location is saved in the order meta.
– Free for COLLECTION, and a custom message for “OTHER”.

—

Let me know if you want this also to show in **order confirmation emails** or **admin panel order details** — I can help add that too.

User
Yes
Assistant
Great! Let's display the **selected delivery location** in:

—

### ✅ 1. **Order Admin Panel (WooCommerce Admin)**
So the store owner can see the chosen area.

Add this to your `functions.php`:

add_action('woocommerce_admin_order_data_after_billing_address', function ($order) {
    $area = $order->get_meta('custom_delivery_area');
    if ($area) {
        echo '<p><strong>Delivery Area:</strong> ' . esc_html($area) . '</p>';
    }
});

—

### ✅ 2. **Customer Emails (Order Confirmation, etc.)**

Add this to display in all customer emails (like "Processing" or "Completed"):

add_filter('woocommerce_email_order_meta_fields', function ($fields, $sent_to_admin, $order) {
    $area = $order->get_meta('custom_delivery_area');
    if ($area) {
        $fields['custom_delivery_area'] = [
            'label' => 'Delivery Area',
            'value' => $area
        ];
    }
    return $fields;
}, 10, 3);

—

### ✅ Optional: Show Delivery Fee in the Email Breakdown
WooCommerce already includes the applied fee in the **order totals** (as long as you used `add_fee()`), so no extra step is needed for that unless you want a custom message.

—

### Final Output Example:

In Admin Panel and Emails:

Delivery Area: TINAHELY

In Totals:

Delivery to TINAHELY: €5.00

—

Let me know if you want to style this further or limit it only to specific email types (e.g. customer only).

User
also add this text below dropdown option
FOR NON LISTED AREA DELIVERY CHARGES PLEASE CONTACT US!
Assistant
Sure! To add the message:

> **FOR NON LISTED AREA DELIVERY CHARGES PLEASE CONTACT US!**

just below the dropdown on the **checkout page**, update the PHP block where we create the dropdown.

—

### ✅ Updated Dropdown Code with Message

Replace the `custom_delivery_dropdown()` function with this:

add_action('woocommerce_review_order_before_payment', 'custom_delivery_dropdown');
function custom_delivery_dropdown() {
    $options = [
        '' => 'Select an option',
        'COLLECTION' => 'COLLECTION - FREE',
        'TINAHELY' => 'TINAHELY - €5',
        'ARKLOW' => 'ARKLOW - €18',
        'ANNACURRA' => 'ANNACURRA - €8',
        'AUGHRIM' => 'AUGHRIM - €12',
        'BALLINGLEN' => 'BALLINGLEN - €6',
        'BALLYCONNELL' => 'BALLYCONNELL - €12',
        'CARNEW' => 'CARNEW - €10',
        'COOLKENNO' => 'COOLKENNO - €10',
        'HACKETSTOWN' => 'HACKETSTOWN - €10',
        'GOREY' => 'GOREY - €18',
        'KILTEGAN' => 'KILTEGAN - €15',
        'KNOCKANANNA' => 'KNOCKANANNA - €10',
        'RATHDRUM' => 'RATHDRUM - €18',
        'SHILLELAGH' => 'SHILLELAGH - €7',
        'TULLOW' => 'TULLOW - €18',
        'OTHER' => 'Other area – Please contact us',
    ];

    echo '<h3>Delivery Options</h3>';
    woocommerce_form_field('custom_delivery_area', [
        'type' => 'select',
        'class' => ['form-row-wide'],
        'required' => true,
        'options' => $options,
    ]);

    // Add the custom message below the dropdown
    echo '<p style="margin-top: 5px; font-style: italic; color: #666;">FOR NON LISTED AREA DELIVERY CHARGES PLEASE CONTACT US!</p>';
}

—

### ✅ Output Result (on Checkout Page)
You'll see:

– A dropdown with delivery area options.
– Just below it, the message in smaller italic grey text:

> *FOR NON LISTED AREA DELIVERY CHARGES PLEASE CONTACT US!*

You can customize the styles (`color`, `font-style`, etc.) if needed.

Let me know if you want to make it more prominent (like red or bold)!

User
Move order sumarry to right side
Assistant
Sure! Moving the **Order Summary** (cart totals, shipping, etc.) to the **right side** of the checkout page is primarily a **CSS/layout customization** task. This depends a bit on your theme (e.g., Storefront, Astra, Flatsome), but here's a **generic and widely compatible approach**.

—

### ✅ Option 1: CSS-Only Approach (Recommended for Simple Changes)

Add the following custom CSS via:

– **Customizer → Additional CSS**
– or your **child theme's CSS file**

/* Wrap the checkout columns side-by-side */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #order_review {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

/* Force order summary (totals/payment) to the right */
.woocommerce-checkout #order_review {
    float: right;
}

/* Ensure the billing/shipping fields align left */
.woocommerce-checkout .col2-set {
    float: left;
}

/* Clear floats on container */
.woocommerce-checkout .checkout {
    overflow: hidden;
}

—

### ✅ Option 2: Modify Theme Template (Advanced)

If you're using a custom theme or child theme, override this WooCommerce template:

📄 `your-theme/woocommerce/checkout/form-checkout.php`

Find this part:

<div class="col2-set" id="customer_details">
    ...
</div>

<div id="order_review" class="woocommerce-checkout-review-order">
    ...
</div>

Wrap both in a `div` and assign your own flex/grid layout classes.

Example:

<div class="custom-checkout-wrapper">
    <div class="left">
        <!-- Billing / Shipping fields -->
        <?php do_action( 'woocommerce_checkout_billing' ); ?>
    </div>

    <div class="right">
        <!-- Order summary -->
        <?php do_action( 'woocommerce_checkout_order_review' ); ?>
    </div>
</div>

Then style it with CSS:

.custom-checkout-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.custom-checkout-wrapper .left {
    width: 50%;
}

.custom-checkout-wrapper .right {
    width: 45%;
}

—

### 💡 Final Touch
You can test this in desktop mode first. If it breaks on mobile, we can easily wrap it in a media query to stack it vertically below `768px`.

Let me know your theme and if you’re using a builder like Elementor/WPBakery — I can give exact class overrides or templates.

Leave a Comment

Your email address will not be published. Required fields are marked *