[IMP] ecommerce: update add to cart page

task-4480769

Author: lman-odoo

content/applications/websites/ecommerce/cart.rst

@@ -1,111 +1,106 @@
-===========
-Add to cart
-===========
-
-The :guilabel:`Add to Cart` button can be customized in multiple ways. You can:
+=============
+Order buttons
+=============
 
-- 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.
+Odoo Ecommerce provides several order button options. To enable or add them on your product page,
+go to :menuselection:`Website --> Configuration --> Settings`. Under
+the :guilabel:`Shop - Checkout Process` section, tick an option for the :ref:`Add to Cart
+<cart/add-to-cart>` button or enable the :ref:`Buy now <cart/buy-now>` or
+:ref:`Re-order From Portal <cart/re-order>` buttons, and click :guilabel:`Save`.
 
-.. seealso::
-   :doc:`checkout`
+.. _cart/add-to-cart:
 
-.. _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**.
+Add to cart
+===========
 
-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.
+By default, the :guilabel:`Add to cart` button is displayed on your product's page. It provides
+several options to configure when clicking on the button:
+  - :guilabel:`Stay on Product Page`: The product is added to the cart, and
+    customers remain on the product's page.
+  - :guilabel:`Go to cart`: Customer are immediately **redirected** to their cart.
+  - :guilabel:`Let the user decide (dialog)`: Customers can choose if they want to go to the
+    cart and :guilabel:`Proceed to Checkout` or if they prefer to :guilabel:`Continue Shopping`.
 
 .. 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
-===================================================
+Replace the button
+------------------
 
-You can replace the 'Add to Cart' button with a 'Contact Us' button which redirects users to the URL
-of your choice.
+You can replace the :guilabel:`Add to Cart` button with a :guilabel:`Contact Us` button
+which redirects users to a given URL.
 
 .. 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.
+   Hiding the :guilabel:`Add to Cart` button is often used by B2B ecommerce businesses
+   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`
+:guilabel:`Prevent Sale of Zero Priced Product`. As a result, a new :guilabel:`Button url` field
+appears to enter a **redirect URL**. 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.
+   The :guilabel:`Contact Us` button and *Not Available For Sale* text beneath the product title
+   and description can both be modified on the product's page while in :guilabel:`Edit` mode.
 
-Customizable 'Add to Cart' button
-=================================
+Add a customizable order 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
+You can also create a customizable :guilabel:`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:
+To add it, go to the :guilabel:`Shop` page of your choice, click :menuselection:`Edit --> Blocks`
+and place the :guilabel:`Add to Cart Button` building block. Once placed, click the button, scroll
+to the :guilabel:`Add to Cart Button` section and use the following options:
+
+- :guilabel:`Product`: Select the product to link the button with. Selecting a product renders the
+  :guilabel:`Action` field.
+- :guilabel:`Action`: Choose if it should be a :guilabel:`Add to Cart` or :ref:`Buy Now
+  <cart/buy-now>` button.
 
-- :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).
+.. note::
+   The default :guilabel:`Add to Cart` button does not offer those options, but the label can be
+   changed.
 
-.. image:: cart/cart-add.png
-   :align: center
-   :alt: Customizable 'Add to Cart' button
+.. tip::
+   While in :guilabel:`Edit` mode, it is also possible to show or hide the
+   :icon:`fa-shopping-cart` :guilabel:`cart` icon in the header of the page. Click the header,
+   and enable the :guilabel:`Show empty` feature under the :guilabel:`Customize` tab.
 
-.. _ecommerce/cart/buy-now:
+.. _cart/buy-now:
 
-'Buy Now' button
-================
+Buy now
+=======
 
-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`.
+Enable the :guilabel:`Buy Now` button to take customers 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.
 
 .. 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.
+   Alternatively, the :guilabel:`Buy Now` button can also be enabled from any product's page while
+   in :guilabel:`Edit` mode. In the :guilabel:`Customize` tab, click the :guilabel:`Buy now` button
+   next to :guilabel:`Cart`.
 
 .. image:: cart/cart-buy-now.png
    :alt: Buy Now button
 
-Re-order from portal
+.. _cart/re-order:
+
+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**.
+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
+.. image:: cart/order-again-button.png
+   :alt: Re-order button