This module is designed to visually change all field pairs (label + field) so that the label is placed inside the field (As HTML Placeholder incl. "required-entry" mark "*"). Additionally, you can decide if you want to hide labels, define a custom required mark, hide required marks, customize placeholder text and mark fields as optional.
Most of the fields in the checkout are collected via PHP and rendered dynamically via templates. For example, all input fields via the template vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html.
For all these dynamic fields we have created a LayoutProcessor that provides the features described below.
However, there are also fields that cannot be influenced via a LayoutProcessor. In a standard checkout these would be the fields:
- password
- password confirmation (if available)
These fields are created together in the knockout template Magento_Checkout/template/form/element/email and are also not prepared for HTML placeholders by default.
For these fields we provide at the moment only knockout templates overrides, which ensure that always (after installation) the label is used as a placeholder. Including the static required mark "*".
As soon as time or a customer order allows, we would provide these fields with full features as well.
- display field label as placeholder
- customize placeholder text
- hide labels
- define a custom required mark
- hide required mark
- mark fields as optional
composer require mediarox/module-checkout-placeholder
bin/magento setup:upgradeSTORES > Configuration > MEDIAROX > Checkout Placeholder
Enables the module. After activation, the field placeholders are filled with the label by default.
- path: checkout_placeholder/general/enable
- default: 0
Enable this setting to hide labels.
- path: checkout_placeholder/general/hide_labels
- default: 0
Enable to display required marks.
- path: checkout_placeholder/general/enable_required_mark
- default: 1
If you want to display a custom required mark enter it here.
- path: checkout_placeholder/general/custom_required_mark
- default: '*'
- depends on: checkout_placeholder/general/enable_required_mark = 1
To override placeholder content (label text) for specific fields enter the field_id and placeholder you want to display. If you need to customize a field that is used in multiple fieldsets (e.g. firstname is available in billing & shipping address) enter an additional, unique fieldset id (e.g. billing-address: 'form-fields', shipping-address: 'shipping-address-fieldset'). For street fields use the field_ids street_0, street_1 and street_2.
- path: checkout_placeholder/general/specific_fields
- default: ''
If enabled a custom optional mark will be applied to fields configured in Optional Fields.
- path: checkout_placeholder/optional_marks/enable
- default: 0
Enter your optional text/mark that you want to display here.
- path: checkout_placeholder/optional_marks/custom_optional_mark
- default: ''
Specify the fields you want to display an optional mark for here. If you need to customize a field that is used in multiple fieldsets (e.g. firstname is available in billing & shipping address) enter an additional, unique fieldset id (e.g. billing-address: 'form-fields', shipping-address: 'shipping-address-fieldset'). For street fields use the field_ids street_0, street_1 and street_2.
- path: checkout_placeholder/optional_marks/optional_fields
- default: ''
- amzn/amazon-pay-module (deprecated core dependency), tested: 4.2.2
- amzn/amazon-pay-magento-2-module (up-to-date amazon pay module), tested: 5.7.1, 5.9.1
- amasty/module-single-step-checkout, tested: 3.1.2, 3.1.3, 4.0.0
- How do I add a custom checkout field ?
- What does the checkout look like with the Amasty Checkout module ?
- What about Hyvä or the Hyvä Checkout ?
