[IMP] ecommerce: update add to cart page

task-4480769

closes odoo/documentation#13602

X-original-commit: 08898ad470
Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>

content/applications/websites/ecommerce.rst

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

content/applications/websites/ecommerce/cart.rst

@@ -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

content/applications/websites/ecommerce/checkout.rst

@@ -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
+Odoo eCommerce provides several options to organize the ordering and checkout process. It offers
-:icon:`fa-shopping-cart` button in the header to start the checkout process. In Odoo eCommerce, this
+different :ref:`order button <ecommerce/checkout/order-buttons>` options and sequential
-process consists of sequential :ref:`steps <ecommerce/checkout/steps>`, some of which support
+:ref:`checkout steps <ecommerce/checkout/steps>`, some of which support additional features. The
-additional features. The related checkout pages can be :ref:`customized
+related buttons and checkout pages can be customized using the website editor.
-<ecommerce/checkout/customize_steps>` 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
+:menuselection:`Website --> Configuration --> Settings`, scroll down to the :guilabel:`Shop -
-:guilabel:`Shop - Checkout Process` section, and configure the :guilabel:`Sign in/up at checkout`
+Checkout Process` section, and configure the :guilabel:`Sign in/up at checkout` setting. The
-setting. The following options are available:
+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
+- :guilabel:`Mandatory (no guest checkout)`: Customers must sign in or create an account at the
-  the :ref:`Review Order <ecommerce/checkout/review_order>` step to complete their purchase.
+  :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
+#. Go to :menuselection:`Website --> Configuration --> Settings`, and in the :guilabel:`Shop -
-   :guilabel:`Shop - Checkout Process` section, enable the
+   Checkout Process` section, enable the :ref:`Mandatory (no guest checkout)
-   :ref:`Mandatory (no guest checkout) <ecommerce/checkout/policy>` option.
+   <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
+   and select the customers you wish to grant access to your :doc:`portal
-   :doc:`portal </applications/general/users/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:`Customer accounts documentation <customer_accounts>`
-   - :doc:`Portal access </applications/general/users/portal>`
+   - :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
+Each step can be customized using the website editor by adding :doc:`building blocks
-:doc:`building blocks <../website/web_design/building_blocks>` from the :guilabel:`Blocks` tab or
+<../website/web_design/building_blocks>` or opening the :guilabel:`Customize` tab to enable various
-open to the :guilabel:`Customize` tab to enable various checkout options.
+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,
+   - If a :doc:`fiscal position <../../finance/fiscal_localizations>` is detected
-     the product tax is determined based on the customer's IP address.
+     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 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
+- Unsigned-in customers are prompted to :guilabel:`Sign in` or enter their :guilabel:`Email
-  :guilabel:`Email address`, along with their delivery address and phone details;
+  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
+   - 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`
+     :guilabel:`VAT` and :guilabel:`Company name` fields by toggling the :guilabel:`Show B2B Fields`
-   option in the website editor.
+     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
+You can add an :guilabel:`Extra Info` step in the checkout process to collect additional customer
-customer information through an online form, which is then included in the :ref:`sales order
+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
+<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
+   click :guilabel:`Save`. Click :icon:`fa-arrow-right` :guilabel:`Configure Form` to customize it.
-   form.
 
 .. _ecommerce/checkout/payment:
 
 Payment
 -------
 
-At the :guilabel:`Payment` step, customers :guilabel:`Choose a payment method`, enter their
+At the :guilabel:`Payment` step, customers :guilabel:`Choose a payment method`, enter their payment
-payment details, and click :guilabel:`Pay now`.
+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
+<../../finance/accounting/customer_invoices/terms_conditions>` before payment. To :ref:`enable
-:ref:`enable <ecommerce/checkout/customize_steps>` this option, go to the website editor and toggle
+<ecommerce/checkout/customize_steps>` this option, go to the website editor and toggle the
-the :guilabel:`Accept Terms & Conditions` feature.
+: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>`

content/applications/websites/ecommerce/products/catalog.rst

@@ -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.

redirects/18.0.txt

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