WooCommerce – Issues with Custom Discount Based on Shipping Method

Introduction

Creating an online store using WooCommerce provides numerous customization options, including various ways to calculate prices depending on the shipping method. One such setting is offering a discount when a user chooses pickup. However, developers sometimes encounter problems where the function doesn't work as intended. This article will examine an issue that arose during the implementation of a custom discount based on the shipping method and offer solutions.

Task: Custom Discounts for Pickup and Delivery

Let's assume you have a WooCommerce online store and want the price to be displayed with a set discount when the user selects pickup, and the regular price when they choose delivery. At first glance, this seems like a simple task, but practice shows that its implementation can be challenging.

Problem: Incorrect Discount Application

The developer has already implemented code that applies a discount when pickup is selected, but a problem has arisen: even when switching to delivery, the discount continues to apply, and the price never returns to normal. This can be caused by several factors, including improper state management in JavaScript or errors in the PHP code.

Code Example

Let's look at how the code for a plugin that implements this functionality might appear:

/**
 * Plugin Name: WooCommerce Pickup Category Discount
 * Description: Gives discount on selected categories when Pickup is chosen. Shows in emails.
 * Version: 2.8
 * Author: Dev
 * License: GPL v2 or later
 * Text Domain: wpd-pickup-discount
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// ==============================
// REGISTER SETTINGS
// ==============================
add_action( 'admin_init', 'wpd_register_settings' );

function wpd_register_settings() {
    register_setting( 'wpd_settings_group', 'wpd_categories', [
        'type' => 'array',
        'sanitize_callback' => 'wpd_sanitize_categories',
        'default' => [],
    ]);
    register_setting( 'wpd_settings_group', 'wpd_discount', [
        'type' => 'float',
        'sanitize_callback' => 'wpd_sanitize_discount',
        'default' => 4.0,
    ]);
    register_setting( 'wpd_settings_group', 'wpd_label', [
        'type' => 'string',
        'sanitize_callback' => 'sanitize_text_field',
        'default' => 'Pickup Discount',
    ]);
}

Solving the Problem

To solve the problem of the discount persisting even when delivery is selected, it is necessary to ensure that the logic for switching between Pickup and Delivery correctly handles the state. This is usually done using JavaScript or jQuery.

Example JavaScript Code

Use the following code snippet to update the price based on the selected shipping method:

jQuery(document).ready(function($) {
    // Listen for changes in shipping method selection
    $('input[name="shipping_method"]').change(function() {
        const selectedMethod = $(this).val();
        let totalPrice = parseFloat($('.woocommerce-Price-amount.amount').text().replace(/[^0-9\.]+/g,""));
        const discount = 4.0; // Discount amount

        if (selectedMethod.includes('pickup')) {
            // If Pickup is selected, apply the discount
            totalPrice -= discount;
        } else {
            // If Delivery is selected, return to the normal price
            totalPrice += discount;
        }

        // Update the displayed price
        $('.woocommerce-Price-amount.amount').text(totalPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
    });
});

This code will track changes to the shipping method and adjust the total amount in the cart depending on the selected method.

Practical Tips

1. Debugging and Testing: Always test new functionality on a staging version of your site to avoid failures on the live project. Use debugging tools, such as the browser console, to track potential issues.

2. Caching: Make sure your site isn't caching the page where the shipping method is selected, otherwise the changes won't be immediately visible to the user.

3. Compatibility with Other Plugins: Keep in mind that other active plugins may conflict with your functionality. Check the operation of your code on a clean WooCommerce store.

4. User Feedback: If you encounter problems implementing such functionality, don't hesitate to ask for help from the developer community or forums like StackOverflow. Often, similar problems have already been solved by other users.

5. User Documentation: After successfully launching the function, make sure your store users understand how the discount works when choosing pickup. Place additional explanations on the checkout page.

Conclusion

Implementing custom price calculations in WooCommerce is a powerful tool for improving the user experience. However, it's important to remember that adding extra logic can be complex, and each part of the code needs to be thoroughly tested to avoid unexpected errors. By following the recommended guidelines, you can successfully implement custom discounts on your WooCommerce site.