Separate Shipping Cost from Handling Fees?

Support
#1

Hello guys,
I have enabled shipping in my dashboard and added shipping rates even based on weight.
When I now add fees in the shipping area of the dashboard, the fees are added to the shipping cost which are confusing customers since they know the rates for priority and economy shipping and see an even higher amount since the fees are added on top.

Do you have a workaround how to add a packaging fee to the order and show that in a dedicated section on the invoice?

Thank you very much
Michael

Separate Shipping Cost from Handling Fees
#2

Hi @mkroll, thanks for reaching out!

We do not have the handling fee cost value available in the front end to customize that, but if that fee is not bound to frequent changes, you can statically remove it from the value by customizing the shipping-rates-list-item component.
I made and example here for you with a $3 fee:
image
The code looks like this:

      <shipping-rates-list-item>
        <li
          class="snipcart-shipping-rates-list-item snipcart__font--secondary snipcart__font--bold"
        >
          <span>
            <snipcart-radio
              name="selectedRate"
              class="snipcart-shipping-rates-list-item__label--highlight"
              :value="slug"
              :id="`selectedRate-${slug}`"
            >
              {{ localizationId ? $localize(localizationId) : description }}
            </snipcart-radio>
          </span>
          <span
            class="snipcart-shipping-rates-list-item__price snipcart__font--black"
          >
            {{ (cost - 3) | money(currency) }}<br>
            Handling: $3
          </span>
          <span
            v-if="guaranteedDaysToDelivery > 0"
            class="snipcart-shipping-rates-list-item--guaranteed_days snipcart__font--small"
          >
            {{ $localize("shipping_rates.guaranteed_delivery_days", {
            guaranteedDaysToDelivery: guaranteedDaysToDelivery }) }}
          </span>
        </li>
      </shipping-rates-list-item>

You would then of course change it to your needs.

As for the invoice, unfortunately we do not have the Handling fee available there too, but you can apply the same principle:
image

 <span size="9">
  {{ sum_money order.shippingInformation.fees -3 }} <br>
  Handling fee: $3
</span>

Let me know if you have further questions, and feel free to send this question as a feature request.

Thanks!

#3

Hi,
thank you very much for your detailed help regarding that topic.
I will give the implementation a try and keep you posted.
I’ll open a feature request as well. Done! :slight_smile:
Sorry to bother: I have sent a message to support@snipcart.com regarding an E-Mail DKIM/Whitelist issue. Not received any response so far. Could you help out, please?

Regards,
Michael

#4

Hi @nelitow
I have implemted the proposed workaround and It looks good to me.
Was struggling a bit since Vue uses the same delimiter signs for embedding code into html as my Hugo templates do but luckily the data-templates-url="" parameter solved my issue.

The integration is live on: https://shop.kroll-wood.work :grinning:

Thanks
Michael

2 Likes