In this article, we are going to explore the basic Shipping configuration for Drupal Commerce. We will keep things easy by applying a flat shipping rate of $10 to all orders.
Here is how the final order screen will look. Notice the $10 flat rate that’s now part of the bill:
To start with, you will have to download and unzip the following modules to your site’s Modules folder:
- Commerce Shipping (https://www.drupal.org/project/commerce_shipping)
- Commerce Flat Rate (https://www.drupal.org/project/commerce_shipping_flat_rate)
Click “Modules” on the top-level menu:
Search for the newly downloaded modules. Enable “Flat Rate”, “Shipping” and “Shipping UI”.
Click “Save Configuration” at the bottom of the page:
Click “Store” on the top-level menu:
On the new page, you will find 3 tabs on the top-right:
- SHIPPING SERVICES
- SHIPPING METHODS
- CALCULATION RULES
SHIPPING SERVICES is selected by default. Click “Add a flat rate service”:
Give a title and the flat rate you wish to apply across all orders. I have provided a flat rate of 10%. Click “Save flat rate”.
You can see the newly created Shipping Service in the table:
The next step is to tweak the way shipping information is displayed so that we can review the final order.
And finally, click “Checkout settings”:
In the checkout pane, I want you to drag "Shipping information" and "Shipping service" to the top just under "Confirm your cart". This will ensure that the flat rate is shown to the customer in the beginning itself and added to your bill:
Let’s now perform a checkout to observe the shipping charges. I have clicked “Checkout” to initiate the process:
See the first screen in the Checkout process. As specified by us, “Shipping service” and “Shipping information” appear below in the confirmation screen. A shipping flat rate of $10 is highlighted as well:
Click “Continue to next step” and proceed to the final screen where you can view the final pricing:
Notice that a flat rate of $10 has been added to the final bill. This indicates that the shipping functionality has been successfully implemented on your site.