diff --git a/content/applications/websites/ecommerce.rst b/content/applications/websites/ecommerce.rst index 9e9eef6127..f1c4d8dc59 100644 --- a/content/applications/websites/ecommerce.rst +++ b/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 diff --git a/content/applications/websites/ecommerce/cart.rst b/content/applications/websites/ecommerce/cart.rst deleted file mode 100644 index 3995e4b8e1..0000000000 --- a/content/applications/websites/ecommerce/cart.rst +++ /dev/null @@ -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 `, 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 `, 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 `. - -.. 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 -` 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 diff --git a/content/applications/websites/ecommerce/cart/cart-add.png b/content/applications/websites/ecommerce/cart/cart-add.png deleted file mode 100644 index 9e548df87f..0000000000 Binary files a/content/applications/websites/ecommerce/cart/cart-add.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/cart/cart-contactus.png b/content/applications/websites/ecommerce/cart/cart-contactus.png deleted file mode 100644 index 024e3418fa..0000000000 Binary files a/content/applications/websites/ecommerce/cart/cart-contactus.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/cart/cart-reorder.png b/content/applications/websites/ecommerce/cart/cart-reorder.png deleted file mode 100644 index 813fc3f6ed..0000000000 Binary files a/content/applications/websites/ecommerce/cart/cart-reorder.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/checkout.rst b/content/applications/websites/ecommerce/checkout.rst index 9921e39615..995d54c77c 100644 --- a/content/applications/websites/ecommerce/checkout.rst +++ b/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 -:icon:`fa-shopping-cart` button in the header to start the checkout process. In Odoo eCommerce, this -process consists of sequential :ref:`steps `, some of which support -additional features. The related checkout pages can be :ref:`customized -` using the website editor. +Odoo eCommerce provides several options to organize the ordering and checkout process. It offers +different :ref:`order button ` options and sequential +:ref:`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 ` button's behavior, +- replace it with a :ref:`customized ` button, +- add a :ref:`Buy now ` button, and +- add an :ref:`Order again ` 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 + `, 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 + ` 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 ` 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 ` step to complete their purchase. +- :guilabel:`Mandatory (no guest checkout)`: Customers must sign in or create an account at the + :ref:`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) ` option. +#. Go to :menuselection:`Website --> Configuration --> Settings`, and in the :guilabel:`Shop - + Checkout Process` section, enable the :ref:`Mandatory (no guest checkout) + ` 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 `. + 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 ` 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 ` - - :doc:`Portal access ` + - :doc:`Customer accounts documentation ` + - :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 `; - :guilabel:`Promo Code`: to allow customers to redeem :ref:`gift cards ` - or apply :doc:`discount codes `; + 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 ` is detected automatically, - the product tax is determined based on the customer's IP address. - - If the installed :doc:`payment provider ` 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 `, 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 `, 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 ` 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 ` 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 -`. To do so :ref:`enable ` 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 +`. To do so, :ref:`enable ` the :guilabel:`Extra Step` option in the website editor. The form can be :ref:`customized ` 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 -` before payment. To -:ref:`enable ` 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 +` this option, go to the website editor and toggle the +:guilabel:`Accept Terms & Conditions` feature. .. tip:: - Enable the :ref:`developer mode ` and click the :icon:`fa-bug` :guilabel:`bug` + Enable the :ref:`developer mode ` and click the :icon:`fa-bug` (:guilabel:`bug`) icon to display an :ref:`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 ` + :doc:`Order handling documentation ` diff --git a/content/applications/websites/ecommerce/cart/cart-buy-now.png b/content/applications/websites/ecommerce/checkout/cart-buy-now.png similarity index 100% rename from content/applications/websites/ecommerce/cart/cart-buy-now.png rename to content/applications/websites/ecommerce/checkout/cart-buy-now.png diff --git a/content/applications/websites/ecommerce/checkout/cart-contact-us.png b/content/applications/websites/ecommerce/checkout/cart-contact-us.png new file mode 100644 index 0000000000..6b423a1f31 Binary files /dev/null and b/content/applications/websites/ecommerce/checkout/cart-contact-us.png differ diff --git a/content/applications/websites/ecommerce/checkout/order-again-button.png b/content/applications/websites/ecommerce/checkout/order-again-button.png new file mode 100644 index 0000000000..1ea0188b6d Binary files /dev/null and b/content/applications/websites/ecommerce/checkout/order-again-button.png differ diff --git a/content/applications/websites/ecommerce/products/catalog.rst b/content/applications/websites/ecommerce/products/catalog.rst index 6bb1d048a0..e1222adc6a 100644 --- a/content/applications/websites/ecommerce/products/catalog.rst +++ b/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. diff --git a/redirects/18.0.txt b/redirects/18.0.txt index a9af92d20b..cb651e3464 100644 --- a/redirects/18.0.txt +++ b/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 \ No newline at end of file +applications/websites/ecommerce/cart.rst applications/websites/ecommerce/checkout.rst +applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst