Optimising basket page. - removing "Estimate shipping & TAX"

Magento 2 Frontend Design
1

Hi Craig,

I wonder if you could help me to optimize the basket page.
I would like to make it clearer removing unnecessary steps.

Please refer to the attached screenshot and the selected fields.

You see state/province and postcode are not impotent to my clients when it comes to calculating shipping cost and tax.
My goods will be always 20% tax inclusive and I’ll be calculating the delivery cost based on the shipping country.

I also would like to show subtotal TAX inclusive (only on the basket) so it equals order total.
The invoice order email confirmation, can and should show full specification.

Paulsminth.com uses Magento and their checkout is very simple and clear.
You select only a country and delivery methods are shown below.

checkout%20optimisation
checkout optimisation.jpg836×846 120 KB

As a default, Magento shows the option only after you click on the Estimate Shipping and tax dropdown option.
Then there are 2 fields state/province and postcode shown. I would like to remove these.

Is it something you can help me with?
Thank you.

Regards,
Pawel

2

Removing the Estimate Shipping and Tax box will be a as simple as updating an XML Layout. I can’t remember which one off the top of my head and I can’t check right now. But that’s like a 2 minute job.

I don’t think this one will be too complicated. In fact there may be a couple of ways around this - The simplest being to just hide the 2 fields with CSS. I’ve never used the default checkout so I’ll need to refresh myself on how it works.

This won’t be a setting. I suspect that you’ll need to fall back on your PHP skills for this one. It will first require overriding an existing module. The hope is that this page and the confirmation email have their own calculation outputs and don’t pull from the same source of code - Otherwise that will create you a lot of work. I’ve never had to mess about with anything like this before.

I’ll come back to you with some more specifics when I’ve done some research.

3

Hi Craig,

“I’ve never used the default checkout so I’ll need to refresh myself on how it works.”

It is not realy a checkout. It is a part of basket/cart page.
Even I use any OSC module the default “estimate delivery, tax” bit will be visible on the basket/cart page. I think…

paulsmith.com did it nicely. It is very clean. I would like to achieve something similar.

“This won’t be a setting.
I suspect that you’ll need to fall back on your PHP skills for this one.
It will first require overriding an existing module.” - I am afraid my php skills aren’t great. I would have to leave it :slight_smile:

I am open to any suggestions.

Regards,
Pawel

4

I’ve not had a great deal of time to look at this today as it’s taken me longer than expected. However, I can tell you that you’ll need to create an override module (“Magento_Checkout”) in your child theme to get started. Here’s how:

Copy these 2 files:

vendor/magento/module-checkout/view/frontend/templates/cart/shipping.phtml
vendor/magento/module-checkout/view/frontend/web/template/cart/shipping-estimation.html

Paste files here: (Create folders where necessary)

app/design/frontend/THEME/CHILD/Magento_Checkout/templates/cart/shipping.phtml
app/design/frontend/THEME/CHILD/Magento_Checkout/web/template/cart/shipping-estimation.html

override_estimate_2

Congrats, you’ve created a module override

Edit files:

In shipping.html delete the following lines to remove the Title Section

<div class="title" data-role="title">
    <strong id="block-shipping-heading" role="heading" aria-level="2">
        <?= /* @escapeNotVerified */ $block->getQuote()->isVirtual() ? __('Estimate Tax') : __('Estimate Shipping and Tax') ?>
    </strong>
</div>

In shipping-estimation.html delete the following line to remove the Instruction

<p class="field note" data-bind="text: isVirtual ? $t('Enter your billing address to get a tax estimate.') : $t('TEST1 Enter your destination to get a shipping estimate.')"></p>

Result
override_estimate

Notes
I don’t really have the time right now to work out the removal of Region/Postcode fields. Mostly because it seems to use Knockout JS and I don’t quite understand that myself. But hopefully, this gets you in the right direction.

I’ve also included a copy of the files I mentioned above to help you out. Although, I encourage you to follow the steps above rather than upload files as it may help you learn more.

5

Hi Craig,

Thank you for this.

Regards,
Pawel