Documentation
Feedback
Guides
API Reference

Guides
Getting Started

Integration Guides



Payments

Orders

VTEX inStore

UI Customization

Message Center

Promotions

Infrastructure

Conversational Commerce

Subscriptions

Search

Pricing

VTEX Session

VTEX inStore
How to customize inStore
Hide cancellation buttons

By default, inStore shows the options to Cancel total order and Cancel order in the Order placed page. If you want to hide these buttons, you can change the display of cancellation options by editing the checkout-instore-custom.css file. Check out the How to customize inStore guide for further information on how to access this file.

Edit the checkout-instore-custom.css file

To customize which cancellation options inStore will display, you must declare the following IDs and properties 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 inStore UI. You can click on each image to enlarge it.

CSS ID selector nameDescriptionUI display
cancel-total-orderThe ID selector you can use to style the Cancel full order button. This button enables total cancellation of orders.{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGP4v3dvMANbMAPb/wf3ASY9Berl2bgWAAAAAElFTkSuQmCC","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hide-cancellation-buttons-0.png","width":230,"height":62,"type":"png"}}
cancel-orderThe ID selector you can use to style the Cancel order of this package button. This button enables partial cancellation of orders, which means you can cancel individual packages.{"base64":"  ","img":{"width":338,"height":59,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3082,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hide-cancellation-buttons-1.png"}}

If you want to hide one or both of these elements, you must use their respective ID selector and declare the display property with the value set as none, as exemplified below.

#cancel-total-order { display: none; } #cancel-order { display: none; }
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Enable partial cancellation for Debit or Credit Direct sales
Allow manual prices on inStore
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page