Description
Amount left for free shipping module displays the amount left to get free shipping, it can encourage your customers to buy more to get free shipping. There are several ways to set free shipping on PrestaShop, check this post How to setup free shipping for orders over a specified amount on PrestaShop. This module works in these two ways:
1) Using the "Free shipping starts at" setting.
2) Adding a Free shipping range to carriers.
Where the amount left for free shipping can be shown.
- All cart summary setiosn, like the ones on the Shopping cart page, the checkout page and the popup cart window.
- On the header of all pages.
Three different message templates.
- Message template for "Free shipping starts", it will show out when the cart is empty.
- Message template for "Get free shipping if you order X or more", it will show out when the shipping isn't free.
- Message template for "Free shipping", it will show out when the amount of order has reached the amount needed for free shipping.
You can decide whether to show the "Free shipping starts" message and the "Free shipping" message. The "Free shipping starts" message will change to the "Get free shipping if you order X or more" meesage if a product is added to the cart.
There are 4 variables you can use in the message template.
- {amount_left} if you put this in the meesage tempalte, it will be replaced by the amount left for free shipping.
- {starts_at} this will be replaced by the amount needed to get free shipping.
- {total} this will be replaced by the total amount order.
- {carrier} this will be replaced by the carrier who provides free shipping.
Two ways to calculate the amount left for free shipping
- Check all carriers to find the one who has the less amount needed for free shipping.
- Check the selcted carrier only to see if it has a free shipping range.
Fully customizable message templates.
This amount left for free shipping moduleis fully customizable, you can decide how & where to show the amount left for free shipping to perfectly match your site design without edting any files. Basic html knowledge is requied, we can provide free help for that.
Message template and Custom position are the two key features to make this module be flexiable and customizable.
Message template
You can use basic text messages to show the amount left for free shipping out. To better match the design of your theme, you can format messages using HTML. Here are two examples:
1. A basic text message to show the amount left for free shipping on the Classic theme.
2. The text and the price are shown on either side to match the design of the Panda theme.
To change the design of message, there are options like "text color", "price code", "background color", "font size", "Alignment", "paddings", "margin" for you. If you need more changes, then use the custom css code feature.
Positions
Two types of positions:
- Native hooks
- Custom positions
For example, they are 4 native hooks around the cart summary block on the shopping cart page. You can choose to show the amount left for free shipping on any of them.
If you want to show the total savings on a position where has no hooks, then you can use the custom position feature, all you need to do is to fill in a jQuery selector of where you want to the amount left for free shipping to be shown. We can provide free help on that. With the "Custom position" feature, you can show the amount left for free shipping on anywhere to perfectly match your design.
Progress bar.
Using a progress bar to show the status of ongoing process of getting free shipping.
Compatibility.
- Prestashop 8 & 1.7.
- Transformer theme v4, Panda theme v2, Classic theme and all other standard themes.
- Comaptible with the Easycheckout module v2.7.0 and later.
Define standard theme? A standard theme contains all hooks from the Classic theme, it uses the /themes/core.js file to use the same ways as the Classic theme to handle the add-to-cart event, changing combination event, etc. All most all paid themes are standard ones.
How to install and upgrade.
The "Amount left for free shipping module" can be installed easily without editing any files.
How to install? Use the "Upload a module" button on "BO > Modules" page to install the module.
How to upgrade? Use the "Upload a module" button on "BO > Modules" page to upload the new version to your site, it's the same as how to install, don't worry all your data will be safe, PrestaShop will just upload updated files to your site, it won't reinstall this module.
How to get support.
If you have any questions with this module, post them out on the PrestaShop module support forum, we'll help you out.
Documentation.
Probably due to conflicts with your theme or due to the HTML structure of the message template. For example, if your theme force all prices to be in red, then the price color setting in this module probably can't work, in which case contact us, we will guide you to use a piece of custom CSS code to change the price color.
It could also be an issue with the message template, for example if you use a custom message template and you forget to add a st_amount_left_price class name to the price, then the price color setting can't work.
Here are two key points
- Make sure there is a wrapper with a class name like "st_amount_left_cart". You can find the class name needed on the description section of message fields.
- Add a class name like "st_amount_left_price" to the wraper html tag. You can find the class name needed on the description section of message fields.
Here are two examples.
1 | <div class="st_amount_left_cart">Free shipping starts at <span class="st_amount_left_price">{starts_at}</span></div> |
1 | <div class="cart-summary-line clearfix st_amount_left_cart"><span class="label">Left amount for free shipping</span><span class="value price st_amount_left_price">{amount_left}</span></div> |
The jQuery selector is used to locate the position where you want the amount left for free shipping to be shown. It requires basic html knowledge to fill in this field. With the help of browsers' developer tools, it's possible to figure the correct value out by yourself. Feel free to contact us for help if you need it. Here is an example.
If you want to put the the amount left for free shipping right below the total price, then the jQuery selector you need is ".cart-detailed-totals .cart-total". That isn't the only correctly answer, there are several other electors for the same postion.
This field is important when you choose to use the "Custom position" option or the "Under the shipping fee in the cart summary section" option. A page may contain several different cart summary block, the "Block container jQuery selector" field is used to tell which block is the cart summary block in the popup cart, which block is the cart summary block in the dropdown cart. So the key point is to find unique selectors to distinguish different cart summary blocks. For example, you can use this selector #blockcart-modal for the cart summary block in the popup cart window. Because the parent divs of other cart summary blocks don't have a "blockcart-modal" ID.
It requires basic html knowledge to fill in this field. Feel free to contact us for help if you need it.
Disable the "Use HTMLPurifier Library" setting on the "BO>Preferences>General" page.
Here are some possibe reasons:
- A coupon is applied. Coupons are not taken into account when calculating free shipping.
- You can using a 3rd party module to manage free shipping.
If a customer uses a free shipping voucher you offered, then the customer can get free shipping without reaching a certain amount. So the customer may get a message like this "Free shipping, you've ordered more than $200.", but actually, the customer just has a $100 worth item in the cart. In order to not confusing your customers, you'd better not use {starts_at} or use a message like this "Free shipping, you've ordered more than $200 or used a free shipping voucher."
Check this post How to setup free shipping for orders over a specified amount on PrestaShop.
Make sure the message is wrapped by a HTML tag with a "st_amount_left_x" class name, repalce x with "cart" if the message is in the cart summarty section on the shipping cart page. You can find the class name needed in the description of message template fields.
If you are going to set a free shipping range to a carrier, then you've to disable the Handling fee for it.
Here are some possible cases:
- There is a free shipping carrier on your site and you didn't set to show a Free shipping message when the shipping fee is free.
- You have added some items in the cart, the total has reached the amount needed for free shipping and you didn't set to show a Free shipping message when the shipping fee is free.
- The "Free shipping starts" field is not set or none of your carriers has a free shipping range.
- The module isn't correctly configurated.
You probably set to calculate the shipping fee based on all carriers. The selected carrier is not free, but the total of your order has already reached the module needed for the free shipping of another carrier. In order to not cause confusion, you can use a message like this "Free shipping by {carrier}".
