Modify user interface in shipping selection for customers Answered

Is it possible to add own HTML to shipping options (in checkout process)? We use modification of Pickup plugin.

Customer can select shopping option (radio button) and then from select input choose one of the locations. Is it possible to add custom HTML and Javascript here? We would like to filter all pickup locations by regions. E.g. add another filtering select input or add map (first option is sufficient; map can be to hard to implement).

1 answer

  • 1
    Mike Webasyst April 7, 2017 11:41 # Solution

    This is possible by implementing public method customFields() in the plugin class. The method must return an array of sub-arrays, each representing a control, actually a portion of HTML code to be used as a field for a customer to complete during checkout. Here is the required format:

    $fields = array(
        'field1' => array(
            'value'        => $default_field_value, //if necessary
            'title'        => _wp('Field name'),
            'control_type' => waHtmlControl::INPUT,
        'field2' => array(
            'value'        => $default_field_value, //if necessary
            'title'        => _wp('Field name'),
            'control_type' => 'MyShippingPluginControl', //specify custom control type, if you want

    Instead of waHtmlControl::INPUT, you can specify your custom control type; e.g., 'MyShippingPluginControl', which can contain any HTML code and not necessarily a form field.

    To make such a custom control available in your $fields array, call method

    $this->registerControl('MyShippingPluginControl', array($this, 'myShippingPluginControl'));

    somewhere before the $fields array initialization; e.g., at the beginning of customFields() method. This will add custom control type 'MyShippingPluginControl' to the list of available controls.

    Now, finally, implement your custom control by adding a public method with the name which you specified when you added a call of method registerControl; e.g., myShippingPluginControl() in this example. Such a custom control implementation method should be similar to this example:

    public function myShippingPluginControl()
        return 'here is my custom HTML & JavaScript code for shipping method selection step';

    Of course, you are free to change the custom control ID and the method name shown in these examples as you want.

    • +1
      Tomas Sibek Tomas Sibek April 12, 2017 14:51 #

      Thanks, that is the solution. I finally found details in the documentation. Now I am playint around with reordering these custom fields before main "deliveries" select input from calculate() function.

Add answer

To add a comment please sign up or login