[IMP] ecommerce: update add to cart page

task-4480769

closes odoo/documentation#13377

Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>
This commit is contained in:
lman-odoo
2025-05-08 11:28:31 +02:00
committed by xpl-odoo
parent 7f68178eb8
commit 08898ad470
11 changed files with 171 additions and 161 deletions

View File

@@ -24,7 +24,6 @@ products and increase your average cart sizes.
:titlesonly:
ecommerce/products
ecommerce/cart
ecommerce/checkout
ecommerce/payments
ecommerce/shipping

View File

@@ -1,111 +0,0 @@
===========
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 </applications/sales/sales/products_prices/prices/pricing>`.
.. image:: cart/cart-contactus.png
: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).
.. image:: cart/cart-add.png
: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.
.. image:: cart/cart-buy-now.png
: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**.
.. image:: cart/cart-reorder.png
:align: center
:alt: Re-order button

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

View File

@@ -1,12 +1,130 @@
========
Checkout
========
=====================
Ordering and checkout
=====================
Once customers have added their desired products to the cart, they can access it by clicking the
:icon:`fa-shopping-cart` button in the header to start the checkout process. In Odoo eCommerce, this
process consists of sequential :ref:`steps <ecommerce/checkout/steps>`, some of which support
additional features. The related checkout pages can be :ref:`customized
<ecommerce/checkout/customize_steps>` using the website editor.
Odoo eCommerce provides several options to organize the ordering and checkout process. It offers
different :ref:`order button <ecommerce/checkout/order-buttons>` options and sequential
:ref:`checkout steps <ecommerce/checkout/steps>`, some of which support additional features. The
related buttons and checkout pages can be customized using the website editor.
.. _ecommerce/checkout/order-buttons:
Order buttons
=============
To customize the ordering process in Odoo eCommerce, you can:
- change the :ref:`Add to Cart <ecommerce/checkout/add-to-cart>` button's behavior,
- replace it with a :ref:`customized <ecommerce/checkout/prevent-sale>` button,
- add a :ref:`Buy now <ecommerce/checkout/buy-now>` button, and
- add an :ref:`Order again <ecommerce/checkout/re-order>` button to the customer portal.
.. _ecommerce/checkout/add-to-cart:
Add to cart options
-------------------
Default add to cart behavior
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
When clicking the :guilabel:`Add to cart` button, different actions can be triggered. To configure
them, go to :menuselection:`Website --> Configuration --> Settings`, scroll down to the
:guilabel:`Shop - Checkout Process` section, and select one of the following options:
- :guilabel:`Stay on Product Page`: The customer remains on the product's page.
- :guilabel:`Go to cart`: The customer is immediately redirected to the cart.
- :guilabel:`Let the user decide (dialog)`: The customer can choose if they want to go to the cart
(:guilabel:`Proceed to Checkout`) or if they prefer to stay on the product page
(:guilabel:`Continue Shopping`).
.. note::
This dialog box always appears regardless of the configuration to suggest :doc:`optional products
<products/cross_upselling>`, if any.
.. _ecommerce/checkout/prevent-sale:
Button customization
~~~~~~~~~~~~~~~~~~~~
You can replace the :guilabel:`Add to Cart` button with a :guilabel:`Contact Us` button, which
redirects users to the default contact form.
.. note::
Removing the ability to add products to the cart is often used by businesses that want to display
an online catalog but cannot share prices publicly (e.g., to offer custom or variable pricing).
To do so, go to :menuselection:`Website --> Configuration --> Settings`. Under the :guilabel:`Shop -
Products` section, tick :guilabel:`Prevent Sale of Zero Priced Product`. A new :guilabel:`Button
url` field appears to enter a redirect URL.
Then, for all products that should display the :guilabel:`Contact Us` button, set their price to
`0` using the product form or a :doc:`pricelist <../../sales/sales/products_prices/prices/pricing>`.
.. image:: checkout/cart-contact-us.png
:alt: Contact us button on product page
.. note::
The :guilabel:`Contact Us` button label, URL, and the *Not Available For Sale* text beneath the
product title and description can be modified on the product's page while in :guilabel:`Edit`
mode.
Additional add to cart buttons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can add additional :guilabel:`Add to Cart` buttons and link them to specific products on any
website page.
To add them, open the website editor and place the :guilabel:`Add to Cart Button` inner content
building block. Once placed, click the button, scroll to the :guilabel:`Add to Cart Button`
section, and configure the following:
- :guilabel:`Product`: Select the product to link the button with.
- :guilabel:`Action`: Choose if it should be an :guilabel:`Add to Cart` or :ref:`Buy Now
<ecommerce/checkout/buy-now>` button.
.. note::
- If the product has variants, either choose one or leave the option on :guilabel:`Visitor's
Choice`, which prompts the customer to select a variant and then to :guilabel:`Proceed to
Checkout` or :guilabel:`Continue Shopping`.
- The default :guilabel:`Add to Cart` button does not offer those options, but its label can be
changed.
.. tip::
While in :guilabel:`Edit` mode, it is also possible to show or hide the :icon:`fa-shopping-cart`
(:guilabel:`cart`) icon in the page's header. Click the header and then the
:icon:`fa-shopping-cart` (:guilabel:`cart`) button next to the :guilabel:`Show Empty` option
under the :guilabel:`Customize` tab.
.. _ecommerce/checkout/buy-now:
Buy now
-------
To let customers choose to go to the :ref:`review order <ecommerce/checkout/review_order>` step
directly, you can add an additional :guilabel:`Buy now` button. To do so, go to
:menuselection:`Website --> Configuration --> Settings`. Under the :guilabel:`Shop - Checkout
Process` section, tick the :guilabel:`Buy Now` feature.
.. tip::
Alternatively, enable the feature by going to any product's page while in :guilabel:`Edit` mode
and, in the :guilabel:`Customize` tab, clicking the :icon:`fa-bolt` :guilabel:`Buy Now` button
next to the :guilabel:`Cart` options.
.. image:: checkout/cart-buy-now.png
:alt: Buy now button
.. _ecommerce/checkout/re-order:
Re-order from portal
--------------------
You can let customers re-order items from previous sales orders from their customer portal using the
:guilabel:`Order Again` button. To add it, go to :menuselection:`Website --> Configuration -->
Settings`. Under the :guilabel:`Shop - Checkout Process` section, tick the :guilabel:`Re-order From
Portal` feature.
.. image:: checkout/order-again-button.png
:alt: Re-order button
.. _ecommerce/checkout/policy:
@@ -14,29 +132,29 @@ Checkout policy
===============
To allow customers to checkout as guests or force them to sign in/create an account, go to
:menuselection:`Website --> Configuration --> Settings`, scroll down to the
:guilabel:`Shop - Checkout Process` section, and configure the :guilabel:`Sign in/up at checkout`
setting. The following options are available:
:menuselection:`Website --> Configuration --> Settings`, scroll down to the :guilabel:`Shop -
Checkout Process` section, and configure the :guilabel:`Sign in/up at checkout` setting. The
following options are available:
- :guilabel:`Optional`: Customers can check out as guests and register later via the order
confirmation email to track their order.
- :guilabel:`Disabled (buy as guest)`: Customers can checkout as guests without creating an account.
- :guilabel:`Mandatory (no guest checkout)`: Customers must sign in or create an account at
the :ref:`Review Order <ecommerce/checkout/review_order>` step to complete their purchase.
- :guilabel:`Mandatory (no guest checkout)`: Customers must sign in or create an account at the
:ref:`Review Order <ecommerce/checkout/review_order>` step to complete their purchase.
B2B access management
---------------------
To restrict checkout to selected B2B customers, follow these steps:
To restrict checkout to selected B2B customers:
#. Go to :menuselection:`Website --> Configuration --> Settings`, and in the
:guilabel:`Shop - Checkout Process` section, enable the
:ref:`Mandatory (no guest checkout) <ecommerce/checkout/policy>` option.
#. Go to :menuselection:`Website --> Configuration --> Settings`, and in the :guilabel:`Shop -
Checkout Process` section, enable the :ref:`Mandatory (no guest checkout)
<ecommerce/checkout/policy>` option.
#. Scroll down to the :guilabel:`Privacy` section, go to :guilabel:`Customer Account`, and select
:guilabel:`On invitation`.
#. Go to :menuselection:`Website --> eCommerce --> Customers`, switch to the :guilabel:`List` view,
and select the customers you wish to grant access to your
:doc:`portal </applications/general/users/portal>`.
and select the customers you wish to grant access to your :doc:`portal
<../../general/users/portal>`.
#. Click the :icon:`fa-cog` :guilabel:`Actions` button, then :guilabel:`Grant portal access`.
#. Review the selected customers in the :guilabel:`Portal Access Management` pop-up and click
:guilabel:`Grant Access`.
@@ -47,13 +165,13 @@ instructions on setting a password and activating their account.
.. note::
- You can revoke access or re-invite a customer using the related buttons in the
:guilabel:`Portal Access Management` pop-up.
- Users can only have one :doc:`portal access </applications/general/users/portal>` per email.
- Users can only have one :doc:`portal access <../../general/users/portal>` per email.
- Settings are website-specific, so you could set up a B2C website that allows guest checkout and
B2B website with mandatory sign-in.
a B2B website with mandatory sign-in.
.. seealso::
- :doc:`Customer accounts <customer_accounts>`
- :doc:`Portal access </applications/general/users/portal>`
- :doc:`Customer accounts documentation <customer_accounts>`
- :doc:`Portal access documentation <../../general/users/portal>`
.. _ecommerce/checkout/steps:
@@ -70,9 +188,9 @@ During the checkout process, customers are taken through the following steps:
.. _ecommerce/checkout/customize_steps:
Each step can be customized using the website editor: Click :guilabel:`Edit` to add
:doc:`building blocks <../website/web_design/building_blocks>` from the :guilabel:`Blocks` tab or
open to the :guilabel:`Customize` tab to enable various checkout options.
Each step can be customized using the website editor by adding :doc:`building blocks
<../website/web_design/building_blocks>` or opening the :guilabel:`Customize` tab to enable various
checkout options.
.. note::
Content added through building blocks is **specific** to each step.
@@ -93,16 +211,16 @@ as:
- :guilabel:`Suggested Accessories`: to showcase :ref:`accessory products
<ecommerce/cross_upselling/accessory>`;
- :guilabel:`Promo Code`: to allow customers to redeem :ref:`gift cards <ewallet_gift/gift-cards>`
or apply :doc:`discount codes </applications/sales/sales/products_prices/loyalty_discount>`;
or apply :doc:`discount codes <../../sales/sales/products_prices/loyalty_discount>`;
- :guilabel:`Add to Wishlist`: To allow signed-in users to remove a product from their cart and add
it to their wishlist, go to :menuselection:`Website --> Configuration --> Settings`, scroll to
the :guilabel:`Shop - Products` section, and enable :guilabel:`Wishlists`. The :guilabel:`Add to
Wishlist` option is then enabled by default in the website editor.
.. note::
- If a :doc:`fiscal position </applications/finance/fiscal_localizations>` is detected automatically,
the product tax is determined based on the customer's IP address.
- If the installed :doc:`payment provider </applications/finance/payment_providers>` supports
- If a :doc:`fiscal position <../../finance/fiscal_localizations>` is detected
automatically, the product tax is determined based on the customer's IP address.
- If the installed :doc:`payment provider <../../finance/payment_providers>` supports
:ref:`express checkout <payment_providers/express_checkout>`, a dedicated button is displayed,
allowing customers to go straight from the cart to the confirmation page without filling out
the contact form.
@@ -114,8 +232,8 @@ Delivery
Once they have reviewed their order:
- Unsigned-in customers are prompted to :guilabel:`Sign in` or enter their
:guilabel:`Email address`, along with their delivery address and phone details;
- Unsigned-in customers are prompted to :guilabel:`Sign in` or enter their :guilabel:`Email
address`, along with their delivery address and phone details;
- Signed-in customers can select the appropriate :guilabel:`Delivery address`.
They can then :doc:`choose a delivery method <shipping>`, select or enter their :guilabel:`Billing
@@ -123,42 +241,45 @@ Address` (or toggle the :guilabel:`Same as delivery address` switch if the billi
addresses are identical), and click :guilabel:`Confirm` to proceed to the next step.
.. tip::
For B2B customers, you can also :ref:`enable <ecommerce/checkout/customize_steps>` optional
:guilabel:`VAT` and :guilabel:`Company name` fields by toggling the :guilabel:`Show B2B Fields`
option in the website editor.
- For B2B customers, you can also :ref:`enable <ecommerce/checkout/customize_steps>` optional
:guilabel:`VAT` and :guilabel:`Company name` fields by toggling the :guilabel:`Show B2B Fields`
option in the website editor.
- You can add a checkbox for users without an account to sign up for a newsletter. To do so, go
to :menuselection:`Website --> Configuration --> Settings`. Under the :guilabel:`Shop -
Checkout Process` section, enable the :guilabel:`Newsletter` feature and select a
:guilabel:`Newsletter List`.
.. _ecommerce/checkout/extra_step:
Extra info
----------
You can add an :guilabel:`Extra Info` step in the checkout process to collect additional
customer information through an online form, which is then included in the :ref:`sales order
<handling/sales>`. To do so :ref:`enable <ecommerce/checkout/customize_steps>` the :guilabel:`Extra
You can add an :guilabel:`Extra Info` step in the checkout process to collect additional customer
information through an online form, which is then included in the :ref:`sales order
<handling/sales>`. To do so, :ref:`enable <ecommerce/checkout/customize_steps>` the :guilabel:`Extra
Step` option in the website editor. The form can be :ref:`customized <website/dynamic_content/form>`
as needed.
.. tip::
Alternatively, go to :menuselection:`Website --> Configuration --> Settings`, scroll to the
:guilabel:`Shop - Checkout Process` section, enable :guilabel:`Extra Step During Checkout`, and
click :guilabel:`Save`. Click :icon:`fa-arrow-right` :guilabel:`Configure Form` to customize the
form.
click :guilabel:`Save`. Click :icon:`fa-arrow-right` :guilabel:`Configure Form` to customize it.
.. _ecommerce/checkout/payment:
Payment
-------
At the :guilabel:`Payment` step, customers :guilabel:`Choose a payment method`, enter their
payment details, and click :guilabel:`Pay now`.
At the :guilabel:`Payment` step, customers :guilabel:`Choose a payment method`, enter their payment
details, and click :guilabel:`Pay now`.
You can require customers to agree to your :doc:`terms and conditions
</applications/finance/accounting/customer_invoices/terms_conditions>` before payment. To
:ref:`enable <ecommerce/checkout/customize_steps>` this option, go to the website editor and toggle
the :guilabel:`Accept Terms & Conditions` feature.
<../../finance/accounting/customer_invoices/terms_conditions>` before payment. To :ref:`enable
<ecommerce/checkout/customize_steps>` this option, go to the website editor and toggle the
:guilabel:`Accept Terms & Conditions` feature.
.. tip::
Enable the :ref:`developer mode <developer-mode>` and click the :icon:`fa-bug` :guilabel:`bug`
Enable the :ref:`developer mode <developer-mode>` and click the :icon:`fa-bug` (:guilabel:`bug`)
icon to display an :ref:`availability <payment_providers/availability>` report for payment
providers and payment methods, which helps diagnose potential availability issues on the payment
form.
@@ -172,4 +293,4 @@ The final step of the checkout process is the :guilabel:`Order confirmation`, wh
summary of the customer's purchase details.
.. seealso::
:doc:`Order handling <order_handling>`
:doc:`Order handling documentation <order_handling>`

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -169,7 +169,7 @@ or a **wishlist**. To do so, go to your **main shop page**, and at the end of th
appear when hovering the mouse over a product's image.
- :guilabel:`Add to Cart`: adds a button to
:doc:`add the product to the cart <../cart>`;
:doc:`add the product to the cart <../checkout>`;
- :guilabel:`Comparison List`: adds a button to **compare** products based on their price, variant,
etc.;
- :guilabel:`Wishlist Button`: adds a button to **wishlist** the product.

View File

@@ -32,4 +32,5 @@ applications/productivity/voip/transfer_forward.rst applications/productivity/vo
# applications/websites
applications/websites/ecommerce/cart.rst applications/websites/ecommerce/checkout.rst
applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst