8000 [IMP] ecommerce: update add to cart page · odoo/documentation@db318c7 · GitHub
[go: up one dir, main page]
Skip to content

Commit db318c7

Browse files
author
lman-odoo
committed
[IMP] ecommerce: update add to cart page
task-4480769
1 parent 1a16965 commit db318c7

File tree

6 files changed

+64
-68
lines changed

6 files changed

+64
-68
lines changed

‎content/applications/websites/ecommerce/cart.rst

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,107 @@
1-
===========
2-
Add to cart
3-
===========
1+
=============
2+
Order buttons
3+
=============
44

5-
The :guilabel:`Add to Cart` button can be customized in multiple ways. You can:
5+
Odoo Ecommerce provides several order button options. To enable or add them on your product page,
6+
go to :menuselection:`Website --> Configuration --> Settings`. Under
7+
the :guilabel:`Shop - Checkout Process` section, tick an option for the :ref:`Add to Cart
8+
<cart/add-to-cart>` button or enable the :ref:`Buy now <cart/buy-now>` or
9+
:ref:`Re-order From Portal <cart/re-order>` buttons, and click :guilabel:`Save`.
610

7-
- Choose on which page customers go after clicking the 'Add to Cart' button;
8-
- Hide the 'Add to Cart' button to prevent sales;
9-
- Add a 'Buy Now' button to skip the cart step and lead customers straight to checkout;
10-
- Create additional 'Add to Cart / Buy Now' buttons;
11-
- Add an 'Order Again' button to the customer portal.
11+
.. _cart/add-to-cart:
1212

13-
.. seealso::
14-
:doc:`checkout`
15-
16-
.. _ecommerce/cart/action_customization:
17-
18-
'Add to Cart' action customization
19-
==================================
13+
Add to cart
14+
===========
2015

21-
When customers click on the :guilabel:`Add to Cart` button, the product is added to their cart, and
22-
customers remain **by default** on the product's page. However, customers can either immediately be
23-
**redirected** to their cart, or given the choice on what to do through a **dialog box**.
16+
By default, the :guilabel:`Add to cart` button is displayed on your product's page. It provides
17+
several options to configure when clicking on the button:
2418

25-
To change the default behavior, go to :menuselection:`Website --> Configuration --> Settings`. Under
26-
the :guilabel:`Shop - Checkout Process` section, look for :guilabel:`Add to Cart` and select one of
27-
the options.
19+
- :guilabel:`Stay on Product Page`: The product is added to the cart, and
20+
customers remain on the product's page.
21+
- :guilabel:`Go to cart`: Customer are immediately **redirected** to their cart.
22+
- :guilabel:`Let the user decide (dialog)`: Customers can choose if they want to go to the
23+
cart and :guilabel:`Proceed to Checkout` or if they prefer to :guilabel:`Continue Shopping`.
2824

2925
.. note::
3026
If a product has :doc:`optional products <products/cross_upselling>`, the **dialog
3127
box** will always appear.
3228

33-
.. seealso::
34-
:doc:`products/catalog`
35-
3629
.. _cart/prevent-sale:
3730

38-
Replace 'Add to Cart' button by 'Contact Us' button
39-
===================================================
31+
Replace the button
32+
------------------
4033

41-
You can replace the 'Add to Cart' button with a 'Contact Us' button which redirects users to the URL
42-
of your choice.
34+
You can replace the :guilabel:`Add to Cart` button with a :guilabel:`Contact Us` button
35+
which redirects users to a given URL.
4336

4437
.. note::
45-
Hiding the :guilabel:`Add to Cart` button is often used by B2B eCommerces that need to restrict
46-
purchases only to :ref:`customers with an account <ecommerce/checkout/policy>`, but still want to
47-
display an online product catalog for those without.
38+
Hiding the :guilabel:`Add to Cart` button is often used by B2B ecommerce businesses
39+
that need to restrict purchases only to :ref:`customers with an account <ecommerce/checkout/policy>`,
40+
but still want to display an online product catalog for those without.
4841

