[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides change vtex sales app language in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides)

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language)

Change VTEX Sales App language

Currently, it is possible to use VTEX Sales App in Portuguese, English, or Spanish.

By default, the application's language is Portuguese, but you can change it by editing the `checkout-instore-custom.js` file. Check out the [How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/how-to-customize-vtex-sales-app) guide for further information on how to access this file.

## Edit the `checkout-instore-custom.js` file

To change the language used on VTEX Sales App, first check if the `checkout-instore-custom.js` file contains the following lines of code:

`1

{

2

 "codes": [

3

 {

4

 "code": "window.LOCALE_MESSAGES = {\n locale: 'pt',\n messages: {\n pt: {\n \n },\n },\n};\n\nfunction setNewLocaleMessages() {\n const localeEvent = new Event('changeLocaleMessages')\n localeEvent.data = window.LOCALE_MESSAGES\n document.dispatchEvent(localeEvent)\n}\n\nif (window.inStoreIsLoaded) {\n setNewLocaleMessages();\n} else {\n document.addEventListener(\n 'load.instore',\n function() {\n setNewLocaleMessages();\n },\n false\n );\n}",

5

 "language": "javascript"

6

 }

7

 ]

8

}

`

If the code above already exists in your `checkout-instore-custom.js` file, move on to the next step. If only part of it is in your file, replace the current snippet with all the code above.

The language of the application is defined by the `locale` property, which is found in line 3 of the code above (`locale: 'pt'`). Note that, in this case, VTEX Sales App is set to Portuguese (`pt`).

To change the language, you must replace the locale value with the desired language code.

Check out the possible values for this property:

`` 1

{

2

 "data": {

3

 "h-0": "Name",

4

 "h-1": "Type",

5

 "h-2": "Description",

6

 "h-3": "Possible values",

7

 "0-0": "`locale`",

8

 "0-1": "string",

9

 "0-3": "- `pt`\n- `en`\n- `es`",

10

 "0-2": "Sets the language used on VTEX Sales App. Use `pt` for Portuguese, `en` for English or `es` for Spanish."

11

 },

12

 "cols": 4,

13

 "rows": 1

14

}

 ``

## Example

If you want to change VTEX Sales App's language to English, for example, replace the `pt` value with `en`. The resulting code snippet should look like this:

`1

window.LOCALE_MESSAGES = {

2

 locale: 'en',

3

 messages: {

4

 en: {

5

 // Empty for now, you can add messages here as needed

6

 },

7

 },

8

};

`

> After making changes in the code, make sure you press the `Save` button.

## Check out your changes

To see the reflected changes on VTEX Sales App, enter the menu and click the `Reset app local data` button, as shown in the image below.

![{"base64":"  ","img":{"width":845,"height":1716,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":229762,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/change-instore-language-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/change-instore-language-0.png)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/change-vtex-sales-app-language.md)

[How to customize VTEX Sales App« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language//docs/guides/how-to-customize-vtex-sales-app)[Hide anonymous customer optionNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language//docs/guides/hide-anonymous-customer-option)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

ON THIS PAGE

[Edit the checkout-instore-custom.js file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language%23edit-the-checkout-instore-customjs-file)

[Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language%23example)

[Check out your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language%23check-out-your-changes)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/change-vtex-sales-app-language.md)

Copy page

On this page

ON THIS PAGE

[Edit the checkout-instore-custom.js file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language%23edit-the-checkout-instore-customjs-file)

[Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language%23example)

[Check out your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-vtex-sales-app-language/docs/guides/change-vtex-sales-app-language%23check-out-your-changes)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides hide print order and reprint receipt buttons in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides)

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/how-to-customize-vtex-sales-app)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-print-order-and-reprint-receipt-buttons)

Hide Print order and Reprint receipt buttons

By default, VTEX Sales App shows the options to `Print order` and `Reprint receipt` in the [Order placed page](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/instore-using-the-app--4BYzQIwyOHvnmnCYQgLzdr/TrTtmCGVLTaCSmowGFYDI). If you want to hide these buttons, you can change their display by editing the `checkout-instore-custom.css` file. Check out the [How to customize VTEX Sales App guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/how-to-customize-vtex-sales-app%23css-customizations) for further information on how to access this file.

## Edit the `checkout-instore-custom.css` file

To customize which cancellation options VTEX Sales App will display, you must declare the following class and property in the `checkout-instore-custom.css` file.

In the **UI display** column below, you can see where the elements you can hide are rendered in the VTEX Sales App UI. You can click on each image to enlarge it.

`` 1

{

2

 "data": {

3

 "h-0": "CSS class name",

4

 "h-1": "Description",

5

 "h-2": "UI display",

6

 "0-0": "`print-details`",

7

 "0-1": "The class you can use to style the `Print order` and the `Reprint receipt` buttons.",

8

 "0-2": "![print-order](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-inStore/how-to-customize-instore/faaeea5-Group_1_25.png)\n\n![reprint-receipt](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hide-print-order-and-reprint-receipt-buttons-0.png)"

9

 },

10

 "cols": 3,

11

 "rows": 1

12

}

 ``

If you want to hide these elements, you must use their class selector and declare the `display` property with the value set as `none`, as exemplified below.

`1

.print-details {

2

 display: none;

3

}

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/hide-print-order-and-reprint-receipt-buttons.md)

[Add extra text to the order summary print« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons//docs/guides/add-extra-text-to-the-order-print)[Enable partial cancellation for Debit or Credit Direct salesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons//docs/guides/enable-partial-cancellation)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

ON THIS PAGE

[Edit the checkout-instore-custom.css file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-print-order-and-reprint-receipt-buttons%23edit-the-checkout-instore-customcss-file)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/hide-print-order-and-reprint-receipt-buttons.md)

Copy page

On this page

ON THIS PAGE

[Edit the checkout-instore-custom.css file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/hide-print-order-and-reprint-receipt-buttons/docs/guides/hide-print-order-and-reprint-receipt-buttons%23edit-the-checkout-instore-customcss-file)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX order placed app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/basic-components)

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.store-image)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/basic-components)

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.store-image)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/vtex-io-apps)

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/guides/basic-components)

Order Placed

Official extension

Version: 2.19.0

Latest version: 2.19.0

* [Configuration](#configuration)
* [Blocks](#blocks)
   * [order-placed](#order-placed-1)
   * [op-section](#op-section)
   * [op-header](#op-header)
   * [op-footer](#op-footer)
   * [op-confirmation-icon](#op-confirmation-icon)
   * [op-confirmation-title](#op-confirmation-title)
   * [op-confirmation-message](#op-confirmation-message)
   * [op-print-button](#op-print-button)
   * [op-notices](#op-notices)
   * [op-summary-section](#op-summary-section)
   * [op-bank-invoice-section](#op-bank-invoice-section)
   * [op-order](#op-order)
   * [op-order-number](#op-order-number)
   * [op-order-datetime](#op-order-datetime)
   * [op-order-seller](#op-order-seller)
   * [op-order-split-notice](#op-order-split-notice)
   * [op-order-customer](#op-order-customer)
   * [op-order-options](#op-order-options)
   * [op-order-payment](#op-order-payment)
   * [op-order-delivery-packages](#op-order-delivery-packages)
   * [op-order-pickup-packages](#op-order-pickup-packages)
   * [op-order-total](#op-order-total)
* [API](#api)
* [Customization](#customization)
* [Contributing](#contributing)
* [Contributors ✨](#contributors)

## Configuration

The `order-placed` app comes already installed on all stores and with it, it's possible to build your own page with the blocks exported by the app.

After defining a `order-placed` block inside your `store/blocks` directory or in your `blocks.json` file, the page can be constructed with [blocks](#blocks) and customized with [css handles](#css-handles).

_Note: this is the default `order-placed` layout implementation._

`1

// store/blocks/order-placed.jsonc

2

{

3

 "order-placed": {

4

 "blocks": ["op-header", "op-order"]

5

 },

6

 "op-header": {

7

 "children": [

8

 "op-section#confirmation",

9

 "op-section#notices",

10

 "op-summary-section",

11

 "op-bank-invoice-section"

12

 ]

13

 },

14

 "op-section#confirmation": {

15

 "props": {

16

 "name": "confirmation",

17

 "marginBottom": 9,

18

 "borderless": true

19

 },

20

 "children": [

21

 "op-confirmation-icon",

22

 "op-confirmation-title",

23

 "op-confirmation-message",

24

 "flex-layout.row#confirmation-buttons"

25

 ]

26

 },

27

 "flex-layout.row#confirmation-buttons": {

28

 "props": {

29

 "blockClass": "confirmationButtons",

30

 "marginTop": 8,

31

 "marginBottom": 8,

32

 "horizontalAlign": "center",

33

 "preventHorizontalStretch": true

34

 },

35

 "children": ["flex-layout.col#confirmation-buttons"]

36

 },

37

 "flex-layout.col#confirmation-buttons": {

38

 "children": ["op-print-button"]

39

 },

40

 "op-section#notices": {

41

 "props": {

42

 "name": "notices",

43

 "marginBottom": 9,

44

 "borderless": true

45

 },

46

 "children": ["op-notices"]

47

 },

48

 // each order section

49

 "op-order": {

50

 "children": [

51

 "flex-layout.row#order-header",

52

 "op-order-split-notice",

53

 "op-order-customer",

54

 "op-section#payments",

55

 "op-section#pickup-packages",

56

 "op-section#delivery-packages",

57

 "op-order-takeaway-packages",

58

 "op-order-total"

59

 ]

60

 },

61

 // each order header

62

 "flex-layout.row#order-header": {

63

 "props": {

64

 "fullWidth": true,

65

 "colSizing": "auto",

66

 "colGap": 5,

67

 "marginBottom": 5

68

 },

69

 "children": [

70

 "flex-layout.col#order-header-info",

71

 "flex-layout.col#order-header-options"

72

 ]

73

 },

74

 "flex-layout.col#order-header-info": {

75

 "children": ["op-order-number", "op-order-datetime", "op-order-seller"]

76

 },

77

 "flex-layout.col#order-header-options": {

78

 "children": ["responsive-layout.desktop#order-options-desktop"]

79

 },

80

 "responsive-layout.desktop#order-options-desktop": {

81

 "children": ["op-order-options"]

82

 },

83

 // payment section

84

 "op-section#payments": {

85

 "props": {

86

 "name": "paymentMethods"

87

 },

88

 "children": [

89

 "op-order-payment",

90

 "responsive-layout.mobile#order-options-mobile"

91

 ]

92

 },

93

 // bottom of top section of order header

94

 "responsive-layout.mobile#order-options-mobile": {

95

 "children": ["op-order-options#mobile"]

96

 },

97

 "op-order-options#mobile": {

98

 "props": {

99

 "blockClass": "mobile",

100

 "fullWidth": true

101

 }

102

 },

103

 "op-section#pickup-packages": {

104

 "props": {

105

 "name": "pickupPackages"

106

 },

107

 "children": ["op-order-pickup-packages"]

108

 },

109

 "op-section#delivery-packages": {

110

 "props": {

111

 "name": "deliveryPackages"

112

 },

113

 "children": ["op-order-delivery-packages"]

114

 }

115

}

`

Make sure you have the Order Placed page defined in your theme:

`1

 "store.orderplaced": {

2

 "children": ["order-placed"]

3

 },

`

## Blocks

### `order-placed`

Main block, responsible for rendering the whole order placed page. It accepts the following blocks:

* [op-header](#op-header)
* [op-order](#op-order)
* [op-footer](#op-footer)

### `op-section`

Splits your page into separate and semantic sections.

**Composition:**Accepts an array of any kind of children blocks.

**Props:**

| Prop name     | Type                                     | Description                                                    | Default value |
| ------------- | ---------------------------------------- | -------------------------------------------------------------- | ------------- |
| borderless    | MaybeResponsiveInput<boolean> \| boolean | Remove the bottom border of the section                        | false         |
| marginBottom  | MaybeResponsiveInput<number> \| number   | Margin space below the section                                 | 0             |
| paddingBottom | MaybeResponsiveInput<number> \| number   | Padding space below the section                                | 0             |
| width         | MaybeResponsiveInput<string> \| string   | Width of the section                                           | 100%          |
| name          | string                                   | Name of the section. Use it to have custom css handles for it. | undefined     |

**CSS Handles:**

| CSS Handles     | Description        |
| --------------- | ------------------ |
| section         | All section blocks |
| section--{name} | Section named name |

### `op-header`

Defines the header content of the page.

**Composition:**Accepts an array of any kind of children blocks.

**Props:** none.

**CSS Handles:**

| CSS Handles       | Description     |
| ----------------- | --------------- |
| orderPlacedHeader | The page header |

### `op-footer`

Defines the footer content of the page.

**Composition:**Accepts an array of any kind of children blocks.

**Props:** none.

**CSS Handles:**

| CSS Handles       | Description     |
| ----------------- | --------------- |
| orderPlacedFooter | The page footer |

### `op-confirmation-icon`

Renders the confirmation icon.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle              | Description  |
| ----------------------- | ------------ |
| confirmationIconWrapper | Icon wrapper |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![{"base64":"  ","img":{"width":100,"height":100,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3764,"url":"https://user-images.githubusercontent.com/17712401/89224372-c38c5080-d5ae-11ea-8112-9870c854e5a2.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224372-c38c5080-d5ae-11ea-8112-9870c854e5a2.png) |

### `op-confirmation-title`

Renders the confirmation title.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle        | Description                   |
| ----------------- | ----------------------------- |
| confirmationTitle | Confirmation title h4 element |

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":512,"height":54,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9378,"url":"https://user-images.githubusercontent.com/17712401/89224442-df8ff200-d5ae-11ea-824a-25d7530249dd.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224442-df8ff200-d5ae-11ea-824a-25d7530249dd.png) |

### `op-confirmation-message`

Renders the confirmation message, containing the clients email.

**Composition:** none.

**Props:**

| Prop name          | Type    | Description                                                                                | Default value |
| ------------------ | ------- | --------------------------------------------------------------------------------------------- | ------------- |
| enableGuestMessage | boolean | Flag that enables a different confirmation message (store/header.guest-email) for guest users | false         |

**CSS Handles:**

| CSS Handle          | Description                    |
| ------------------- | ------------------------------ |
| confirmationMessage | Confirmation message p element |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1466,"height":96,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34639,"url":"https://user-images.githubusercontent.com/17712401/89224480-f0406800-d5ae-11ea-8602-0cb9541b0459.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224480-f0406800-d5ae-11ea-8602-0cb9541b0459.png) |

### `op-print-button`

Renders a button that triggers a full page print.

**Composition:** none.

**Props:** none.

**CSS Handles:**: none.

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":196,"height":80,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2503,"url":"https://user-images.githubusercontent.com/17712401/89224547-0817ec00-d5af-11ea-9b6a-9ae33a89daef.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224547-0817ec00-d5af-11ea-9b6a-9ae33a89daef.png) |

### `op-notices`

Renders a list of important informations relevant to the currently placed order. The messages may vary according to the type of order.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle     | Description               |
| -------------- | ------------------------- |
| noticesList    | List ul element           |
| noticeListItem | Each list li item element |

| Default appearance                                                                                |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1814,"height":776,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":120518,"url":"https://user-images.githubusercontent.com/17712401/89224594-16fe9e80-d5af-11ea-9c3e-4cfddcf76a4c.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224594-16fe9e80-d5af-11ea-9c3e-4cfddcf76a4c.png) |

### `op-summary-section`

If a placed order is split between delivery and pickup, renders a summary of all pickup and delivery packages with informations such as number of items, packages, pickup/delivery address and pickup/delivery SLA.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle           | Description                                 |
| -------------------- | ------------------------------------------- |
| section--summary     | Summary whole section                       |
| summaryRow           | Row wrapper of both summary boxes           |
| summaryCol           | Column wrapper of each summary box          |
| summaryAddress       | Wrapper of the pickup address               |
| summaryBox           | Surrounding box of the summary              |
| summaryBox--delivery | Surrounding box of the delivery summary     |
| summaryBox--pickup   | Surrounding box of the pickup summary       |
| summaryContent       | Wrapper of the whole content of the box     |
| summaryItems         | Wrapper of the number of items and packages |
| summaryShippingSLA   | Wrapper of the shipping SLA information     |
| summaryTitle         | Box h5 title element                        |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":992,"height":299,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28773,"url":"https://user-images.githubusercontent.com/17712401/89224626-267de780-d5af-11ea-80c1-7771c6dae670.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224626-267de780-d5af-11ea-80c1-7771c6dae670.png) |

### `op-bank-invoice-section`

Renders the bank invoice section if payment method chosen was bank invoice.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle                 | Description                                   |
| -------------------------- | --------------------------------------------- |
| section--bankInvoice       | Bank invoice whole section                    |
| barCodeWrapper             | Wrapper of the barcode number and copy button |
| barCodeNumber              | Barcode number element                        |
| barCodeCopyButtonWrapper   | Wrapper of the copy button                    |
| bankInvoiceEmbedWrapper    | Wrapper of the bank invoice iframe            |
| bankInvoiceEmbedBackground | Background of the bank invoice iframe         |
| bankInvoiceEmbed           | Embed of the bank invoice PDF                 |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":992,"height":536,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59374,"url":"https://user-images.githubusercontent.com/17712401/89224654-3695c700-d5af-11ea-9b17-98c68450370d.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224654-3695c700-d5af-11ea-9b17-98c68450370d.png) |

### `op-order`

Defines an order context to be able to render its meta information and packages. Must be used to display order data.

**Composition:**Accepts an array of any kind of children blocks.

**Props:** none.

**CSS Handles:**

| CSS Handle   | Description                                       |
| ------------ | ------------------------------------------------- |
| orderWrapper | Wrapper of an order meta information and packages |

### `op-order-number`

Renders the order id number. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle  | Description             |
| ----------- | ----------------------- |
| orderNumber | Order number h3 element |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![{"base64":"  ","img":{"width":706,"height":84,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":14215,"url":"https://user-images.githubusercontent.com/17712401/89224695-4c0af100-d5af-11ea-866e-bea733073346.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224695-4c0af100-d5af-11ea-866e-bea733073346.png) |

### `op-order-datetime`

Renders the date and time an order was placed. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle    | Description                       |
| ------------- | --------------------------------- |
| orderDatetime | Order date and time small element |

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":444,"height":36,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9013,"url":"https://user-images.githubusercontent.com/17712401/89224728-5a590d00-d5af-11ea-8901-7654c543d9e9.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224728-5a590d00-d5af-11ea-8901-7654c543d9e9.png) |

### `op-order-seller`

Renders the seller of an order. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle  | Description                 |
| ----------- | --------------------------- |
| orderSoldBy | Seller phrase small element |
| orderSeller | Seller name span element    |

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":400,"height":36,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":8063,"url":"https://user-images.githubusercontent.com/17712401/89224779-765cae80-d5af-11ea-9320-29902e7f47dd.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224779-765cae80-d5af-11ea-9320-29902e7f47dd.png) |

### `op-order-split-notice`

Renders a message with the number of packages of an order if the order was split in more than one package. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle  | Description                    |
| ----------- | ------------------------------ |
| splitNotice | Wrapper of the message element |

| Default appearance                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1530,"height":116,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26226,"url":"https://user-images.githubusercontent.com/17712401/89224825-88d6e800-d5af-11ea-8801-7f2d5267da5b.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224825-88d6e800-d5af-11ea-8801-7f2d5267da5b.png) |

### `op-order-customer`

Renders the customer information. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:** none.

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":248,"height":208,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20227,"url":"https://user-images.githubusercontent.com/17712401/89224880-a015d580-d5af-11ea-8314-bc223b3da0aa.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224880-a015d580-d5af-11ea-8314-bc223b3da0aa.png) |

### `op-order-options`

Renders the customer information. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**Props:**

| Prop name     | Type    | Description                                                                              | Default value |
| ------------- | ------- | ---------------------------------------------------------------------------------------- | ------------- |
| fullWidth     | boolean | Make the options wrapper take full horizontal space                                      | false         |
| myAccountPath | string  | The path to redirect a user to their profile page (rendered by the vtex.my-account app). | /account      |

**CSS Handles:**

| CSS Handles         | Description                   |
| ------------------- | ----------------------------- |
| orderOptionsWrapper | Wrapper of the option buttons |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1040,"height":80,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":16066,"url":"https://user-images.githubusercontent.com/17712401/89224923-b754c300-d5af-11ea-8b28-0efa82329e96.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89224923-b754c300-d5af-11ea-8b28-0efa82329e96.png) |

### `op-order-payment`

Renders the customer information. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**CSS Handles:**

| CSS Handles         | Description                         |
| ------------------- | ----------------------------------- |
| orderPaymentWrapper | Wrapper of the payment methods list |
| orderPaymentItem    | Wrapper of each payment method item |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":256,"height":180,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":14423,"url":"https://user-images.githubusercontent.com/17712401/89225037-eec36f80-d5af-11ea-82af-267cb69c7d7b.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89225037-eec36f80-d5af-11ea-82af-267cb69c7d7b.png) |

### `op-order-delivery-packages`

Renders an order delivery packages information and product list. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**CSS Handles:**

| CSS Handles             | Description                                    |
| ----------------------- | ---------------------------------------------- |
| package                 | All package sections                           |
| package--delivery       | The delivery package section                   |
| packageHeaderColumn     | Column of header of a package section          |
| packageHeader           | Header of a package section                    |
| packageHeader--delivery | Header of the delivery package section         |
| packageShippingEstimate | Delivery estimate small element                |
| packageAddressWrapper   | Wrapper of the package shipping address        |
| packageAddressTitle     | Wrapper of the address title                   |
| packageDeliveryTitle    | Wrapper of the delivery title                  |
| productList             | Product list ul element                        |
| productListItem         | Product list li item element                   |
| productWrapper          | Wrapper of a single product                    |
| productImageColumn      | Column of a product's image                    |
| productImageWrapper     | Wrapper of a product's image                   |
| productInfoColumn       | Column of a product's information              |
| productName             | Product's a element                            |
| productMeasurementUnit  | Product's measurement unit small element       |
| productQuantity         | Product's quantity small element               |
| productPrice            | Product's price                                |
| attachmentWrapper       | Wrapper for a product's attachment             |
| attachmentHeader        | Header of an attachment                        |
| attachmentTitle         | Title of a attachment                          |
| attachmentToggleWrapper | Wrapper of the toggle button of an attachment  |
| attachmentToggleButton  | Button for toggling the attachment's accordion |
| attachmentToggleLabel   | Attachment's toggle label                      |
| attachmentContent       | Attachment's content wrapper                   |
| attachmentContentItem   | Each attachment's content paragraph            |

| Default appearance                                                                                |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1984,"height":418,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":156490,"url":"https://user-images.githubusercontent.com/17712401/89225054-f8e56e00-d5af-11ea-9c0a-b2cc37fe34f4.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89225054-f8e56e00-d5af-11ea-9c0a-b2cc37fe34f4.png) |

### `op-order-pickup-packages`

Renders an order pickup packages information and product list. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**CSS Handles:**

_Note: Include the same CSS handles as [op-order-delivery-packages](#op-order-delivery-packages)_

| CSS Handles           | Description                                                  |
| --------------------- | ------------------------------------------------------------ |
| package               | All package sections                                         |
| package--pickup       | The pickup package section                                   |
| packageInfoWrapper    | Wrapper of a **pickup** package's information                |
| packageReceiver       | Package's **pickup** receiver information container          |
| packageReceiverName   | Name of the package's **pickup** receiver                    |
| packageAdditionalInfo | Wrapper of additional information about a **pickup** package |

| Default appearance                                                                                |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1984,"height":668,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":127850,"url":"https://user-images.githubusercontent.com/17712401/89225074-03076c80-d5b0-11ea-840e-69998a41ec9d.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89225074-03076c80-d5b0-11ea-840e-69998a41ec9d.png) |

### `op-order-total`

Renders an order delivery packages information and product list. Must be placed inside an [op-order](#op-order) block.

**Composition:** none.

**CSS Handles:**

| CSS Handles        | Description                                 |
| ------------------ | ------------------------------------------- |
| totalListWrapper   | Wrapper of the total price list of an order |
| totalList          | An order's total list ul element            |
| totalListItem      | An order's total item li element            |
| totalListItemLabel | Label of a price item                       |
| totalListItemValue | Value of a price item                       |

| Default appearance                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":1190,"height":386,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":44528,"url":"https://user-images.githubusercontent.com/17712401/89225092-0b5fa780-d5b0-11ea-976e-da3c64453eff.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17712401/89225092-0b5fa780-d5b0-11ea-976e-da3c64453eff.png) |

## API

The `order-placed` app exports two hooks to allow customization using the current order data: `useOrderGroup` and `useOrder`.

`useOrderGroup`: used to get the data of the current order group. An order group is the collection of all orders created by an users's purchase.

`1

import { useOrderGroup } from 'vtex.order-placed/OrderGroupContext'

2

3

//...

4

const orderGroup = useOrderGroup()

`

`useOrder`: used to get the data of the current order being accessed in the order loop.

`1

import { useOrder } from 'vtex.order-placed/OrderContext'

2

3

//...

4

const order = useOrder()

`

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles                |
| -------------------------- |
| attachmentContent          |
| attachmentContentItem      |
| attachmentHeader           |
| attachmentTitle            |
| attachmentToggleButton     |
| attachmentToggleLabel      |
| attachmentToggleWrapper    |
| attachmentWrapper          |
| bankInvoiceEmbed           |
| bankInvoiceEmbedBackground |
| bankInvoiceEmbedWrapper    |
| barCodeCopyButtonWrapper   |
| barCodeContainer           |
| barCodeNumber              |
| barCodeWrapper             |
| confirmationIconWrapper    |
| confirmationMessage        |
| confirmationTitle          |
| errorMessage               |
| errorTitle                 |
| errorWrapper               |
| noticeListItem             |
| noticesList                |
| orderDatetime              |
| orderList                  |
| orderListItem              |
| orderNumber                |
| orderOptionsWrapper        |
| orderPaymentItem           |
| orderPaymentWrapper        |
| orderPlacedFooter          |
| orderPlacedHeader          |
| orderPlacedMainWrapper     |
| orderPlacedWrapper         |
| orderSeller                |
| orderSoldBy                |
| orderWrapper               |
| package--delivery          |
| package--pickup            |
| package                    |
| packageAdditionalInfo      |
| packageAddressWrapper      |
| packageGiftDescription     |
| packageHeader--delivery    |
| packageHeader--pickup      |
| packageHeader              |
| packageHeaderColumn        |
| packageInfoWrapper         |
| packageReceiver            |
| packageReceiverName        |
| packageShippingEstimate    |
| packageSLA                 |
| printButtonWrapper         |
| printHintWrapper           |
| productImageColumn         |
| productImageWrapper        |
| productInfoColumn          |
| productName                |
| productListItem            |
| productList                |
| productMeasurementUnit     |
| productPrice               |
| productQuantity            |
| productWrapper             |
| section--bank-invoice      |
| section--confirmation      |
| section--deliveryPackages  |
| section--notices           |
| section--paymentMethod     |
| section--pickupPackages    |
| section--summary           |
| section                    |
| splitNotice                |
| summaryRow                 |
| summaryCol                 |
| summaryAddress             |
| summaryBox--delivery       |
| summaryBox--pickup         |
| summaryBox                 |
| summaryContent             |
| summaryItems               |
| summaryShipping            |
| summaryTitle               |
| totalList                  |
| totalListItem              |
| totalListItemLabel         |
| totalListItemValue         |
| totalListWrapper           |

## Contributing

Check it out [how to contribute](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23contributing) with this project.

[Minicart« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.minicart)[Product CustomizerNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.product-customizer)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23configuration)

[Blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23blocks)

[order-placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23order-placed)[op-section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-section)[op-header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-header)[op-footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-footer)[op-confirmation-icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-confirmation-icon)[op-confirmation-title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-confirmation-title)[op-confirmation-message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-confirmation-message)[op-print-button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-print-button)[op-notices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-notices)[op-summary-section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-summary-section)[op-bank-invoice-section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-bank-invoice-section)[op-order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order)[op-order-number](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-number)[op-order-datetime](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-datetime)[op-order-seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-seller)[op-order-split-notice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-split-notice)[op-order-customer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-customer)[op-order-options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-options)[op-order-payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-payment)[op-order-delivery-packages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-delivery-packages)[op-order-pickup-packages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-pickup-packages)[op-order-total](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23op-order-total)

[API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23api)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23customization)

[Contributing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed/docs/apps/vtex.order-placed%23contributing)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)