User Tools

Site Tools


Sidebar

magento_2:one_step_checkout

For more details see the One Step Checkout extension page.

One Step Checkout for Magento 2

Display all checkout steps on one page to let visitors instantly modify necessary information and complete purchases as fast as possible.

  • Place checkout steps on one page;
  • Let customers edit product options on the checkout;
  • Manage checkout fields display;
  • Use automatic geolocation detection and Google Address suggestions;
  • Enable order comments and newsletter subscription;
  • Let customers select day and time for order delivery;
  • Choose from 2 layout types (2-column and 3-column);
  • Customize checkout page design;
  • Add custom CMS blocks the order success page;
  • Advanced gift wrap and gift message functionality;

Having troubles?

  • Try disabling the extension and check if you're getting the same result with Magento default checkout. One Step Checkout is designed to be as transparent for other checkout-related extensions as possible, it will display the data “as-is”. So if you're getting suspicious results please compare them to what you get with One Step Checkout disabled.
  • Some custom themes may have custom design for blocks displayed on checkout. If you see blocks displaying incorrectly on One Step Checkout please try switching to Magento default theme. Would that help that will mean that theme should be adjusted to disable custom design for checkout blocks.

Configuration

To configure the extension settings please go to Admin panel → Stores → Configuration → One Step Checkout.

Specify a custom Title and a Description for the checkout page. Include main keywords for better SEO rankings.

Use the Description field to provide customers with additional information about taxes (e.g. VAT) or any other payment aspects. Use <html> to highlight the important points.

Allow to edit products in the Order Summary - choose Yes to allow customers to delete products and change their quantity

Reload shipping methods when coupon code is applied - choose Yes to update the types of available shipping methods automatically after a coupon code is added. For example, you can allow free delivery after a specific coupon code is applied.

Refresh payment methods & total upon the shipping address change - choose Yes to refresh payment methods and grand total automatically if the shipping address is changed.


Geolocation

Geo IP Location - enable this option if you want to detect user country automatically based on the IP address.

Google Address Suggestion - use this option to show automatic address suggestions once a customer starts typing in the address field. Learn more about Google Autocomplete feature.

Google API Key - to enable the Address Autosuggestion option you need to specify your your API key in this field.

To use the Geo IP Location option please go to Stores → Configuration → Geo IP Data and import sql dump or csv file with necessary Geo Locations.

  • Press Download and Import, to make the extension download the updated sql dump file and import it into your database. Set by default, to download and import the sql dump file is faster and more convenient than csv file.
In the Download and Import mode, don't be mislead by the error notification in the Import section, on the absence of csv files: the csv files are not needed, and the import will proceed.
  • Import. This section is for advanced users, who are interested in uploading the csv files manually from other resources.
For instance, to upload up-to-date versions from directories like https://dev.maxmind.com/geoip/geoip2/geolite2/ (maxmind format is supported).
In the Import section, the button Import is grayed out by default. It will be available right after you upload the csv files. The red error notification will switch to green success notification - the import is completed.


Default Values

In this tab you can specify values that will be preselected on the checkout page by default to speed up the checkout process.

The Default Values settings are optional. Therefore, you can display only those values that meet your specific requirements.

With the One Step Checkout extension you can set default values for the following fields:

  • Shipping method;
  • Payment method;
  • Country;
  • Region/State;
  • Zip/Postal Code;
  • City.

Block Names

In this section, you can rename the current names of the blocks on the checkout. Leave these fields empty to use the default names.

Design Settings

Display header and footer - to display the header and footer blocks on the checkout page, select Yes.

It may be necessary to flush your Magento Cache for the changes to take effect.

Checkout Page Layout - choose one of 2 layout types: a 2-column layout and a 3-column one.

Checkout Text Font - specify the name of a necessary font. Use Google Fonts to quickly pick the one you need.

With a handy color picker tool you can select colors for:

  • Heading Text;
  • Order Summary Background;
  • Place Order Button;
  • Checkout Background.
