WooCommerce

Introduction

HubBox can be implemented on a WooCommerce site via the HubBox Tag script - this is a piece of JavaScript that is added to the checkout code.

For more information on Tag and customization features, please refer to the Tag documentation.

Adding the Tag script to your WooCommerce site

To add the script in WooCommerce you will need to either use a plugin that can inject JavaScript to your WooCommerce site or add the script directly to the functions.php file.

Adding Tag via Plugin

You can use a JavaScript WordPress plugin (may also be described as a "code snippet manager" plugin) to inject the HubBox Tag script to your site. Below are some example plugins:

Please note: HubBox is not affiliated with any of the above third-party plugins and they should be assessed on their own merits.

For detailed WordPress Guidance on instructions for each of the plugin options, please see WordPress documentation here.

JavaScript plugins, such as the examples above, will give you an easy-to-use interface to add and manage JavaScript snippets directly from your WP Admin. Below is an example interface:

WP-javascript-injection

Adding Tag to your functions.php file

If you do not wish to install a WordPress JavaScript plugin, you can also manually add JavaScript to WordPress using your WordPress theme’s functions.php file and the WordPress hook system. This method is more complex, but it allows you to achieve a similar end result as the plugin option.

The WordPress hook system lets you inject any content in your site’s header or footer, including JavaScript. When combining some PHP code for the hook with your JavaScript, you can automatically inject it into your site. Below is an example of the code that you would use to add JavaScript to your site’s header:

function wpcom_javascript() {
    ?>
    <script>
        // add your JavaScript here
    </script>
    <?php
}
add_action('wp_head', 'wpcom_javascript');

For this option, you will need to add a hook to include the script. HubBox will provide you with a link to the Tag script hosted in HubBox's CDN and the code you add to your PHP file will look something like the below:

add_action('wp_enqueue_scripts', 'xxx_xxxxx_php');
function xxx_xxxxx_php() {
  wp_enqueue_script(
    "custom",
    "https://cdn.hub-box.com/tags/sandbox/examplestore/examplestore-tag-.js"
  );
}

You can also use more complex PHP to add conditional IF statements, such as only adding the JavaScript to a certain post or page on your site.

Here’s an example of only adding JavaScript to a single page by targeting the page’s ID:

function wpcom_javascript() {
if (is_page ('42')) {
    ?>
    <script>
        Replace with your JavaScript
    </script>
    <?php
   }
}
add_action('wp_head', 'wpcom_javascript');

If you do use your theme’s functions.php file, it’s important to use a WordPress child theme so that your JavaScript snippets don’t get overwritten when you update your theme. As an alternative to using your child theme’s functions.php file, you can also create your own custom plugin to house these snippets. The main advantage of using a custom plugin instead of your child theme’s functions.php file is that it makes your code snippets theme-agnostic. That is, you can change themes, and all of your JavaScript snippets will still be active.

Features

Hiding pickup option for ineligible baskets

Retailers with diverse product catalogs may be required to exclude certain products from the pickup service. In this instance, you will need to hide the pickup option for baskets that contain ineligible items. For example, if the customer has an item in their basket that is too large for a pickup location, you will need to ensure that they cannot see the pickup option at checkout. To implement this behavior we can use the bailoutOnCondition callback which will "bailout" the Tag script based on certain criteria.

Below is a WooCommerce examples of using the bailoutOnCondition callback to hide the pickup UI. Please note the callbacks sit within the config of the Tag script.

Hide pickup for particular SKUs

callbacks: {
  bailoutOnCondition: () =>
    new Promise((resolve) => {
      const notAllowed = ["SKU123", "SKU987"];
      const cartSkuList = window?.dataLayer_content?.ecommerce?.checkout?.products?.map((product) => product?.sku);
      resolve(!cartSkuList?.every((sku) => !notAllowed.includes(sku)));
    });
}

Hide pickup based on cart value

You may wish to implement this to hide the pickup option for very high value baskets.

getShouldBailOut: () => new Promise(resolve => {
  var selector = "#wfacp_mini_cart_start_h .order-total .woocommerce-Price-amount.amount";
  var total = Number(document.querySelector(selector)?.innerText.replace(/[^0-9.-]+/g,""));
  resolve(total >= 5000);
}),

Shipping rate filtering

If you use multiple carriers or wish to offer pickup at a different price or service level, you will need to show and hide particular shipping rates depending on whether the customer has chosen home delivery or pickup.

In order to manage and filter the rates that are displayed to a customer when pickup is selected, you can use the shippingRates configuration and using xpath set the rates you wish to show/hide. The HubBox Integrations team can help you configure this for your site.

Below is an example of the shippingRates configuration hiding the "Standard Home Delivery rate" if a pickup location is chosen and hiding the "Stanard Pickup" rate if home delivery is being used by the customer. The shippingRates configuration sits within the selectors which sits inside the config.

shippingMethods: {
    excludeOnLocalPickup: [{
        networks: ["ups", "dpd"],
        selectors: [
            "xpath://*[@id="shipping_method"]//li//label[contains(text(), "Standard Home Delivery")]/..',
            ".awesome-one"
        ],
        "mode": "first"
    }, {
        selectors: [
            "xpath://any"
        ],
        "mode": "all"
    }],
    excludeOnHomeDelivery: [{
        selectors: [
            "xpath://*[@id="shipping_method"]//li//label[contains(text(), "Standard Pickup")]/..',",
            ".two",
            ".three"
        ]
    }]
}

Other features

HubBox can also offer additional features upon request:

Adding your own stores as pickup options - display your own brick and mortar locations as pickup points for your customers
Customizing the network - customize the locations which are displayed within the app e.g. remove particular location types

These features require HubBox customization so please contact the HubBox Integrations team if you would like to find out more at clientsupport@hub-box.com.

The end result

Once the Tag has been setup and the script has been added to your checkout, your customers will see the pickup option presented in the checkout. If the customer clicks the pickup option, they will be able to search for, view and select an available pickup location.

Once the customer has selected a location, they will complete checkout as normal. The shipping address will be the customer's chosen pickup location address.

If you have any issues during set up, please contact clientsupport@hub-box.com.