4.3 KiB
Add to cart
The {guilabel}Add to Cart
button can be customized in multiple ways. You can:
- Choose on which page customers go after clicking the 'Add to Cart' button;
- Hide the 'Add to Cart' button to prevent sales;
- Add a 'Buy Now' button to skip the cart step and lead customers straight to checkout;
- Create additional 'Add to Cart / Buy Now' buttons;
- Add an 'Order Again' button to the customer portal.
:::{seealso}
{doc}checkout
:::
(ecommerce-cart-action-customization)=
'Add to Cart' action customization
When customers click on the {guilabel}Add to Cart
button, the product is added to their cart, and
customers remain by default on the product's page. However, customers can either immediately be
redirected to their cart, or given the choice on what to do through a dialog box.
To change the default behavior, go to {menuselection}Website --> Configuration --> Settings
. Under
the {guilabel}Shop - Checkout Process
section, look for {guilabel}Add to Cart
and select one of
the options.
:::{note}
If a product has {doc}optional products <../products/cross_upselling>
, the dialog
box will always appear.
:::
:::{seealso}
{doc}../products/catalog
:::
(cart-prevent-sale)=
Replace 'Add to Cart' button by 'Contact Us' button
You can replace the 'Add to Cart' button with a 'Contact Us' button which redirects users to the URL of your choice.
:::{note}
Hiding the {guilabel}Add to Cart
button is often used by B2B eCommerces that need to restrict
purchases only to {ref}customers with an account <ecommerce/checkout/policy>
, but still want to
display an online product catalog for those without.
:::
To do so, go to {menuselection}Website --> Configuration --> Settings --> Shop - Products
and tick
{guilabel}Prevent Sale of Zero Priced Product
. This creates a new {guilabel}Button url
field
where you can enter the redirect URL to be used. Then, set the price of the product to 0.00
either from the product's template, or from a
{doc}pricelist <../../../sales/sales/products_prices/prices/pricing>
.
:align: center
:alt: Contact us button on product page
:::{note}
The 'Contact Us' button and 'Not Available For Sale' text can both be modified using the
website builder on the product's page ({menuselection}Edit --> Customize
) by clicking on
them.
:::
Customizable 'Add to Cart' button
You can also create a customizable 'Add to Cart' button and link it to a specific product. The
customized button can be added on any page of the website as an inner content building
block, and is an additional button to the regular {guilabel}Add to Cart
button.
To add it, go on the {guilabel}Shop
page of your choice, click {menuselection}Edit --> Blocks
and place the building block. Once placed, you have the following options:
- {guilabel}
Product
: select the product to link the button with. Selecting a product renders the {guilabel}Action
field available; - {guilabel}
Action
: choose if the button should {guilabel}Add to Cart
or {guilabel}Buy Now
(instant checkout).
:align: center
:alt: Customizable 'Add to Cart' button
(ecommerce-cart-buy-now)=
'Buy Now' button
You can enable the {guilabel}Buy Now
button to take customers directly to the {ref}review order <ecommerce/checkout/review_order>
step instead of adding the product to the
cart. This button is an additional option and does not replace the {guilabel}Add to Cart
button.
To do so, go to {menuselection}Website --> Configuration --> Settings
, scroll to the
{guilabel}Shop—Checkout Process
section, enable {guilabel}Buy Now
, and {guilabel}Save
.
:::{tip}
Alternatively, you can enable the {guilabel}Buy Now
button directly from a product page by
clicking {guilabel}Edit
and navigating to the {guilabel}Customize
tab.
:::
:alt: Buy Now button
Re-order from portal
Customers have the possibility to re-order items from previous sales orders on the customer
portal. To do so, go to {menuselection}Website --> Configuration --> Settings --> Shop - Checkout Process
and enable {guilabel}Re-order From Portal
. Customers can find the {guilabel}Order Again
button on their sales order from the customer portal.
:align: center
:alt: Re-order button