To select a color for a particular field click on the field and the color picker tool will appear.

Here is the example of a custom checkout page design.


Additional Options

All additional options will be displayed in the Order Summary Block on a checkout page.

Order Comment - enable the option to let customers add comments to their orders right on the checkout page.

Discount Field - let customers apply promo codes at the checkout.

Newsletter Checkbox - display the newsletter subscription checkbox.

Newsletter is Checked by Default - set the option to 'yes' to make the Newsletter Subscription option ticked by default.

Create an account - set the option to 'yes' to let customers receive an email with a signup link after they complete the purchase.

This is how the additional options display on the checkout page:

Display Terms and Conditions checkbox - choose where to display Terms and Conditions checkbox.

  • Below the selected Payment Method

  • Below the Order Subtotal

Before you choose the position of the Terms&Conditions, check that:

  • Your Terms&Conditions settings are enabled. (Stores > Settings > Terms and Conditions, select the condition you've created previously and change the status to Enabled).
  • Select 'Manually' in the 'Applied' field if you want to display Terms&Conditions with a checkbox. If you choose the option 'Automatically', customers could only read the conditions.

  • Your Terms&Conditions can be displayed at the checkout.(Stores > Configuration > Sales > Checkout)


Gifts

Allow Gift Messages on Order Level - enable this option to let customer specify gift messages for the whole order.

Allow Gift Messages for Order Items - this option enables users to specify gift messages for each item in the cart.

Gift Wrap - enable a gift wrap option on the checkout page.

Gift Wrap Fee - specify a gift wrap fee amount. Once the Gift Wrap option is selected by a customer its price will be automatically added to order total.

See a Gift Message popup example below.


Delivery Date

Delivery Date field is mandatory - Set 'Yes' to make the delivery date field obligatory.

Available Days - Specify days available for delivery.

Available Hours - specify time intervals available for delivery. You can list them and separate by comma.

Enable Delivery Comment - Set 'Yes' to display the delivery comment field right below the delivery date and time information.

Delivery Comment Default Text - here you can specify the placeholder text, that will be shown as an example in the delivery comment field.

Customers will be able to select delivery days and time intervals and also leave a delivery comment.


Order Success Page

Success Page - specify the ID of a custom CMS Block to show it on the order success page.

To create a custom CMS block please got to Content → Blocks and click on the 'Add New Block' button. See the Order Success Page example below.


Top and Bottom Custom Blocks

In this section, you can choose a CMS block, that you would like to display at the top or bottom of the checkout. With this feature, you can add any additional information on the checkout page. For example, trust seals, phone numbers, delivery conditions. To create a custom block, go to Content → Blocks

Top Block - select a CMS block that will be displayed above the checkout.

Bottom Block - select CMS block that will be displayed below the checkout.

Frontend example:

Manage Checkout Fields

To manage checkout fields display go to System → One Step Checkout → Mange Checkout Fields.

On the fields management page you can:

  • Specify a custom field label (field name);
  • Set field width;
  • Specify which of the fields should be required;
  • Enable/disable checkout fields;
  • Set fields order for checkout display.
Use the drag-and-drop option to manage fields order or enable/disable them.
To collect more order-related data, try Magento 2 Custom Checkout Fields.

Frontend: Edit Product options

  • Customers can edit options of configurable products (color, size etc.) on the checkout page.
  • It's also possible to delete products from the cart right on the checkout page in case there are 2 or more products.

Frontend: Registered Customers

If a customer has already registered in your store, his/her shipping address will be automatically saved for future checkouts.


Frontend: Google Autosuggest

Display smart Google Autosuggestions once a customer starts typing a shipping address.

Find out how merchants increase the Average Cart Value by featuring cross-sell products on Magento 2 cart and checkout pages.
Find out how to install the One Step Checkout extension for Magento 2 via Composer.

Rate the user guide
 stars  from 7 votes (Details)
magento_2/one_step_checkout.txt · Last modified: 2018/07/31 11:35 by milosh