4942
To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Products` and tick
50-
:guilabel:`Prevent Sale of Zero Priced Product`. This creates a new :guilabel:`Button url` field
51-
where you can enter the **redirect URL** to be used. Then, set the price of the product to `0.00`
43+
:guilabel:`Prevent Sale of Zero Priced Product`. As a result, a new :guilabel:`Button url` field
44+
appears to enter a **redirect URL**. Then, set the price of the product to `0.00`
5245
either from the **product's template**, or from a
5346
:doc:`pricelist </applications/sales/sales/products_prices/prices/pricing>`.
5447

55-
.. image:: cart/cart-contactus.png
56-
:align: center
48+
.. image:: cart/cart-contact-us.png
5749
:alt: Contact us button on product page
5850

5951
.. note::
60-
The 'Contact Us' button and '*Not Available For Sale*' text can both be modified using the
61-
**website builder** on the product's page (:menuselection:`Edit --> Customize`) by clicking on
62-
them.
52+
The :guilabel:`Contact Us` button and *Not Available For Sale* text beneath the product title
53+
and description can both be modified on the product's page while in :guilabel:`Edit` mode.
6354

64-
Customizable 'Add to Cart' button
65-
=================================
55+
Add a customizable order button
56+
-------------------------------
6657

67-
You can also create a customizable 'Add to Cart' button and link it to a specific product. The
68-
**customized button** can be added on any page of the website as an **inner content** building
58+
You can also create a customizable :guilabel:`Add to Cart` button and link it to a specific product.
59+
The **customized button** can be added on any page of the website as an **inner content** building
6960
block, and is an *additional* button to the regular :guilabel:`Add to Cart` button.
7061

71-
To add it, go on the :guilabel:`Shop` page of your choice, click :menuselection:`Edit --> Blocks`
72-
and place the building block. Once placed, you have the following options:
62+
To add it, go to the :guilabel:`Shop` page of your choice, click :menuselection:`Edit --> Blocks`
63+
and place the :guilabel:`Add to Cart Button` building block. Once placed, click the button, scroll
64+
to the :guilabel:`Add to Cart Button` section and use the following options:
65+
66+
- :guilabel:`Product`: Select the product to link the button with. Selecting a product renders the
67+
:guilabel:`Action` field.
68+
- :guilabel:`Action`: Choose if it should be a :guilabel:`Add to Cart` or :ref:`Buy Now
69+
<cart/buy-now>` button.
7370

74-
- :guilabel:`Product`: select the product to link the button with. Selecting a product renders the
75-
:guilabel:`Action` field available;
76-
- :guilabel:`Action`: choose if the button should :guilabel:`Add to Cart` or :guilabel:`Buy Now`
77-
(instant checkout).
71+
.. note::
72+
The default :guilabel:`Add to Cart` button does not offer those options, but the label can be
73+
changed.
7874

79-
.. image:: cart/cart-add.png
80-
:align: center
81-
:alt: Customizable 'Add to Cart' button
75+
.. tip::
76+
While in :guilabel:`Edit` mode, it is also possible to show or hide the
77+
:icon:`fa-shopping-cart` :guilabel:`cart` icon in the header of the page. Click the header,
78+
and enable the :guilabel:`Show empty` feature under the :guilabel:`Customize` tab.
8279

83-
.. _ecommerce/cart/buy-now:
80+
.. _cart/buy-now:
8481

85-
'Buy Now' button
86-
================
82+
Buy now
83+
=======
8784

88-
You can enable the :guilabel:`Buy Now` button to take customers directly to the :ref:`review order
89-
<ecommerce/checkout/review_order>` step instead of adding the product to the
90-
cart. This button is an *additional* option and does not replace the :guilabel:`Add to Cart` button.
91-
To do so, go to :menuselection:`Website --> Configuration --> Settings`, scroll to the
92-
:guilabel:`Shop—Checkout Process` section, enable :guilabel:`Buy Now`, and :guilabel:`Save`.
85+
Enable the :guilabel:`Buy Now` button to take customers to the :ref:`review order
86+
<ecommerce/checkout/review_order>` step instead of adding the product to the cart.
87+
This button is an *additional* option and does not replace the :guilabel:`Add to Cart` button.
9388

9489
.. tip::
95-
Alternatively, you can enable the :guilabel:`Buy Now` button directly from a product page by
96-
clicking :guilabel:`Edit` and navigating to the :guilabel:`Customize` tab.
90+
Alternatively, the :guilabel:`Buy Now` button can also be enabled from any product's page while
91+
in :guilabel:`Edit` mode. In the :guilabel:`Customize` tab, click the :guilabel:`Buy now` button
92+
next to :guilabel:`Cart`.
9793

9894
.. image:: cart/cart-buy-now.png
9995
:alt: Buy Now button
10096

101-
Re-order from portal
97+
.. _cart/re-order:
98+
99+
Re-order From Portal
102100
====================
103101

104102
Customers have the possibility to **re-order** items from **previous sales orders** on the customer
105-
portal. To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Checkout
106-
Process` and enable :guilabel:`Re-order From Portal`. Customers can find the :guilabel:`Order Again`
107-
button on their **sales order** from the **customer portal**.
103+
portal. Customers can find the :guilabel:`Order Again` button on their **sales order**
104+
from the **customer portal**.
108105

109-
.. image:: cart/cart-reorder.png
110-
:align: center
106+
.. image:: cart/order-again-button.png
111107
:alt: Re-order button

‎content/applications/websites/ecommerce/cart/cart-add.png

-1.91 KB
Binary file not shown.

‎content/applications/websites/ecommerce/cart/cart-contact-us.png

6.31 KB
Loading

‎content/applications/websites/ecommerce/cart/cart-contactus.png

-9.33 KB
Binary file not shown.

‎content/applications/websites/ecommerce/cart/cart-reorder.png

-4.34 KB
Binary file not shown.

‎content/applications/websites/ecommerce/cart/order-again-button.png

2.54 KB
Loading

0 commit comments

Comments
 (0)
0