BigCommerce Checkout Customization: Changing 'Free' to 'Pickup' Label

Customizing BigCommerce Checkout: Renaming "Free" Shipping to "Pickup" for In-Store Options

As e-commerce continues to evolve, businesses are constantly seeking ways to optimize their online stores for a seamless customer experience. For many BigCommerce merchants, offering in-store pickup is a crucial service, blending the convenience of online shopping with the immediacy of local collection. However, a common challenge arises when the BigCommerce checkout page defaults to displaying "Free" as the shipping label for these pickup options, which can be confusing for customers expecting a "Pickup" specific designation.

This community insight from the BigCommerce forum addresses precisely this issue, providing a practical solution for merchants looking to enhance clarity on their checkout pages. The original query by Darren White highlighted the desire to change the "Free" shipping label to "Pickup" when a customer selects the "Pickup In Store" option. This seemingly minor detail can significantly improve the user experience and reduce potential customer confusion.

The Challenge: Default BigCommerce Labeling

The core of the problem lies in BigCommerce's default behavior. When a shipping method is configured with a zero cost, the platform often displays "Free" as the associated label. While technically correct in terms of cost, it doesn't accurately reflect the action of "picking up" an order, especially when multiple shipping options are available. The forum thread quickly established that there isn't a direct setting within the BigCommerce admin panel to customize this specific label for free shipping methods.

The Solution: A Custom JavaScript Snippet

The community quickly rallied to provide an effective workaround. Avinash Jeswal confirmed that a custom script would be necessary, setting the stage for WebDesk Solution to deliver a robust JavaScript solution. This approach leverages the power of front-end customization, allowing merchants to dynamically alter the text displayed on the checkout page without deep core file modifications.

The recommended method involves adding a JavaScript snippet to the BigCommerce Scripts Manager, specifically within the Visual Website Optimizer section. This ensures the script executes on the checkout page and targets the correct element to perform the text replacement.

Implementing the JavaScript Code

Here's the JavaScript code provided by WebDesk Solution that successfully addresses the issue:

How the Script Works

This JavaScript snippet is designed for resilience and effectiveness across various checkout scenarios:

• Targeting the Element: It uses document.querySelector('[data-test="cart-shipping"] [data-test="cart-price-value"]') to precisely locate the element displaying the shipping price/label within the cart summary on the checkout page. The data-test attributes are robust selectors often used in modern BigCommerce themes.
• Conditional Replacement: The script checks if the textContent of the identified element, after trimming whitespace and converting to lowercase, is exactly 'free'. If it matches, it then changes the textContent to 'Pickup'.
• Robust Execution:
  • DOMContentLoaded: Ensures the script runs once the initial HTML document has been completely loaded and parsed.
  • MutationObserver: This is a powerful feature that watches for changes in the DOM (Document Object Model). The observer continuously monitors the document.body for childList (additions/removals of child nodes), subtree (changes in descendants), and characterData (changes to text content). This is crucial because BigCommerce's checkout page is dynamic, and elements might load or update after the initial page load, especially when shipping methods are selected or changed.
  • setTimeout(replaceFreeWithPickup, 3000): As a fallback, a timeout is included to ensure the function runs after a short delay, catching any elements that might render slightly later than the observer or DOMContentLoaded event.

Confirmation and Best Practices

Darren White, the original poster, confirmed that the solution "worked perfectly," validating its effectiveness. Rawi Rai also chimed in, reinforcing the use of WebDesk Solution's code and suggesting that if the Scripts Manager method somehow failed, placing the code at the last line of checkout.html could be an alternative, though the Scripts Manager is generally preferred for its ease of management and non-invasive nature.

Conclusion

This community exchange highlights the flexibility and problem-solving capabilities within the BigCommerce ecosystem. While some specific UI customizations may not have direct admin settings, the platform's extensibility allows for powerful front-end modifications through custom JavaScript. For BigCommerce merchants offering in-store pickup, this solution provides a clear and professional way to communicate shipping options, ultimately enhancing the customer journey. Leveraging such targeted scripts can significantly refine the checkout experience, making it more intuitive and aligned with your brand's specific service offerings.

At Big Migration, we understand the nuances of BigCommerce customization and migration. Our expertise extends to implementing such tailored solutions, ensuring your store not only functions flawlessly but also provides an optimized, user-friendly experience from start to finish. If you're looking to refine your BigCommerce store or considering a migration, our team is equipped to handle these intricate details, transforming challenges into seamless solutions.