diff --git a/addons/account/static/src/js/section_and_note_fields_backend.js b/addons/account/static/src/js/section_and_note_fields_backend.js
index 26328cc045b53..1f232ac0db84e 100644
--- a/addons/account/static/src/js/section_and_note_fields_backend.js
+++ b/addons/account/static/src/js/section_and_note_fields_backend.js
@@ -6,9 +6,6 @@ odoo.define('account.section_and_note_backend', function (require) {
 // [UPDATED] now also allows configuring products on sale order.
 
 "use strict";
-var pyUtils = require('web.py_utils');
-var core = require('web.core');
-var _t = core._t;
 var FieldChar = require('web.basic_fields').FieldChar;
 var FieldOne2Many = require('web.relational_fields').FieldOne2Many;
 var fieldRegistry = require('web.field_registry');
@@ -72,121 +69,6 @@ var SectionAndNoteListRenderer = ListRenderer.extend({
         return this._super.apply(this, arguments).then(function () {
             self.$('> table').addClass('o_section_and_note_list_view');
         });
-    },
-    /**
-     * Add support for product configurator
-     *
-     * @override
-     * @private
-     */
-    _onAddRecord: function (ev) {
-        // we don't want the browser to navigate to a the # url
-        ev.preventDefault();
-
-        // we don't want the click to cause other effects, such as unselecting
-        // the row that we are creating, because it counts as a click on a tr
-        ev.stopPropagation();
-
-        // but we do want to unselect current row
-        var self = this;
-        this.unselectRow().then(function () {
-            var context = ev.currentTarget.dataset.context;
-
-            var pricelistId = self._getPricelistId();
-            if (context && pyUtils.py_eval(context).open_product_configurator){
-                self._rpc({
-                    model: 'ir.model.data',
-                    method: 'xmlid_to_res_id',
-                    kwargs: {xmlid: 'sale.sale_product_configurator_view_form'},
-                }).then(function (res_id) {
-                    self.do_action({
-                        name: _t('Configure a product'),
-                        type: 'ir.actions.act_window',
-                        res_model: 'sale.product.configurator',
-                        views: [[res_id, 'form']],
-                        target: 'new',
-                        context: {
-                            'default_pricelist_id': pricelistId
-                        }
-                    }, {
-                        on_close: function (products) {
-                            if (products && products !== 'special'){
-                                self.trigger_up('add_record', {
-                                    context: self._productsToRecords(products),
-                                    forceEditable: "bottom" ,
-                                    allowWarning: true,
-                                    onSuccess: function (){
-                                        self.unselectRow();
-                                    }
-                                });
-                            }
-                        }
-                    });
-                });
-            } else {
-                self.trigger_up('add_record', {context: context && [context]}); // TODO write a test, the deferred was not considered
-            }
-        });
-    },
-
-    /**
-     * Will try to get the pricelist_id value from the parent sale_order form
-     *
-     * @private
-     * @returns {integer} pricelist_id's id
-     */
-    _getPricelistId: function () {
-        var saleOrderForm = this.getParent() && this.getParent().getParent();
-        var stateData = saleOrderForm && saleOrderForm.state && saleOrderForm.state.data;
-        var pricelist_id = stateData.pricelist_id && stateData.pricelist_id.data && stateData.pricelist_id.data.id;
-
-        return pricelist_id;
-    },
-
-    /**
-     * Will map the products to appropriate record objects that are
-     * ready for the default_get
-     *
-     * @private
-     * @param {Array} products The products to transform into records
-     */
-    _productsToRecords: function (products) {
-        var records = [];
-        _.each(products, function (product){
-            var record = {
-                default_product_id: product.product_id,
-                default_product_uom_qty: product.quantity
-            };
-
-            if (product.no_variant_attribute_values) {
-                var default_product_no_variant_attribute_values = [];
-                _.each(product.no_variant_attribute_values, function (attribute_value) {
-                        default_product_no_variant_attribute_values.push(
-                            [4, parseInt(attribute_value.value)]
-                        );
-                });
-                record['default_product_no_variant_attribute_value_ids']
-                    = default_product_no_variant_attribute_values;
-            }
-
-            if (product.product_custom_attribute_values) {
-                var default_custom_attribute_values = [];
-                _.each(product.product_custom_attribute_values, function (attribute_value) {
-                    default_custom_attribute_values.push(
-                            [0, 0, {
-                                attribute_value_id: attribute_value.attribute_value_id,
-                                custom_value: attribute_value.custom_value
-                            }]
-                        );
-                });
-                record['default_product_custom_attribute_value_ids']
-                    = default_custom_attribute_values;
-            }
-
-            records.push(record);
-        });
-
-        return records;
     }
 });
 
diff --git a/addons/event_sale/__manifest__.py b/addons/event_sale/__manifest__.py
index 839ef948898e3..5ad00204e0489 100644
--- a/addons/event_sale/__manifest__.py
+++ b/addons/event_sale/__manifest__.py
@@ -20,8 +20,8 @@
 """,
     'depends': ['event', 'sale_management'],
     'data': [
+        'views/assets.xml',
         'views/event_views.xml',
-        'views/event_views_template.xml',
         'views/product_views.xml',
         'views/sale_order_views.xml',
         'data/event_sale_data.xml',
@@ -29,6 +29,7 @@
         'security/ir.model.access.csv',
         'security/event_security.xml',
         'wizard/event_edit_registration.xml',
+        'wizard/event_configurator_views.xml',
     ],
     'demo': ['data/event_demo.xml'],
     'installable': True,
diff --git a/addons/event_sale/static/src/js/event_configurator_controller.js b/addons/event_sale/static/src/js/event_configurator_controller.js
new file mode 100644
index 0000000000000..3ae81387b7896
--- /dev/null
+++ b/addons/event_sale/static/src/js/event_configurator_controller.js
@@ -0,0 +1,38 @@
+odoo.define('event.EventConfiguratorFormController', function (require) {
+"use strict";
+
+var FormController = require('web.FormController');
+
+/**
+ * This controller is overridden to allow configuring sale_order_lines through a popup
+ * window when a product with 'event_ok' is selected.
+ *
+ * This allows keeping an editable list view for sales order and remove the noise of
+ * those 2 fields ('event_id' + 'event_ticket_id')
+ */
+var EventConfiguratorFormController = FormController.extend({
+    /**
+     * We let the regular process take place to allow the validation of the required fields
+     * to happen.
+     *
+     * Then we can manually close the window, providing event information to the caller.
+     *
+     * @override
+     */
+    saveRecord: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            var state = self.renderer.state.data;
+            self.do_action({type: 'ir.actions.act_window_close', infos: {
+                eventConfiguration: {
+                    event_id: {id: state.event_id.data.id},
+                    event_ticket_id: {id: state.event_ticket_id.data.id}
+                }
+            }});
+        });
+    }
+});
+
+return EventConfiguratorFormController;
+
+});
diff --git a/addons/event_sale/static/src/js/event_configurator_test_ui.js b/addons/event_sale/static/src/js/event_configurator_test_ui.js
new file mode 100644
index 0000000000000..2a748e7b865cd
--- /dev/null
+++ b/addons/event_sale/static/src/js/event_configurator_test_ui.js
@@ -0,0 +1,92 @@
+odoo.define('event.event_configurator_tour', function (require) {
+"use strict";
+
+var tour = require('web_tour.tour');
+
+tour.register('event_configurator_tour', {
+    url: "/web",
+    test: true,
+}, [tour.STEPS.SHOW_APPS_MENU_ITEM, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'community'
+}, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'enterprise'
+}, {
+    trigger: ".o_list_button_add",
+    extra_trigger: ".o_sale_order"
+}, {
+    trigger: "a:contains('Add a product')"
+}, {
+    trigger: 'div[name="product_id"] input',
+    run: function (){
+        var $input = $('div[name="product_id"] input');
+        $input.click();
+        $input.val('EVENT');
+        // fake keydown to trigger search
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    },
+    id: 'product_selection_step'
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("EVENT")',
+    run: 'click'
+}, {
+    trigger: 'div[name="event_id"] input',
+    run: 'click'
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("Design")',
+    run: 'click',
+    in_modal: false
+}, {
+    trigger: 'div[name="event_ticket_id"] input',
+    run: 'click'
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("VIP")',
+    run: 'click',
+    in_modal: false
+}, {
+    trigger: '.o_event_sale_js_event_configurator_ok'
+}, {
+    trigger: 'textarea[name="name"]',
+    run: function () {
+        var $textarea = $('textarea[name="name"]');
+        if ($textarea.val().includes('Design Fair Los Angeles') && $textarea.val().includes('VIP')){
+            $textarea.addClass('tour_success');
+        }
+    }
+}, {
+    trigger: 'textarea[name="name"].tour_success',
+    run: function () {} // check
+}, {
+    trigger: 'ul.nav a:contains("Order Lines")',
+    run: 'click'
+}, {
+    trigger: 'td:contains("EVENT")',
+    run: 'click'
+}, {
+    trigger: '.o_event_sale_js_event_configurator_edit'
+}, {
+    trigger: 'div[name="event_ticket_id"] input',
+    run: 'click'
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("Standard")',
+    run: 'click',
+    in_modal: false
+}, {
+    trigger: '.o_event_sale_js_event_configurator_ok'
+}, {
+    trigger: 'textarea[name="name"]',
+    run: function () {
+        var $textarea = $('textarea[name="name"]');
+        if ($textarea.val().includes('Standard')){
+            $textarea.addClass('tour_success_2');
+        }
+    }
+}, {
+    trigger: 'textarea[name="name"].tour_success_2',
+    run: function () {} // check
+}]);
+
+});
diff --git a/addons/event_sale/static/src/js/event_configurator_view.js b/addons/event_sale/static/src/js/event_configurator_view.js
new file mode 100644
index 0000000000000..67aebba498715
--- /dev/null
+++ b/addons/event_sale/static/src/js/event_configurator_view.js
@@ -0,0 +1,21 @@
+odoo.define('event.EventConfiguratorFormView', function (require) {
+"use strict";
+
+var EventConfiguratorFormController = require('event.EventConfiguratorFormController');
+var FormView = require('web.FormView');
+var viewRegistry = require('web.view_registry');
+
+/**
+ * @see EventConfiguratorFormController for more information
+ */
+var EventConfiguratorFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: EventConfiguratorFormController
+    }),
+});
+
+viewRegistry.add('event_configurator_form', EventConfiguratorFormView);
+
+return EventConfiguratorFormView;
+
+});
diff --git a/addons/event_sale/static/src/js/event_configurator_widget.js b/addons/event_sale/static/src/js/event_configurator_widget.js
new file mode 100644
index 0000000000000..5324a1fc16b83
--- /dev/null
+++ b/addons/event_sale/static/src/js/event_configurator_widget.js
@@ -0,0 +1,59 @@
+odoo.define('event.configurator', function (require) {
+
+var relationalFields = require('web.relational_fields');
+var FieldsRegistry = require('web.field_registry');
+var EventConfiguratorWidgetMixin = require('event_sale.EventConfiguratorWidgetMixin');
+
+/**
+ * The event configurator widget is a simple FieldMany2One that adds the capability
+ * to configure a product_id with event information using the event configurator wizard.
+ *
+ * The event information include:
+ * - event_id
+ * - event_ticket_id
+ *
+ * !!! It should only be used on a product_id field !!!
+ */
+var EventConfiguratorWidget = relationalFields.FieldMany2One.extend(EventConfiguratorWidgetMixin, {
+    events: _.extend({},
+        relationalFields.FieldMany2One.prototype.events,
+        EventConfiguratorWidgetMixin.events
+    ),
+
+    /**
+     * @see _addEventConfigurationEditButton for more info
+     * @override
+     */
+    start: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            self._addEventConfigurationEditButton();
+        });
+    },
+
+    /**
+     * This method is overridden to check if the product_id needs configuration or not:
+     *
+     * @override
+     * @param {OdooEvent} event
+     *
+     * @private
+     */
+    _onFieldChanged: function (event) {
+        var self = this;
+
+        this._super.apply(this, arguments);
+        if (!event.data.changes.product_id){
+            return;
+        }
+
+        var productId = event.data.changes.product_id.id;
+        self._checkForEvent(productId, event.data.dataPointID);
+    }
+});
+
+FieldsRegistry.add('event_configurator', EventConfiguratorWidget);
+
+return EventConfiguratorWidget;
+
+});
diff --git a/addons/event_sale/static/src/js/event_configurator_widget_mixin.js b/addons/event_sale/static/src/js/event_configurator_widget_mixin.js
new file mode 100644
index 0000000000000..8e1300fb45154
--- /dev/null
+++ b/addons/event_sale/static/src/js/event_configurator_widget_mixin.js
@@ -0,0 +1,124 @@
+odoo.define('event_sale.EventConfiguratorWidgetMixin', function (require) {
+'use strict';
+
+var core = require('web.core');
+var _t = core._t;
+
+/**
+ * This mixin intends to gather methods that will be used by the event configurator.
+ * They're extracted here to be used by other widgets if necessary (namely the product_configurator_widget)
+ */
+var EventConfiguratorWidgetMixin = {
+    events: {
+        'click .o_event_sale_js_event_configurator_edit': '_onEditEventConfiguration'
+    },
+    /**
+     * This method will check if the current product set on the SO line is a configurable event.
+     * -> If so, we add a 'Edit Configuration' button next to the dropdown.
+     *
+     */
+    _addEventConfigurationEditButton: function () {
+        var $inputDropdown = this.$('.o_input_dropdown');
+
+        if (this.recordData.event_ok &&
+            $inputDropdown.length !== 0 &&
+            this.$('.o_event_sale_js_event_configurator_edit').length === 0) {
+            var $editConfigurationButton = $('<button>', {
+                type: 'button',
+                class: 'fa fa-pencil btn btn-secondary o_event_sale_js_event_configurator_edit',
+                tabindex: '-1',
+                draggable: false,
+                'aria-label': _t('Edit Configuration'),
+                title: _t('Edit Configuration')
+            });
+
+            $inputDropdown.after($editConfigurationButton);
+        }
+    },
+
+    /**
+     * This method will check if the productId needs configuration or not:
+     *
+     * @param {integer} productId
+     * @param {string} dataPointID
+     */
+    _checkForEvent: function (productId, dataPointID) {
+        var self = this;
+        if (productId){
+            this._rpc({
+                model: 'product.product',
+                method: 'read',
+                args: [productId, ['event_ok']],
+            }).then(function (result) {
+                if (result && result[0].event_ok){
+                    self._openEventConfigurator({
+                            default_product_id: productId
+                        },
+                        dataPointID
+                    );
+                }
+            });
+        }
+    },
+
+    /**
+     * Opens the event configurator in 'edit' mode.
+     *
+     * @private
+     */
+    _onEditEventConfiguration: function () {
+        var defaultValues = {
+            default_product_id: this.recordData.product_id.data.id
+        };
+
+        if (this.recordData.event_id) {
+            defaultValues['default_event_id'] = this.recordData.event_id.data.id;
+        }
+
+        if (this.recordData.event_ticket_id) {
+            defaultValues['default_event_ticket_id'] = this.recordData.event_ticket_id.data.id;
+        }
+
+        this._openEventConfigurator(defaultValues, this.dataPointID);
+    },
+
+    /**
+     * Opens the event configurator to allow configuring the SO line with events information.
+     *
+     * When the window is closed, configured values are used to trigger a 'field_changed'
+     * event to modify the current SO line.
+     *
+     * If the window is closed without providing the required values 'event_id' and
+     * 'event_ticket_id', the product_id field is cleaned.
+     *
+     * @param {Object} data various "default_" values
+     * @param {string} dataPointId
+     *
+     * @private
+     */
+    _openEventConfigurator: function (data, dataPointId) {
+        var self = this;
+        this.do_action('event_sale.event_configurator_action', {
+            additional_context: data,
+            on_close: function (result) {
+                if (result && result !== 'special'){
+                    self.trigger_up('field_changed', {
+                        dataPointID: dataPointId,
+                        changes: result.eventConfiguration
+                    });
+                } else {
+                    if (!self.recordData.event_id || !self.recordData.event_ticket_id) {
+                        self.trigger_up('field_changed', {
+                            dataPointID: dataPointId,
+                            changes: {product_id: {operation: 'DELETE_ALL'}}
+                        });
+                    }
+                }
+            }
+        });
+    }
+};
+
+return EventConfiguratorWidgetMixin;
+
+});
diff --git a/addons/event_sale/static/src/js/tour.js b/addons/event_sale/static/src/js/tour.js
deleted file mode 100644
index 148e1e140325e..0000000000000
--- a/addons/event_sale/static/src/js/tour.js
+++ /dev/null
@@ -1,13 +0,0 @@
-odoo.define("event_sale.tour", function (require) {
-    "use strict";
-
-    var tour = require('web_tour.tour');
-    require('sale.tour');
-
-    var step_index = _.findIndex(tour.tours.sale_tour.steps, function (step) {
-        return (step.id === "form_button_save_clicked");
-    });
-    tour.tours.sale_tour.steps.splice(step_index, 0, {
-        trigger: ".modal-dialog .modal-footer .btn-primary:contains('Save & Close')",
-    });
-});
diff --git a/addons/event_sale/static/src/scss/event_configurator_widget.scss b/addons/event_sale/static/src/scss/event_configurator_widget.scss
new file mode 100644
index 0000000000000..8f6d19087ff5a
--- /dev/null
+++ b/addons/event_sale/static/src/scss/event_configurator_widget.scss
@@ -0,0 +1,9 @@
+.o_list_view {
+    .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier) {
+        .o_field_widget .o_event_sale_js_event_configurator_edit {
+            padding: 0;
+            background-color: inherit;
+            margin-left: 3px;
+        }
+    }
+}
diff --git a/addons/event_sale/static/tests/event_configurator.test.js b/addons/event_sale/static/tests/event_configurator.test.js
new file mode 100644
index 0000000000000..4e739f19e48f0
--- /dev/null
+++ b/addons/event_sale/static/tests/event_configurator.test.js
@@ -0,0 +1,133 @@
+odoo.define('event.configurator.tests', function (require) {
+    "use strict";
+
+    var FormView = require('web.FormView');
+    var testUtils = require('web.test_utils');
+    var createView = testUtils.createView;
+
+    var getArch = function (){
+        return '<form>' +
+        '<sheet>' +
+        '<field name="sale_order_line" widget="section_and_note_one2many">' +
+        '<tree editable="top"><control>' +
+        '<create string="Add a product"/>' +
+        '<create string="Add a section" context="{\'default_display_type\': \'line_section\'}"/>' +
+        '<create string="Add a note" context="{\'default_display_type\': \'line_note\'}"/>' +
+        '</control>' +
+        '<field name="product_id" widget="event_configurator" />' +
+        '</tree>' +
+        '</field>' +
+        '</sheet>' +
+        '</form>';
+    };
+
+    QUnit.module('Event Configurator', {
+        beforeEach: function () {
+            this.data = {
+                product: {
+                    fields: {
+                        id: {type: 'integer'},
+                        event_ok: {type: 'boolean'}
+                    },
+                    records: [{
+                        id: 1,
+                        display_name: "Customizable Event",
+                        event_ok: true
+                    }, {
+                        id: 2,
+                        display_name: "Desk",
+                        event_ok: false
+                    }]
+                },
+                sale_order: {
+                    fields: {
+                        id: {type: 'integer'},
+                        sale_order_line: {
+                            string: 'lines',
+                            type: 'one2many',
+                            relation: 'sale_order_line'
+                        },
+                    }
+                },
+                sale_order_line: {
+                    fields: {
+                        product_id: {
+                            string: 'product',
+                            type: 'many2one',
+                            relation: 'product'
+                        },
+                        event_ok: {type: 'boolean'},
+                        event_id: {
+                            string: 'event',
+                            type: 'many2one',
+                            relation: 'event'
+                        },
+                        event_ticket_id: {
+                            string: 'event_ticket',
+                            type: 'many2one',
+                            relation: 'event_ticket'
+                        }
+                    }
+                }
+            };
+        }
+    }, function (){
+        QUnit.test('Select a regular product and verify that the event configurator is not opened', async function (assert) {
+            assert.expect(1);
+
+            var form = await createView({
+                View: FormView,
+                model: 'sale_order',
+                data: this.data,
+                arch: getArch(),
+                mockRPC: function (route, params) {
+                    if (params.method === 'read') {
+                        assert.ok(true);
+                        return Promise.resolve([{event_ok: false}]);
+                    }
+                    return this._super.apply(this, arguments);
+                },
+                intercepts: {
+                    do_action: function (ev) {
+                        if (ev.data.action === 'event_sale.event_configurator_action') {
+                            assert.ok(false, "Should not execute the configure action");
+                        }
+                    },
+                }
+            });
+
+            await testUtils.dom.click(form.$("a:contains('Add a product')"));
+            await testUtils.fields.many2one.searchAndClickItem("product_id", {item: 'Desk'})
+            form.destroy();
+        });
+
+        QUnit.test('Select a configurable event and verify that the event configurator is opened', async function (assert) {
+            assert.expect(2);
+
+            var form = await createView({
+                View: FormView,
+                model: 'sale_order',
+                data: this.data,
+                arch: getArch(),
+                mockRPC: function (route, params) {
+                    if (params.method === 'read') {
+                        assert.ok(true);
+                        return Promise.resolve([{event_ok: true}]);
+                    }
+                    return this._super.apply(this, arguments);
+                },
+                intercepts: {
+                    do_action: function (ev) {
+                        if (ev.data.action === 'event_sale.event_configurator_action') {
+                            assert.ok(true);
+                        }
+                    },
+                }
+            });
+
+            await testUtils.dom.click(form.$("a:contains('Add a product')"));
+            await testUtils.fields.many2one.searchAndClickItem("product_id", {item: 'Customizable Event'})
+            form.destroy();
+        });
+    });
+});
diff --git a/addons/event_sale/tests/__init__.py b/addons/event_sale/tests/__init__.py
index c755c1872ae2a..c023d41b5dd71 100644
--- a/addons/event_sale/tests/__init__.py
+++ b/addons/event_sale/tests/__init__.py
@@ -1 +1,2 @@
 from . import test_event_sale
+from . import test_event_sale_ui
diff --git a/addons/event_sale/tests/test_event_sale_ui.py b/addons/event_sale/tests/test_event_sale_ui.py
new file mode 100644
index 0000000000000..44e876922c4e3
--- /dev/null
+++ b/addons/event_sale/tests/test_event_sale_ui.py
@@ -0,0 +1,8 @@
+import odoo.tests
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+
+@odoo.tests.tagged('post_install', '-at_install')
+class TestUi(odoo.tests.HttpCase):
+    def test_01_event_configurator(self):
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('event_configurator_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.event_configurator_tour.ready", login="admin")
diff --git a/addons/event_sale/views/assets.xml b/addons/event_sale/views/assets.xml
new file mode 100644
index 0000000000000..beb33301b89b7
--- /dev/null
+++ b/addons/event_sale/views/assets.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<template id="assets_backend" inherit_id="web.assets_backend" name="event_sale assets backend">
+    <xpath expr="link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/event_sale/static/src/scss/event_configurator_widget.scss"/>
+    </xpath>
+    <xpath expr="script[last()]" position="after">
+        <script type="text/javascript" src="/event_sale/static/src/js/event_configurator_controller.js"></script>
+        <script type="text/javascript" src="/event_sale/static/src/js/event_configurator_view.js"></script>
+        <script type="text/javascript" src="/event_sale/static/src/js/event_configurator_widget_mixin.js"></script>
+        <script type="text/javascript" src="/event_sale/static/src/js/event_configurator_widget.js"></script>
+        <script type="text/javascript" src="/event_sale/static/src/js/event_configurator_test_ui.js"></script>
+    </xpath>
+</template>
+<template id="qunit_suite" inherit_id="web.qunit_suite" name="event_sale_tests">
+    <xpath expr="//t[@t-set='head']" position="inside">
+        <script type="text/javascript" src="/event_sale/static/tests/event_configurator.test.js"></script>
+    </xpath>
+</template>
+</odoo>
diff --git a/addons/event_sale/views/event_views_template.xml b/addons/event_sale/views/event_views_template.xml
deleted file mode 100644
index ae3ffef975230..0000000000000
--- a/addons/event_sale/views/event_views_template.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <template id="assets_backend_inherit_event_sale" inherit_id="web.assets_backend" name="Event sale backend assets">
-        <xpath expr="script[last()]" position="after">
-            <script type="text/javascript" src="/event_sale/static/src/js/tour.js"></script>
-        </xpath>
-    </template>
-</odoo>
diff --git a/addons/event_sale/views/sale_order_views.xml b/addons/event_sale/views/sale_order_views.xml
index 8c2ad0d52cb74..a13776072f312 100644
--- a/addons/event_sale/views/sale_order_views.xml
+++ b/addons/event_sale/views/sale_order_views.xml
@@ -1,51 +1,44 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-        <record id="view_sale_order_form_inherit_event" model="ir.ui.view">
-             <field name="name">sale.order.form.inherit</field>
-             <field name="model">sale.order</field>
-             <field name="inherit_id" ref="sale.view_order_form" />
-             <field name="arch" type="xml">
-                <xpath expr="//field[@name='order_line']//form//field[@name='product_id']" position="after">
-                    <field
-                        name="event_id"
-                        domain="[
-                            ('event_ticket_ids.product_id','=', product_id),
-                            ('date_end','&gt;=',time.strftime('%Y-%m-%d 00:00:00'))
-                        ]"
-                        attrs="{'invisible': [('event_ok', '=', False)], 'required': [('event_ok', '!=', False)]}"
-                        options="{'no_open': True, 'no_create': True}"
-                    />
-                    <field
-                        name="event_ticket_id"
-                        domain="[
-                            ('event_id', '=', event_id),
-                            ('product_id','=',product_id),
-                            '|', ('seats_availability', '=', 'unlimited'), ('seats_available', '>', 0)
-                        ]"
-                        attrs="{
-                            'invisible': ['|', ('event_ok', '=', False), ('event_id', '=', False)],
-                            'required': [('event_ok', '!=', False), ('event_id', '!=', False)],
-                        }"
-                        options="{'no_open': True, 'no_create': True}"
-                    />
-                    <field name="event_ok" invisible="1"/>
-                </xpath>
-                <xpath expr="//field[@name='order_line']//tree//field[@name='product_id']" position="after">
-                    <field name="event_ok" invisible="1"/>
-                </xpath>
-             </field>
-        </record>
-
-        <!-- the presence of 'event user' makes the order lines non-editable -->
-        <record id="view_order_form_inherit_event_sale_group_event_user" model="ir.ui.view">
-            <field name="name">sale.order.form.inherit.event_sale.group_event_user</field>
-            <field name="model">sale.order</field>
-            <field name="inherit_id" ref="sale.view_order_form"/>
-            <field name="groups_id" eval="[(4, ref('event.group_event_user'))]"/>
-            <field name="arch" type="xml">
-                <xpath expr="//field[@name='order_line']/tree" position="attributes">
-                    <attribute name="editable"/>
-                </xpath>
-            </field>
-        </record>
+    <record id="sale_order_view_form" model="ir.ui.view">
+        <field name="name">sale.order.form.inherit.event.sale</field>
+        <field name="model">sale.order</field>
+        <field name="inherit_id" ref="sale.view_order_form" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='order_line']//form//field[@name='product_id']" position="after">
+                <field
+                    name="event_id"
+                    domain="[
+                        ('event_ticket_ids.product_id','=', product_id),
+                        ('date_end','&gt;=',time.strftime('%Y-%m-%d 00:00:00'))
+                    ]"
+                    attrs="{'invisible': [('event_ok', '=', False)], 'required': [('event_ok', '!=', False)]}"
+                    options="{'no_open': True, 'no_create': True}"
+                />
+                <field
+                    name="event_ticket_id"
+                    domain="[
+                        ('event_id', '=', event_id),
+                        ('product_id','=',product_id),
+                        '|', ('seats_availability', '=', 'unlimited'), ('seats_available', '>', 0)
+                    ]"
+                    attrs="{
+                        'invisible': ['|', ('event_ok', '=', False), ('event_id', '=', False)],
+                        'required': [('event_ok', '!=', False), ('event_id', '!=', False)],
+                    }"
+                    options="{'no_open': True, 'no_create': True}"
+                />
+                <field name="event_ok" invisible="1"/>
+            </xpath>
+            <xpath expr="//field[@name='order_line']//tree//field[@name='product_id']" position="attributes">
+                <attribute name="widget">event_configurator</attribute>
+                <attribute name="options">{'no_open': True}</attribute>
+            </xpath>
+            <xpath expr="//field[@name='order_line']//tree//field[@name='product_id']" position="after">
+                <field name="event_ok" invisible="1" />
+                <field name="event_id" invisible="1" />
+                <field name="event_ticket_id" invisible="1" />
+            </xpath>
+        </field>
+    </record>
 </odoo>
diff --git a/addons/event_sale/wizard/__init__.py b/addons/event_sale/wizard/__init__.py
index 7be8d4012f9cc..b2eda10be3963 100644
--- a/addons/event_sale/wizard/__init__.py
+++ b/addons/event_sale/wizard/__init__.py
@@ -1 +1,2 @@
 from . import event_edit_registration
+from . import event_configurator
diff --git a/addons/event_sale/wizard/event_configurator.py b/addons/event_sale/wizard/event_configurator.py
new file mode 100644
index 0000000000000..97fbe6523e3ff
--- /dev/null
+++ b/addons/event_sale/wizard/event_configurator.py
@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import models, fields
+
+
+class EventConfigurator(models.TransientModel):
+    _name = 'event.event.configurator'
+    _description = 'Event Configurator'
+
+    product_id = fields.Many2one('product.product', string="Product", readonly=True)
+    event_id = fields.Many2one('event.event', string="Event")
+    event_ticket_id = fields.Many2one('event.event.ticket', string="Event Ticket")
diff --git a/addons/event_sale/wizard/event_configurator_views.xml b/addons/event_sale/wizard/event_configurator_views.xml
new file mode 100644
index 0000000000000..4d92e8497074b
--- /dev/null
+++ b/addons/event_sale/wizard/event_configurator_views.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="event_configurator_view_form" model="ir.ui.view">
+        <field name="name">event.configurator.view.form</field>
+        <field name="model">event.event.configurator</field>
+        <field name="arch" type="xml">
+            <form js_class="event_configurator_form">
+                <group>
+                    <field
+                        name="event_id"
+                        domain="[
+                            ('event_ticket_ids.product_id','=', product_id),
+                            ('date_end','&gt;=',time.strftime('%Y-%m-%d 00:00:00'))
+                        ]"
+                        required="1"
+                        options="{'no_open': True, 'no_create': True}"
+                    />
+                    <field
+                        name="event_ticket_id"
+                        domain="[
+                            ('event_id', '=', event_id),
+                            ('product_id','=',product_id),
+                            '|', ('seats_availability', '=', 'unlimited'), ('seats_available', '>', 0)
+                        ]"
+                        attrs="{
+                            'invisible': [('event_id', '=', False)],
+                            'required': [('event_id', '!=', False)],
+                        }"
+                        options="{'no_open': True, 'no_create': True}"
+                    />
+                    <field name="product_id" invisible="1"/>
+                </group>
+                <footer>
+                    <button string="Ok" class="btn-primary o_event_sale_js_event_configurator_ok"/>
+                    <button string="Cancel" class="btn-secondary" special="cancel"/>
+                </footer>
+            </form>
+        </field>
+    </record>
+
+    <record id="event_configurator_action" model="ir.actions.act_window">
+        <field name="name">Configure an event</field>
+        <field name="res_model">event.event.configurator</field>
+        <field name="view_mode">form</field>
+        <field name="target">new</field>
+        <field name="view_id" ref="event_configurator_view_form"/>
+    </record>
+</odoo>
diff --git a/addons/event_sale_product_configurator/__init__.py b/addons/event_sale_product_configurator/__init__.py
new file mode 100644
index 0000000000000..40a96afc6ff09
--- /dev/null
+++ b/addons/event_sale_product_configurator/__init__.py
@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-
diff --git a/addons/event_sale_product_configurator/__manifest__.py b/addons/event_sale_product_configurator/__manifest__.py
new file mode 100644
index 0000000000000..261253ca5aa3c
--- /dev/null
+++ b/addons/event_sale_product_configurator/__manifest__.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+{
+    'name': "Event Sale Product Configurator",
+    'version': '1.0',
+    'category': 'Hidden',
+    'summary': "Bridge module between event_sale and sale_product_configurator",
+
+    'description': """
+        Technical bridge module installed to make the event_configurator work on the product_template_id field
+        added by the product configurator.
+    """,
+
+    'depends': ['sale_product_configurator', 'event_sale'],
+    'data': [
+        'views/assets.xml',
+    ],
+    'auto_install': True
+}
diff --git a/addons/event_sale_product_configurator/static/src/js/event_configurator_test_ui.js b/addons/event_sale_product_configurator/static/src/js/event_configurator_test_ui.js
new file mode 100644
index 0000000000000..95ab79deaa30d
--- /dev/null
+++ b/addons/event_sale_product_configurator/static/src/js/event_configurator_test_ui.js
@@ -0,0 +1,27 @@
+odoo.define("event_sale_product_configurator.event_configurator_tour", function (require) {
+"use strict";
+/**
+ * We need to replace the trigger of the product selection step because the
+ * "sale_product_configurator" module replaces the "product_id" field with
+ * a "product_template_id" field.
+ */
+var tour = require('web_tour.tour');
+require('event.event_configurator_tour');
+
+var productSelectionStepIndex = _.findIndex(tour.tours.event_configurator_tour.steps, function (step) {
+    return (step.id === 'product_selection_step');
+});
+
+var productSelectionStep = tour.tours.event_configurator_tour.steps[productSelectionStepIndex];
+productSelectionStep.trigger = 'div[name="product_template_id"] input';
+productSelectionStep.run = function (){
+    var $input = $('div[name="product_template_id"] input');
+    $input.click();
+    $input.val('EVENT');
+    // fake keydown to trigger search
+    var keyDownEvent = jQuery.Event("keydown");
+    keyDownEvent.which = 42;
+    $input.trigger(keyDownEvent);
+};
+
+});
diff --git a/addons/event_sale_product_configurator/static/src/js/product_configurator_widget.js b/addons/event_sale_product_configurator/static/src/js/product_configurator_widget.js
new file mode 100644
index 0000000000000..a023de331cf86
--- /dev/null
+++ b/addons/event_sale_product_configurator/static/src/js/product_configurator_widget.js
@@ -0,0 +1,43 @@
+odoo.define('event_sale.event_sale_product_configurator', function (require) {
+
+var relationalFields = require('web.relational_fields');
+var ProductConfiguratorWidget = require('sale_product_configurator.product_configurator');
+var EventConfiguratorWidgetMixin = require('event_sale.EventConfiguratorWidgetMixin');
+
+/**
+ * The ProductConfiguratorWidget is overridden to add the features of the EventConfiguratorWidget.
+ */
+var productConfiguratorEvents = ProductConfiguratorWidget.prototype.events;
+ProductConfiguratorWidget.include(EventConfiguratorWidgetMixin);
+
+ProductConfiguratorWidget.include({
+    events: _.extend({},
+        relationalFields.FieldMany2One.prototype.events,
+        productConfiguratorEvents,
+        EventConfiguratorWidgetMixin.events
+    ),
+
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            self._addEventConfigurationEditButton();
+        });
+    },
+
+    /**
+     * @param {integer} productId
+     * @param {string} dataPointID
+     *
+     * @private
+     */
+    _onSimpleProductFound: function (productId, dataPointID) {
+        this._checkForEvent(productId, dataPointID);
+    }
+});
+
+return ProductConfiguratorWidget;
+
+});
diff --git a/addons/event_sale_product_configurator/views/assets.xml b/addons/event_sale_product_configurator/views/assets.xml
new file mode 100644
index 0000000000000..854c674206fc3
--- /dev/null
+++ b/addons/event_sale_product_configurator/views/assets.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="assets_backend" inherit_id="web.assets_backend" name="event_sale_product_configurator assets backend">
+        <xpath expr="script[last()]" position="after">
+            <script type="text/javascript" src="/event_sale_product_configurator/static/src/js/event_configurator_test_ui.js"></script>
+            <script type="text/javascript" src="/event_sale_product_configurator/static/src/js/product_configurator_widget.js"></script>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/product/models/product_template.py b/addons/product/models/product_template.py
index 4ca5dee43a928..35cc2d39837cc 100644
--- a/addons/product/models/product_template.py
+++ b/addons/product/models/product_template.py
@@ -677,29 +677,15 @@ def _get_possible_variants(self, parent_combination=None):
         return self.product_variant_ids.filtered(lambda p: p._is_variant_possible(parent_combination))
 
     @api.multi
-    def get_filtered_variants(self, reference_product=None):
-        """deprecated, use _get_possible_variants instead"""
-        self.ensure_one()
-
-        parent_combination = self.env['product.template.attribute.value']
-
-        if reference_product:
-            # append the reference_product if provided
-            parent_combination |= reference_product.product_template_attribute_value_ids
-            if reference_product.env.context.get('no_variant_attribute_values'):
-                # Add "no_variant" attribute values' exclusions
-                # They are kept in the context since they are not linked to this product variant
-                parent_combination |= reference_product.env.context.get('no_variant_attribute_values')
-        return self._get_possible_variants(parent_combination)
-
-    @api.multi
-    def _get_attribute_exclusions(self, parent_combination=None):
+    def _get_attribute_exclusions(self, parent_combination=None, parent_name=None):
         """Return the list of attribute exclusions of a product.
 
         :param parent_combination: the combination from which
             `self` is an optional or accessory product. Indeed exclusions
             rules on one product can concern another product.
         :type parent_combination: recordset `product.template.attribute.value`
+        :param parent_name: the name of the parent product combination.
+        :type parent_name: str
 
         :return: dict of exclusions
             - exclusions: from this product itself
@@ -711,23 +697,47 @@ def _get_attribute_exclusions(self, parent_combination=None):
             - has_dynamic_attributes: whether there is a dynamic attribute
             - no_variant_product_template_attribute_value_ids: values that are
                 no_variant
+           - parent_product_name: the name of the parent product if any, used in the interface
+               to explain why some combinations are not available.
+               (e.g: Not available with Customizable Desk (Legs: Steel))
+           - mapped_attribute_names: the name of every attribute values based on their id,
+               used to explain in the interface why that combination is not available
+               (e.g: Not available with Color: Black)
         """
         self.ensure_one()
         return {
-            'exclusions': self._get_own_attribute_exclusions(),
+            'exclusions': self._complete_inverse_exclusions(self._get_own_attribute_exclusions()),
             'parent_exclusions': self._get_parent_attribute_exclusions(parent_combination),
             'archived_combinations': self._get_archived_combinations(),
             'has_dynamic_attributes': self.has_dynamic_attributes(),
             'existing_combinations': self._get_existing_combinations(),
             'no_variant_product_template_attribute_value_ids': self._get_no_variant_product_template_attribute_values(),
+            'parent_product_name': parent_name,
+            'mapped_attribute_names': self._get_mapped_attribute_names(parent_combination),
         }
 
+    @api.model
+    def _complete_inverse_exclusions(self, exclusions):
+        """Will complete the dictionnary of exclusions with their respective inverse
+        e.g: Black excludes XL and L
+        -> XL excludes Black
+        -> L excludes Black"""
+        result = dict(exclusions)
+        for key, value in exclusions.items():
+            for exclusion in value:
+                if exclusion in result and key not in result[exclusion]:
+                    result[exclusion].append(key)
+                else:
+                    result[exclusion] = [key]
+
+        return result
+
     @api.multi
     def _get_own_attribute_exclusions(self):
         """Get exclusions coming from the current template.
 
-        Dictionnary, each ptav is a key, and for each of them the value is
-        an array with the other ptav that they exclude (empty if no exclusion).
+        Dictionnary, each product template attribute value is a key, and for each of them
+        the value is an array with the other ptav that they exclude (empty if no exclusion).
         """
         self.ensure_one()
         product_template_attribute_values = self._get_valid_product_template_attribute_lines().mapped('product_template_value_ids')
@@ -745,44 +755,40 @@ def _get_own_attribute_exclusions(self):
     def _get_parent_attribute_exclusions(self, parent_combination):
         """Get exclusions coming from the parent combination.
 
-        Array, each element is a ptav that is excluded because of the parent.
+        Dictionnary, each parent's ptav is a key, and for each of them the value is
+        an array with the other ptav that are excluded because of the parent.
         """
         self.ensure_one()
         if not parent_combination:
-            return []
+            return {}
 
-        # Search for exclusions without attribute value. This means that the template is not
-        # compatible with the parent combination. If such an exclusion is found, it means that all
-        # attribute values are excluded.
-        if parent_combination:
-            exclusions = self.env['product.template.attribute.exclusion'].search([
-                ('product_tmpl_id', '=', self.id),
-                ('value_ids', '=', False),
-                ('product_template_attribute_value_id', 'in', parent_combination.ids),
-            ], limit=1)
-            if exclusions:
-                return self.mapped('attribute_line_ids.product_template_value_ids').ids
-
-        return [
-            value_id
-            for filter_line in parent_combination.mapped('exclude_for').filtered(
+        result = {}
+        for product_attribute_value in parent_combination:
+            for filter_line in product_attribute_value.exclude_for.filtered(
                 lambda filter_line: filter_line.product_tmpl_id == self
-            ) for value_id in filter_line.value_ids.ids
-        ]
+            ):
+                # Some exclusions don't have attribute value. This means that the template is not
+                # compatible with the parent combination. If such an exclusion is found, it means that all
+                # attribute values are excluded.
+                if filter_line.value_ids:
+                    result[product_attribute_value.id] = filter_line.value_ids.ids
+                else:
+                    result[product_attribute_value.id] = filter_line.product_tmpl_id.mapped('attribute_line_ids.product_template_value_ids').ids
+
+        return result
 
     @api.multi
     def _get_archived_combinations(self):
-        self.ensure_one()
         """Get archived combinations.
 
         Array, each element is an array with ids of an archived combination.
         """
+        self.ensure_one()
         return [archived_variant.product_template_attribute_value_ids.ids
             for archived_variant in self.valid_archived_variant_ids]
 
     @api.multi
     def _get_existing_combinations(self):
-        self.ensure_one()
         """Get existing combinations.
 
         Needed because when not using dynamic attributes, the combination is
@@ -790,6 +796,7 @@ def _get_existing_combinations(self):
 
         Array, each element is an array with ids of an existing combination.
         """
+        self.ensure_one()
         return [variant.product_template_attribute_value_ids.ids
             for variant in self.valid_existing_variant_ids]
 
@@ -801,6 +808,25 @@ def _get_no_variant_product_template_attribute_values(self):
             lambda v: v.attribute_id.create_variant == 'no_variant'
         ).ids
 
+    @api.multi
+    def _get_mapped_attribute_names(self, parent_combination=None):
+        """ The name of every attribute values based on their id,
+        used to explain in the interface why that combination is not available
+        (e.g: Not available with Color: Black).
+
+        It contains both attribute value names from this product and from
+        the parent combination if provided.
+        """
+        self.ensure_one()
+        all_product_attribute_values = self._get_valid_product_template_attribute_lines().mapped('product_template_value_ids')
+        if parent_combination:
+            all_product_attribute_values |= parent_combination
+
+        return {
+            attribute_value.id: attribute_value.display_name
+            for attribute_value in all_product_attribute_values
+        }
+
     @api.multi
     def _is_combination_possible(self, combination, parent_combination=None):
         """
@@ -855,9 +881,12 @@ def _is_combination_possible(self, combination, parent_combination=None):
 
         parent_exclusions = self._get_parent_attribute_exclusions(parent_combination)
         if parent_exclusions:
-            for exclusion in parent_exclusions:
-                if exclusion in combination.ids:
-                    return False
+            # parent_exclusion are mapped by ptav but here we don't need to know
+            # where the exclusion comes from so we loop directly on the dict values
+            for exclusions_values in parent_exclusions.values():
+                for exclusion in exclusions_values:
+                    if exclusion in combination.ids:
+                        return False
 
         filtered_combination = combination._without_no_variant_attributes()
         archived_combinations = self._get_archived_combinations()
diff --git a/addons/product/models/res_config_settings.py b/addons/product/models/res_config_settings.py
index 7e73f4df5e690..03fb56aa1f751 100644
--- a/addons/product/models/res_config_settings.py
+++ b/addons/product/models/res_config_settings.py
@@ -13,7 +13,8 @@ class ResConfigSettings(models.TransientModel):
              " * Checked : Product are visible for every company, even if a company is defined on the partner.\n"
              " * Unchecked : Each company can see only its product (product where company is defined). Product not related to a company are visible for all companies.")
     group_uom = fields.Boolean("Units of Measure", implied_group='uom.group_uom')
-    group_product_variant = fields.Boolean("Variants and Options", implied_group='product.group_product_variant')
+    group_product_variant = fields.Boolean("Variants", implied_group='product.group_product_variant')
+    module_sale_product_configurator = fields.Boolean("Product Configurator")
     group_stock_packaging = fields.Boolean('Product Packagings',
         implied_group='product.group_stock_packaging')
     group_sale_pricelist = fields.Boolean("Use pricelists to adapt your price per customers",
@@ -33,6 +34,19 @@ class ResConfigSettings(models.TransientModel):
         ('1', 'Cubic Feet'),
     ], 'Volume unit of measure', config_parameter='product.volume_in_cubic_feet', default='0')
 
+    @api.onchange('group_product_variant')
+    def _onchange_group_product_variant(self):
+        """The product Configurator requires the product variants activated.
+        If the user disables the product variants -> disable the product configurator as well"""
+        if self.module_sale_product_configurator and not self.group_product_variant:
+            self.module_sale_product_configurator = False
+
+    @api.onchange('module_sale_product_configurator')
+    def _onchange_module_sale_product_configurator(self):
+        """The product Configurator requires the product variants activated
+        If the user enables the product configurator -> enable the product variants as well"""
+        if self.module_sale_product_configurator and not self.group_product_variant:
+            self.group_product_variant = True
 
     @api.model
     def get_values(self):
diff --git a/addons/sale/__manifest__.py b/addons/sale/__manifest__.py
index 741d357c90095..c275df0ac9b5c 100644
--- a/addons/sale/__manifest__.py
+++ b/addons/sale/__manifest__.py
@@ -27,13 +27,12 @@
         'views/res_partner_views.xml',
         'views/mail_activity_views.xml',
         'views/assets.xml',
+        'views/variant_templates.xml',
         'views/sale_portal_templates.xml',
-        'views/sale_product_configurator_templates.xml',
         'views/sale_onboarding_views.xml',
         'views/res_config_settings_views.xml',
         'views/payment_views.xml',
         'views/product_attribute_views.xml',
-        'wizard/sale_product_configurator_views.xml',
     ],
     'demo': [
         'data/sale_demo.xml',
diff --git a/addons/sale/controllers/__init__.py b/addons/sale/controllers/__init__.py
index ac5f1269f8282..a35a880227cf2 100644
--- a/addons/sale/controllers/__init__.py
+++ b/addons/sale/controllers/__init__.py
@@ -3,4 +3,4 @@
 
 from . import onboarding
 from . import portal
-from . import product_configurator
+from . import variant
diff --git a/addons/sale/controllers/product_configurator.py b/addons/sale/controllers/product_configurator.py
deleted file mode 100644
index eea3dfe67fd43..0000000000000
--- a/addons/sale/controllers/product_configurator.py
+++ /dev/null
@@ -1,147 +0,0 @@
-# -*- coding: utf-8 -*-
-# Part of Odoo. See LICENSE file for full copyright and licensing details.
-
-from odoo import http, fields
-from odoo.http import request
-
-
-class ProductConfiguratorController(http.Controller):
-    @http.route(['/product_configurator/configure'], type='json', auth="user", methods=['POST'])
-    def configure(self, product_id, pricelist_id, **kw):
-        add_qty = int(kw.get('add_qty', 1))
-        product_template = request.env['product.template'].browse(int(product_id))
-        to_currency = product_template.currency_id
-        pricelist = self._get_pricelist(pricelist_id)
-
-        if pricelist:
-            product_template = product_template.with_context(pricelist=pricelist.id, partner=request.env.user.partner_id)
-            to_currency = pricelist.currency_id
-
-        return request.env['ir.ui.view'].render_template("sale.product_configurator_configure", {
-            'product': product_template,
-            # to_currency deprecated, get it from the pricelist or product directly
-            'to_currency': to_currency,
-            'pricelist': pricelist,
-            'add_qty': add_qty,
-            # get_attribute_exclusions deprecated, use product method
-            'get_attribute_exclusions': self._get_attribute_exclusions
-        })
-
-    @http.route(['/product_configurator/show_optional_products'], type='json', auth="user", methods=['POST'])
-    def show_optional_products(self, product_id, variant_values, pricelist_id, **kw):
-        pricelist = self._get_pricelist(pricelist_id)
-        return self._show_optional_products(product_id, variant_values, pricelist, False, **kw)
-
-    @http.route(['/product_configurator/optional_product_items'], type='json', auth="user", methods=['POST'])
-    def optional_product_items(self, product_id, pricelist_id, **kw):
-        pricelist = self._get_pricelist(pricelist_id)
-        return self._optional_product_items(product_id, pricelist, **kw)
-
-    @http.route(['/product_configurator/get_combination_info'], type='json', auth="user", methods=['POST'])
-    def get_combination_info(self, product_template_id, product_id, combination, add_qty, pricelist_id, **kw):
-        combination = request.env['product.template.attribute.value'].browse(combination)
-        pricelist = self._get_pricelist(pricelist_id)
-        ProductTemplate = request.env['product.template']
-        if 'context' in kw:
-            ProductTemplate = ProductTemplate.with_context(**kw.get('context'))
-        return ProductTemplate.browse(int(product_template_id))._get_combination_info(combination, int(product_id or 0), int(add_qty or 1), pricelist)
-
-    @http.route(['/product_configurator/create_product_variant'], type='json', auth="user", methods=['POST'])
-    def create_product_variant(self, product_template_id, product_template_attribute_value_ids, **kwargs):
-        return request.env['product.template'].browse(int(product_template_id)).create_product_variant(product_template_attribute_value_ids)
-
-    def _optional_product_items(self, product_id, pricelist, **kw):
-        add_qty = int(kw.get('add_qty', 1))
-        product = request.env['product.product'].with_context(self._get_product_context(pricelist, **kw)).browse(int(product_id))
-        to_currency = product.currency_id
-
-        if pricelist:
-            to_currency = pricelist.currency_id
-
-        parent_combination = product.product_template_attribute_value_ids
-        if product.env.context.get('no_variant_attribute_values'):
-            # Add "no_variant" attribute values' exclusions
-            # They are kept in the context since they are not linked to this product variant
-            parent_combination |= product.env.context.get('no_variant_attribute_values')
-
-        return request.env['ir.ui.view'].render_template("sale.optional_product_items", {
-            # product deprecated, it's not used in the view
-            'product': product,
-            # reference_product deprecated, use parent_combination instead
-            'reference_product': product,
-            'parent_combination': parent_combination,
-            'pricelist': pricelist,
-            # to_currency deprecated, get from pricelist or product
-            'to_currency': to_currency,
-            # get_attribute_exclusions deprecated, use product method
-            'get_attribute_exclusions': self._get_attribute_exclusions,
-            'add_qty': add_qty,
-        })
-
-    def _show_optional_products(self, product_id, variant_values, pricelist, handle_stock, **kw):
-        product = request.env['product.product'].with_context(self._get_product_context(pricelist, **kw)).browse(int(product_id))
-        combination = request.env['product.template.attribute.value'].browse(variant_values)
-        has_optional_products = product.optional_product_ids.filtered(lambda p: p._is_add_to_cart_possible(combination))
-
-        if not has_optional_products:
-            return False
-
-        add_qty = int(kw.get('add_qty', 1))
-        to_currency = (pricelist or product).currency_id
-        company = request.env['res.company'].browse(request.env.context.get('company_id')) or request.env['res.users']._get_company()
-        date = request.env.context.get('date') or fields.Date.today()
-
-        def compute_currency(price):
-            return product.currency_id._convert(price, to_currency, company, date)
-
-        no_variant_attribute_values = combination.filtered(
-            lambda product_template_attribute_value: product_template_attribute_value.attribute_id.create_variant == 'no_variant'
-        )
-        if no_variant_attribute_values:
-            product = product.with_context(no_variant_attribute_values=no_variant_attribute_values)
-
-        return request.env['ir.ui.view'].render_template("sale.optional_products_modal", {
-            'product': product,
-            'combination': combination,
-            'add_qty': add_qty,
-            # reference_product deprecated, use combination instead
-            'reference_product': product,
-            'variant_values': variant_values,
-            'pricelist': pricelist,
-            # compute_currency deprecated, get from pricelist or product
-            'compute_currency': compute_currency,
-            # to_currency deprecated, get from pricelist or product
-            'to_currency': to_currency,
-            'handle_stock': handle_stock,
-            # get_attribute_exclusions deprecated, use product method
-            'get_attribute_exclusions': self._get_attribute_exclusions,
-        })
-
-    def _get_attribute_exclusions(self, product, reference_product=None):
-        """deprecated, use product method"""
-        parent_combination = request.env['product.template.attribute.value']
-        if reference_product:
-            parent_combination |= reference_product.product_template_attribute_value_ids
-            if reference_product.env.context.get('no_variant_attribute_values'):
-                # Add "no_variant" attribute values' exclusions
-                # They are kept in the context since they are not linked to this product variant
-                parent_combination |= reference_product.env.context.get('no_variant_attribute_values')
-        return product._get_attribute_exclusions(parent_combination)
-
-    def _get_product_context(self, pricelist=None, **kw):
-        """deprecated, can be removed in master"""
-        product_context = dict(request.context)
-        if pricelist:
-            if not product_context.get('pricelist'):
-                product_context['pricelist'] = pricelist.id
-            product_context.update(kw.get('kwargs', {}).get('context', {}))
-
-        return product_context
-
-    def _get_combination_info(self, product_template_id, product_id, combination, add_qty, pricelist, **kw):
-        """deprecated, use product method"""
-        combination = request.env['product.template.attribute.value'].browse(combination)
-        return request.env['product.template'].browse(product_template_id)._get_combination_info(combination, product_id, add_qty, pricelist)
-
-    def _get_pricelist(self, pricelist_id, pricelist_fallback=False):
-        return request.env['product.pricelist'].browse(int(pricelist_id or 0))
diff --git a/addons/sale/controllers/variant.py b/addons/sale/controllers/variant.py
new file mode 100644
index 0000000000000..7a4ee7ea7c34a
--- /dev/null
+++ b/addons/sale/controllers/variant.py
@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import http
+from odoo.http import request
+
+
+class VariantController(http.Controller):
+    @http.route(['/sale/get_combination_info'], type='json', auth="user", methods=['POST'])
+    def get_combination_info(self, product_template_id, product_id, combination, add_qty, pricelist_id, **kw):
+        combination = request.env['product.template.attribute.value'].browse(combination)
+        pricelist = self._get_pricelist(pricelist_id)
+        ProductTemplate = request.env['product.template']
+        if 'context' in kw:
+            ProductTemplate = ProductTemplate.with_context(**kw.get('context'))
+        return ProductTemplate.browse(int(product_template_id))._get_combination_info(combination, int(product_id or 0), int(add_qty or 1), pricelist)
+
+    @http.route(['/sale/create_product_variant'], type='json', auth="user", methods=['POST'])
+    def create_product_variant(self, product_template_id, product_template_attribute_value_ids, **kwargs):
+        return request.env['product.template'].browse(int(product_template_id)).create_product_variant(product_template_attribute_value_ids)
+
+    def _get_pricelist(self, pricelist_id, pricelist_fallback=False):
+        return request.env['product.pricelist'].browse(int(pricelist_id or 0))
diff --git a/addons/sale/data/sale_demo.xml b/addons/sale/data/sale_demo.xml
index d0ccf291effd2..d83063b9158d8 100644
--- a/addons/sale/data/sale_demo.xml
+++ b/addons/sale/data/sale_demo.xml
@@ -730,23 +730,6 @@ Thanks!</field>
             <field name="confirmation_date" eval="datetime.now() - relativedelta(months=1)"/>
         </record>
 
-        <record id="product_product_1_product_template" model="product.template">
-            <field name="name">Chair floor protection</field>
-            <field name="categ_id" ref="product.product_category_5"/>
-            <field name="list_price">12.0</field>
-            <field name="weight">0.01</field>
-            <field name="uom_id" ref="uom.product_uom_unit"/>
-            <field name="uom_po_id" ref="uom.product_uom_unit"/>
-            <field name="description_sale">Office chairs can harm your floor: protect it.</field>
-            <field name="image" type="base64" file="sale/static/img/floor_protection-image.png"/>
-        </record>
-        <record id="product.product_product_4_product_template" model="product.template">
-            <field name="optional_product_ids" eval="[(6,0,[ref('product.product_product_11_product_template')])]"/>
-        </record>
-        <record id="product.product_product_11_product_template" model="product.template">
-            <field name="optional_product_ids" eval="[(6,0,[ref('product_product_1_product_template')])]"/>
-        </record>
-
         <record id="product_attribute_value_7" model="product.attribute.value">
             <field name="name">Custom</field>
             <field name="attribute_id" ref="product.product_attribute_1"/>
diff --git a/addons/sale/models/product_product.py b/addons/sale/models/product_product.py
index a489b03b95258..635e89820e6e3 100644
--- a/addons/sale/models/product_product.py
+++ b/addons/sale/models/product_product.py
@@ -5,16 +5,6 @@
 from odoo.tools.float_utils import float_round
 
 
-class ProductTemplate(models.Model):
-    _inherit = "product.template"
-
-    optional_product_ids = fields.Many2many(
-        'product.template', 'product_optional_rel', 'src_id', 'dest_id',
-        string='Optional Products', help="Optional Products are suggested "
-        "whenever the customer hits *Add to Cart* (cross-sell strategy, "
-        "e.g. for computers: warranty, software, etc.).")
-
-
 class ProductProduct(models.Model):
     _inherit = 'product.product'
 
@@ -98,6 +88,6 @@ class ProductAttributeCustomValue(models.Model):
     _rec_name = 'custom_value'
     _description = 'Product Attribute Custom Value'
 
-    attribute_value_id = fields.Many2one('product.attribute.value', string='Attribute')
+    attribute_value_id = fields.Many2one('product.attribute.value', string='Attribute Value')
     sale_order_line_id = fields.Many2one('sale.order.line', string='Sale order line')
     custom_value = fields.Char('Custom value')
diff --git a/addons/sale/models/product_template.py b/addons/sale/models/product_template.py
index 3ce86eab87671..55943f3ac1380 100644
--- a/addons/sale/models/product_template.py
+++ b/addons/sale/models/product_template.py
@@ -223,6 +223,7 @@ def _get_combination_info(self, combination=False, product_id=False, add_qty=1,
         # get the name before the change of context to benefit from prefetch
         display_name = self.name
 
+        display_image = True
         quantity = self.env.context.get('quantity', add_qty)
         context = dict(self.env.context, quantity=quantity, pricelist=pricelist.id if pricelist else False)
         product_template = self.with_context(context)
@@ -257,6 +258,7 @@ def _get_combination_info(self, combination=False, product_id=False, add_qty=1,
                 )
             list_price = product.price_compute('list_price')[product.id]
             price = product.price if pricelist else list_price
+            display_image = bool(product.image)
         else:
             product_template = product_template.with_context(current_attributes_price_extra=[v.price_extra or 0.0 for v in combination])
             list_price = product_template.price_compute('list_price')[product_template.id]
@@ -279,6 +281,7 @@ def _get_combination_info(self, combination=False, product_id=False, add_qty=1,
             'product_id': product.id,
             'product_template_id': product_template.id,
             'display_name': display_name,
+            'display_image': display_image,
             'price': price,
             'list_price': list_price,
             'has_discounted_price': has_discounted_price,
diff --git a/addons/sale/models/sale.py b/addons/sale/models/sale.py
index 875b48646c2d8..99258e802336e 100644
--- a/addons/sale/models/sale.py
+++ b/addons/sale/models/sale.py
@@ -1457,9 +1457,7 @@ def product_id_change(self):
 
         result = {'domain': domain}
 
-        name = self.get_sale_order_line_multiline_description_sale(product)
-
-        vals.update(name=name)
+        vals.update(name=self.get_sale_order_line_multiline_description_sale(product))
 
         self._compute_tax_id()
 
@@ -1614,10 +1612,13 @@ def _is_delivery(self):
 
     def get_sale_order_line_multiline_description_sale(self, product):
         """ Compute a default multiline description for this sales order line.
-        This method exists so it can be overridden in other modules to change how the default name is computed.
-        In general only the product is used to compute the name, and this method would not be necessary (we could directly override the method in product).
-        BUT in event_sale we need to know specifically the sales order line as well as the product to generate the name:
-            the product is not sufficient because we also need to know the event_id and the event_ticket_id (both which belong to the sale order line).
+
+        In most cases the product description is enough but sometimes we need to append information that only
+        exists on the sale order line itself.
+        e.g:
+        - custom attributes and attributes that don't create variants, both introduced by the "product configurator"
+        - in event_sale we need to know specifically the sales order line as well as the product to generate the name:
+          the product is not sufficient because we also need to know the event_id and the event_ticket_id (both which belong to the sale order line).
         """
         return product.get_product_multiline_description_sale() + self._get_sale_order_line_multiline_description_variants()
 
diff --git a/addons/sale/static/src/js/product_configurator_controller.js b/addons/sale/static/src/js/product_configurator_controller.js
deleted file mode 100644
index 7ca3d32c29295..0000000000000
--- a/addons/sale/static/src/js/product_configurator_controller.js
+++ /dev/null
@@ -1,199 +0,0 @@
-odoo.define('sale.ProductConfiguratorFormController', function (require) {
-"use strict";
-
-var core = require('web.core');
-var _t = core._t;
-var FormController = require('web.FormController');
-var OptionalProductsModal = require('sale.OptionalProductsModal');
-
-var ProductConfiguratorFormController = FormController.extend({
-    custom_events: _.extend({}, FormController.prototype.custom_events, {
-        field_changed: '_onFieldChanged'
-    }),
-
-    /**
-     * @override
-     */
-    start: function () {
-        this.$el.addClass('o_product_configurator');
-        return this._super.apply(this, arguments);
-    },
-    /**
-     * We need to override the default click behavior for our "Add" button
-     * because there is a possibility that this product has optional products.
-     * If so, we need to display an extra modal to choose the options.
-     *
-     * @override
-     */
-    _onButtonClicked: function (event) {
-        if (event.stopPropagation){
-            event.stopPropagation();
-        }
-        var attrs = event.data.attrs;
-        if (attrs.special === 'cancel') {
-            this._super.apply(this, arguments);
-        } else {
-            if (!this.$el
-                    .parents('.modal')
-                    .find('.o_sale_product_configurator_add')
-                    .hasClass('disabled')){
-                this._handleAdd(this.$el);
-            }
-        }
-    },
-    /**
-     * This is overridden to allow catching the "select" event on our product template select field.
-     * This will not work anymore if more fields are added to the form.
-     * TODO awa: Find a better way to catch that event.
-     *
-     * @override
-     */
-    _onFieldChanged: function (event) {
-        this._super.apply(this, arguments);
-
-        var self = this;
-        var product_id = event.data.changes.product_template_id.id;
-
-        // check to prevent traceback when emptying the field
-        if (!product_id) {
-            return;
-        }
-
-        this.$el.parents('.modal').find('.o_sale_product_configurator_add').removeClass('disabled');
-
-        this._rpc({
-            route: '/product_configurator/configure',
-            params: {
-                product_id: product_id,
-                pricelist_id: this.renderer.pricelistId
-            }
-        }).then(function (configurator) {
-            self.renderer.renderConfigurator(configurator);
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-    * When the user adds a product that has optional products, we need to display
-    * a window to allow the user to choose these extra options.
-    *
-    * This will also create the product if it's in "dynamic" mode
-    * (see product_attribute.create_variant)
-    *
-    * @private
-    * @param {$.Element} $modal
-    */
-    _handleAdd: function ($modal) {
-        var self = this;
-        var productSelector = [
-            'input[type="hidden"][name="product_id"]',
-            'input[type="radio"][name="product_id"]:checked'
-        ];
-
-        var productId = parseInt($modal.find(productSelector.join(', ')).first().val(), 10);
-        this.renderer.selectOrCreateProduct(
-            $modal,
-            productId,
-            $modal.find('.product_template_id').val(),
-            false
-        ).then(function (productId) {
-            $modal.find(productSelector.join(', ')).val(productId);
-
-            var variantValues = self
-                .renderer
-                .getSelectedVariantValues($modal.find('.js_product'));
-
-            var productCustomVariantValues = self
-                .renderer
-                .getCustomVariantValues($modal.find('.js_product'));
-
-            var noVariantAttributeValues = self
-                .renderer
-                .getNoVariantAttributeValues($modal.find('.js_product'));
-
-            self.rootProduct = {
-                product_id: productId,
-                quantity: parseFloat($modal.find('input[name="add_qty"]').val() || 1),
-                variant_values: variantValues,
-                product_custom_attribute_values: productCustomVariantValues,
-                no_variant_attribute_values: noVariantAttributeValues
-            };
-
-            self.optionalProductsModal = new OptionalProductsModal($('body'), {
-                rootProduct: self.rootProduct,
-                pricelistId: self.renderer.pricelistId,
-                okButtonText: _t('Confirm'),
-                cancelButtonText: _t('Back'),
-                title: _t('Configure'),
-                context: self.initialState.context,
-            }).open();
-
-            self.optionalProductsModal.on('options_empty', null,
-                self._onModalOptionsEmpty.bind(self));
-
-            self.optionalProductsModal.on('update_quantity', null,
-                self._onOptionsUpdateQuantity.bind(self));
-
-            self.optionalProductsModal.on('confirm', null,
-                self._onModalConfirm.bind(self));
-        });
-    },
-
-    /**
-     * No optional products found for this product, only add the root product
-     *
-     * @private
-     */
-    _onModalOptionsEmpty: function () {
-        this._addProducts([this.rootProduct]);
-    },
-
-    /**
-     * Add all selected products
-     *
-     * @private
-     */
-    _onModalConfirm: function () {
-        this._addProducts(this.optionalProductsModal.getSelectedProducts());
-    },
-
-    /**
-     * Update product configurator form
-     * when quantity is updated in the optional products window
-     *
-     * @private
-     * @param {integer} quantity
-     */
-    _onOptionsUpdateQuantity: function (quantity) {
-        this.$el
-            .find('input[name="add_qty"]')
-            .val(quantity)
-            .trigger('change');
-    },
-
-    /**
-    * This triggers the close action for the window and
-    * adds the product as the "infos" parameter.
-    * It will allow the caller (typically the SO line form) of this window
-    * to handle the added products.
-    *
-    * @private
-    * @param {Array} products the list of added products
-    *   {integer} products.product_id: the id of the product
-    *   {integer} products.quantity: the added quantity for this product
-    *   {Array} products.product_custom_attribute_values:
-    *     see product_configurator_mixin.getCustomVariantValues
-    *   {Array} products.no_variant_attribute_values:
-    *     see product_configurator_mixin.getNoVariantAttributeValues
-    */
-    _addProducts: function (products) {
-        this.do_action({type: 'ir.actions.act_window_close', infos: products});
-    }
-});
-
-return ProductConfiguratorFormController;
-
-});
\ No newline at end of file
diff --git a/addons/sale/static/src/js/product_configurator_renderer.js b/addons/sale/static/src/js/product_configurator_renderer.js
deleted file mode 100644
index f3f437461ea1c..0000000000000
--- a/addons/sale/static/src/js/product_configurator_renderer.js
+++ /dev/null
@@ -1,54 +0,0 @@
-odoo.define('sale.ProductConfiguratorFormRenderer', function (require) {
-"use strict";
-
-var FormRenderer = require('web.FormRenderer');
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
-
-var ProductConfiguratorFormRenderer = FormRenderer.extend(ProductConfiguratorMixin, {
-    /**
-     * @override
-     */
-    init: function (){
-        this._super.apply(this, arguments);
-        this.pricelistId = this.state.context.default_pricelist_id || 0;
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function () {
-            self.$el.append($('<div>', {class: 'configurator_container'}));
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Renders the product configurator within the form
-     *
-     * Will also:
-     *
-     * - add events handling for variant changes
-     * - trigger variant change to compute the price and other
-     *   variant specific changes
-     *
-     * @param {string} configuratorHtml the evaluated template of
-     *   the product configurator
-     */
-    renderConfigurator: function (configuratorHtml) {
-        var $configuratorContainer = this.$('.configurator_container');
-        $configuratorContainer.empty();
-
-        var $configuratorHtml = $(configuratorHtml);
-        $configuratorHtml.appendTo($configuratorContainer);
-
-        this.triggerVariantChange($configuratorContainer);
-    }
-});
-
-return ProductConfiguratorFormRenderer;
-
-});
diff --git a/addons/sale/static/src/js/tour.js b/addons/sale/static/src/js/tour.js
index 2e6639cf6d389..7e5c485144656 100644
--- a/addons/sale/static/src/js/tour.js
+++ b/addons/sale/static/src/js/tour.js
@@ -39,21 +39,28 @@ tour.register('sale_tour', {
     content: _t("Click here to add some products or services to your quotation."),
     position: "bottom",
 }, {
-    trigger: ".o_form_editable .o_field_many2one[name='product_id'] input",
+    trigger: ".o_field_widget[name=product_id] input, .o_field_widget[name=product_template_id] input",
     extra_trigger: ".o_sale_order",
     content: _t("Select a product, or create a new one on the fly."),
     position: "right",
-    run: 'text DESK0001'
-}, {
-    trigger: ".ui-menu-item > a",
-    auto: true,
-    in_modal: false,
     run: function (actions) {
-        actions.auto();
-        if ($('.modal-dialog:has(div.o_dialog_warning) footer.modal-footer .btn-primary').length) {
-            $('.modal-dialog:has(div.o_dialog_warning) footer.modal-footer .btn-primary').trigger('click');
-        }
+        actions.text("DESK0001", this.$anchor.find('input'));
+        // fake keydown to trigger search
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        this.$anchor.trigger(keyDownEvent);
+        var $descriptionElement = $('.o_form_editable textarea[name="name"]');
+        // when description changes, we know the product has been created
+        $descriptionElement.change(function () {
+            $descriptionElement.addClass('product_creation_success');
+        });
     },
+    id: 'product_selection_step'
+}, {
+    trigger: '.o_m2o_dropdown_option a:contains("DESK0001")'
+}, {
+    trigger: '.o_form_editable textarea[name="name"].product_creation_success',
+    run: function () {} // wait for product creation
 }, {
     trigger: ".o_form_button_save",
     extra_trigger: ".o_sale_order",
diff --git a/addons/sale/static/src/js/product_configurator_mixin.js b/addons/sale/static/src/js/variant_mixin.js
similarity index 80%
rename from addons/sale/static/src/js/product_configurator_mixin.js
rename to addons/sale/static/src/js/variant_mixin.js
index 25cce5c426085..6ce51f2998d35 100644
--- a/addons/sale/static/src/js/product_configurator_mixin.js
+++ b/addons/sale/static/src/js/variant_mixin.js
@@ -1,4 +1,4 @@
-odoo.define('sale.ProductConfiguratorMixin', function (require) {
+odoo.define('sale.VariantMixin', function (require) {
 'use strict';
 
 var core = require('web.core');
@@ -6,38 +6,18 @@ var utils = require('web.utils');
 var ajax = require('web.ajax');
 var _t = core._t;
 
-var ProductConfiguratorMixin = {
+var VariantMixin = {
     events: {
         'click .css_attribute_color input': '_onChangeColorAttribute',
         'change .main_product:not(.in_cart) input.js_quantity': 'onChangeAddQuantity',
         'click button.js_add_cart_json': 'onClickAddCartJSON',
         'change [data-attribute_exclusions]': 'onChangeVariant'
     },
-    isSelectedVariantAllowed: true,
 
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
 
-    /**
-     * When a product is added or when the quantity is changed,
-     * we need to refresh the total price row
-     * TODO awa: add a container context to avoid global selectors ?
-     */
-    computePriceTotal: function () {
-        if ($('.js_price_total').length){
-            var price = 0;
-            $('.js_product.in_cart').each(function (){
-                var quantity = parseInt($('input[name="add_qty"]').first().val());
-                price += parseFloat($(this).find('.js_raw_price').html()) * quantity;
-            });
-
-            $('.js_price_total .oe_currency_value').html(
-                this._priceToStr(parseFloat(price))
-            );
-        }
-    },
-
     /**
      * When a variant is changed, this will check:
      * - If the selected combination is available or not
@@ -45,14 +25,27 @@ var ProductConfiguratorMixin = {
      * - The display name of the product ("Customizable desk (White, Steel)")
      * - The new total price
      * - The need of adding a "custom value" input
+     *   If the custom value is the only available value
+     *   (defined by its data 'is_single_and_custom'),
+     *   the custom value will have it's own input & label
+     *
+     * 'change' events triggered by the user entered custom values are ignored since they
+     * are not relevant
      *
      * @param {MouseEvent} ev
+     * @param {$.Element} [params.$container] force the used container
      */
-    onChangeVariant: function (ev) {
+    onChangeVariant: function (ev, params) {
         var self = this;
 
+        if ($(ev.target).hasClass('variant_custom_value')) {
+            return;
+        }
+
         var $component;
-        if ($(ev.currentTarget).closest('form').length > 0){
+        if (params && params.$container) {
+            $component = params.$container;
+        } else if ($(ev.currentTarget).closest('form').length > 0){
             $component = $(ev.currentTarget).closest('form');
         } else if ($(ev.currentTarget).closest('.oe_optional_products_modal').length > 0){
             $component = $(ev.currentTarget).closest('.oe_optional_products_modal');
@@ -68,7 +61,7 @@ var ProductConfiguratorMixin = {
 
         self._checkExclusions($parent, combination);
 
-        ajax.jsonRpc(this._getUri('/product_configurator/get_combination_info'), 'call', {
+        ajax.jsonRpc(this._getUri('/sale/get_combination_info'), 'call', {
             product_template_id: parseInt($parent.find('.product_template_id').val()),
             product_id: this._getProductId($parent),
             combination: combination,
@@ -99,7 +92,7 @@ var ProductConfiguratorMixin = {
         }
 
         if ($variantContainer) {
-            if ($customInput && $customInput.data('is_custom')) {
+            if ($customInput && $customInput.data('is_custom') === 'True') {
                 var attributeValueId = $customInput.data('value_id');
                 var attributeValueName = $customInput.data('value_name');
 
@@ -107,7 +100,6 @@ var ProductConfiguratorMixin = {
                         || $variantContainer
                               .find('.variant_custom_value')
                               .data('attribute_value_id') !== parseInt(attributeValueId)){
-                    $variantContainer.find('.variant_custom_value_label').remove();
                     $variantContainer.find('.variant_custom_value').remove();
 
                     var $input = $('<input>', {
@@ -120,19 +112,16 @@ var ProductConfiguratorMixin = {
                     var isRadioInput = $target.is('input[type=radio]') &&
                         $target.closest('label.css_attribute_color').length === 0;
 
-                    if (isRadioInput) {
+                    if (isRadioInput && $customInput.data('is_single_and_custom') !== 'True') {
                         $input.addClass('custom_value_radio');
                         $target.closest('div').after($input);
                     } else {
-                        var $label = $('<label>', {
-                            html: attributeValueName + ': ',
-                            class: 'variant_custom_value_label'
-                        });
-                        $variantContainer.append($label).append($input);
+                        $input.attr('placeholder', attributeValueName);
+                        $input.addClass('custom_value_own_line');
+                        $variantContainer.append($input);
                     }
                 }
             } else {
-                $variantContainer.find('.variant_custom_value_label').remove();
                 $variantContainer.find('.variant_custom_value').remove();
             }
         }
@@ -311,7 +300,7 @@ var ProductConfiguratorMixin = {
             // We don't handle that compatibility because the previous code was
             // not working either: it was making an RPC that failed with any
             // non-admin user anyway. To use this feature, restart the server.
-            var route = '/product_configurator/create_product_variant';
+            var route = '/sale/create_product_variant';
             if (useAjax) {
                 productReady = ajax.jsonRpc(route, 'call', params);
             } else {
@@ -365,7 +354,11 @@ var ProductConfiguratorMixin = {
             .find('ul[data-attribute_exclusions]')
             .data('attribute_exclusions');
 
-        $parent.find('option, input, label').removeClass('css_not_available');
+        $parent
+            .find('option, input, label')
+            .removeClass('css_not_available')
+            .attr('title', '')
+            .data('excluded-by', '');
 
         var disable = false;
 
@@ -393,20 +386,35 @@ var ProductConfiguratorMixin = {
 
                         // disable the excluded input (even when not already selected)
                         // to give a visual feedback before click
-                        self._disableInput($parent, excluded_ptav);
+                        self._disableInput(
+                            $parent,
+                            excluded_ptav,
+                            current_ptav,
+                            combinationData.mapped_attribute_names
+                        );
                     });
                 }
             });
         }
 
         // parent exclusions (tell which attributes are excluded from parent)
-        _.each(combinationData.parent_exclusions, function (ptav) {
-            if (isPtavInCombination(ptav, combination)) {
-                disable = true;
-            }
-            // disable the excluded input (even when not already selected)
-            // to give a visual feedback before click
-            self._disableInput($parent, ptav);
+        _.each(combinationData.parent_exclusions, function (exclusions, excluded_by){
+            // check that the selected combination is in the parent exclusions
+            _.each(exclusions, function (ptav) {
+                if (isPtavInCombination(ptav, combination)) {
+                    disable = true;
+                }
+
+                // disable the excluded input (even when not already selected)
+                // to give a visual feedback before click
+                self._disableInput(
+                    $parent,
+                    ptav,
+                    excluded_by,
+                    combinationData.mapped_attribute_names,
+                    combinationData.parent_product_name
+                );
+            });
         });
 
         // archived variants
@@ -423,12 +431,11 @@ var ProductConfiguratorMixin = {
             disable = true;
         }
 
-        this.isSelectedVariantAllowed = !disable;
         $parent.toggleClass('css_not_available', disable);
         $parent.find("#add_to_cart").toggleClass('disabled', disable);
         $parent
             .parents('.modal')
-            .find('.o_sale_product_configurator_add')
+            .find('.o_sale_product_configurator_add, .o_sale_product_configurator_edit')
             .toggleClass('disabled', disable);
     },
 
@@ -445,15 +452,42 @@ var ProductConfiguratorMixin = {
      * Will disable the input/option that refers to the passed attributeValueId.
      * This is used for showing the user that some combinations are not available.
      *
+     * It will also display a message explaining why the input is not selectable.
+     * Based on the "excludedBy" and the "productName" params.
+     * e.g: Not available with Color: Black
+     *
      * @private
      * @param {$.Element} $parent
      * @param {integer} attributeValueId
+     * @param {integer} excludedBy The attribute value that excludes this input
+     * @param {Object} attributeNames A dict containing all the names of the attribute values
+     *   to show a human readable message explaining why the input is disabled.
+     * @param {string} [productName] The parent product. If provided, it will be appended before
+     *   the name of the attribute value that excludes this input
+     *   e.g: Not available with Customizable Desk (Color: Black)
      */
-    _disableInput: function ($parent, attributeValueId) {
+    _disableInput: function ($parent, attributeValueId, excludedBy, attributeNames, productName) {
         var $input = $parent
             .find('option[value=' + attributeValueId + '], input[value=' + attributeValueId + ']');
         $input.addClass('css_not_available');
         $input.closest('label').addClass('css_not_available');
+
+        if (excludedBy && attributeNames) {
+            var $target = $input.is('option') ? $input : $input.closest('label').add($input);
+            var excludedByData = [];
+            if ($target.data('excluded-by')) {
+                excludedByData = JSON.parse($target.data('excluded-by'));
+            }
+
+            var excludedByName = attributeNames[excludedBy];
+            if (productName) {
+                excludedByName = productName + ' (' + excludedByName + ')';
+            }
+            excludedByData.push(excludedByName);
+
+            $target.attr('title', _.str.sprintf(_t('Not available with %s'), excludedByData.join(', ')));
+            $target.data('excluded-by', JSON.stringify(excludedByData));
+        }
     },
 
     /**
@@ -469,8 +503,8 @@ var ProductConfiguratorMixin = {
         var $price = $parent.find(".oe_price:first .oe_currency_value");
         var $default_price = $parent.find(".oe_default_price:first .oe_currency_value");
         var $optional_price = $parent.find(".oe_optional:first .oe_currency_value");
-        $price.html(self._priceToStr(combination.price));
-        $default_price.html(self._priceToStr(combination.list_price));
+        $price.text(self._priceToStr(combination.price));
+        $default_price.text(self._priceToStr(combination.list_price));
 
         // compatibility_check to remove in master
         // needed for fix in 12.0 in the case of git pull and no server restart
@@ -499,10 +533,16 @@ var ProductConfiguratorMixin = {
         ];
 
         // update images only when changing product
-        if (combination.product_id !== this.last_product_id) {
+        // or when either ids are 'false', meaning dynamic products.
+        // Dynamic products don't have images BUT they may have invalid
+        // combinations that need to disable the image.
+        if (!combination.product_id ||
+            !this.last_product_id ||
+            combination.product_id !== this.last_product_id) {
             this.last_product_id = combination.product_id;
             self._updateProductImage(
                 $parent.closest(rootComponentSelectors.join(', ')),
+                combination.display_image,
                 combination.product_id,
                 combination.product_template_id,
                 combination.carousel
@@ -518,14 +558,14 @@ var ProductConfiguratorMixin = {
         $parent
             .find('.product_display_name')
             .first()
-            .val(combination.display_name);
+            .text(combination.display_name);
 
         $parent
             .find('.js_raw_price')
             .first()
-            .html(combination.price);
+            .text(combination.price)
+            .trigger('change');
 
-        this.computePriceTotal();
         this.handleCustomValues($(ev.target));
     },
 
@@ -553,10 +593,12 @@ var ProductConfiguratorMixin = {
      *
      * @private
      * @param {$.Element} $productContainer
+     * @param {boolean} displayImage will hide the image if true. It will use the 'invisible' class
+     *   instead of d-none to prevent layout change
      * @param {integer} product_id
      * @param {integer} productTemplateId
      */
-    _updateProductImage: function ($productContainer, productId, productTemplateId) {
+    _updateProductImage: function ($productContainer, displayImage, productId, productTemplateId) {
         var model = productId ? 'product.product' : 'product.template';
         var modelId = productId || productTemplateId;
         var imageUrl = '/web/image/{0}/{1}/' + (this._productImageField ? this._productImageField : 'image');
@@ -572,7 +614,12 @@ var ProductConfiguratorMixin = {
         ];
 
         var $img = $productContainer.find(imagesSelectors.join(', '));
-        $img.attr('src', imageSrc);
+
+        if (displayImage) {
+            $img.removeClass('invisible').attr('src', imageSrc);
+        } else {
+            $img.addClass('invisible');
+        }
     },
 
     /**
@@ -590,23 +637,16 @@ var ProductConfiguratorMixin = {
     },
 
     /**
-     * Website behavior is slightly different from backend so we append
-     * "_website" to URLs to lead to a different route
-     *
-     * TODO this should be overriden in website_sale instead.
+     * Extension point for website_sale
      *
      * @private
      * @param {string} uri The uri to adapt
      */
     _getUri: function (uri) {
-        if (this.isWebsite) {
-            return uri + '_website';
-        } else {
-            return uri;
-        }
+        return uri;
     }
 };
 
-return ProductConfiguratorMixin;
+return VariantMixin;
 
 });
diff --git a/addons/sale/static/src/scss/product_configurator.scss b/addons/sale/static/src/scss/product_configurator.scss
index 8cf022dad50f5..16131046a22b7 100644
--- a/addons/sale/static/src/scss/product_configurator.scss
+++ b/addons/sale/static/src/scss/product_configurator.scss
@@ -75,7 +75,7 @@ label.css_attribute_color.css_not_available {
 
     .attribute_name {
         padding-bottom: 0.5rem;
-        display: inline-block;
+        display: block;
     }
 
     .radio_input {
@@ -91,14 +91,18 @@ label.css_attribute_color.css_not_available {
 
     .variant_custom_value {
         margin-bottom: 0.7rem;
+
+        &.custom_value_own_line {
+            display: inline-block;
+        }
     }
 
     .custom_value_radio {
         margin: 0.3rem 0rem 0.3rem 1.6rem;
     }
 
-    .variant_custom_value_label {
-        margin: 0.3rem 0rem;
+    select {
+        margin-bottom: 0.5rem;
     }
 }
 
diff --git a/addons/sale/static/tests/product_configurator.test.js b/addons/sale/static/tests/product_configurator.test.js
deleted file mode 100644
index c751eb6c111f6..0000000000000
--- a/addons/sale/static/tests/product_configurator.test.js
+++ /dev/null
@@ -1,172 +0,0 @@
-odoo.define('sale.product.configurator.tests', function (require) {
-    "use strict";
-
-    var FormView = require('web.FormView');
-    var ProductConfiguratorFormView = require('sale.ProductConfiguratorFormView');
-    var testUtils = require('web.test_utils');
-    var createView = testUtils.createView;
-
-    var getArch = function (){
-        return '<form>' +
-        '<sheet>' +
-        '<field name="pricelist_id" widget="selection" />' +
-        '<field name="sale_order_line" widget="section_and_note_one2many">' +
-        '<tree editable="top"><control>' +
-        '<create string="Add a product"/>' +
-        '<create string="Configure a product" context="{\'open_product_configurator\': True}"/>' +
-        '<create string="Add a section" context="{\'default_display_type\': \'line_section\'}"/>' +
-        '<create string="Add a note" context="{\'default_display_type\': \'line_note\'}"/>' +
-        '</control>' +
-        '<field name="product_id"/><field name="product_uom_qty"/>' +
-        '</tree>' +
-        '</field>' +
-        '</sheet>' +
-        '</form>';
-    };
-
-    QUnit.module('Product Configurator', {
-        beforeEach: function () {
-            this.data = {
-                product_template: {
-                    fields: {
-                        id: {type: 'integer'}
-                    },
-                    records: [{
-                        id: 42,
-                        display_name: "Customizable Desk"
-                    }]
-                },
-                product: {
-                    fields: {
-                        id: {type: 'integer'}
-                    },
-                    records: [{
-                        id: 1,
-                        display_name: "Customizable Desk (1)"
-                    }, {
-                        id: 2,
-                        display_name: "Customizable Desk (2)"
-                    }]
-                },
-                sale_order: {
-                    fields: {
-                        id: {type: 'integer'},
-                        pricelist_id: {
-                            string: 'Pricelist',
-                            type: 'one2many',
-                            relation: 'pricelist'
-                        },
-                        sale_order_line: {
-                            string: 'lines',
-                            type: 'one2many',
-                            relation: 'sale_order_line'
-                        },
-                    }
-                },
-                sale_order_line: {
-                    fields: {
-                        product_id: {
-                            string: 'product',
-                            type: 'many2one',
-                            relation: 'product'
-                        },
-                        product_uom_qty: {type: 'integer'}
-                    }
-                },
-                sale_product_configurator: {
-                    fields: {
-                        product_template_id: {
-                            string: 'product',
-                            type: 'many2one',
-                            relation: 'product_template'
-                        }
-                    },
-                    records: [{
-                        product_template_id: 42
-                    }]
-                },
-                pricelist: {
-                    fields: {
-                        id: {type: 'integer'}
-                    }
-                }
-            };
-        },
-    }, function (){
-        QUnit.test('click on "Configure a product" and check for form loading', async function (assert) {
-            assert.expect(2);
-
-            var form = await createView({
-                View: FormView,
-                model: 'sale_order',
-                data: this.data,
-                arch: getArch(),
-                    mockRPC: function (route) {
-                        if (route === '/web/dataset/call_kw/ir.model.data/xmlid_to_res_id') {
-                            assert.ok(true);
-                            return Promise.resolve(1);
-                        }
-                        return this._super.apply(this, arguments);
-                    },
-            });
-
-            assert.containsOnce(form, "a:contains('Configure a product')");
-
-            await testUtils.dom.click(form.$("a:contains('Configure a product')"));
-            form.destroy();
-        });
-
-        QUnit.test('trigger_up the "add_record" event and checks that rows are correctly added to the list', async function (assert) {
-            assert.expect(1);
-
-            var form = await createView({
-                View: FormView,
-                model: 'sale_order',
-                data: this.data,
-                arch: getArch(),
-            });
-
-            var list = form.renderer.allFieldWidgets[form.handle][1];
-
-            list.trigger_up('add_record', {
-                context: [{default_product_id: 1, default_product_uom_qty: 2}, {default_product_id: 2, default_product_uom_qty: 3}],
-                forceEditable: "bottom" ,
-                allowWarning: true
-            });
-            await testUtils.nextTick();
-
-            assert.containsN(list, "tr.o_data_row", 2);
-            form.destroy();
-        });
-
-        QUnit.test('Select a product in the list and check for template loading', async function (assert){
-            assert.expect(1);
-
-            var product_configurator_form = await createView({
-                View: ProductConfiguratorFormView,
-                model: 'sale_product_configurator',
-                data: this.data,
-                arch:
-                    '<form js_class="product_configurator_form">' +
-                        '<group>' +
-                            '<field name="product_template_id" class="oe_product_configurator_product_template_id" />' +
-                        '</group>' +
-                        '<footer>' +
-                            '<button string="Add" class="btn-primary o_sale_product_configurator_add disabled"/>' +
-                            '<button string="Cancel" class="btn-secondary" special="cancel"/>' +
-                        '</footer>' +
-                    '</form>',
-                    mockRPC: function (route) {
-                        if (route === '/product_configurator/configure') {
-                            assert.ok(true);
-                            return Promise.resolve('<div>plop</div>');
-                        }
-                        return this._super.apply(this, arguments);
-                    }
-            });
-            await testUtils.dom.click(product_configurator_form.$('.o_input'));
-            await testUtils.dom.click($("ul.ui-autocomplete li a:contains('Customizable Desk')").mouseenter());
-            product_configurator_form.destroy();
-        });
-    });
-});
diff --git a/addons/sale/views/assets.xml b/addons/sale/views/assets.xml
index ea5c82b1c8625..9e7e42eff80a2 100644
--- a/addons/sale/views/assets.xml
+++ b/addons/sale/views/assets.xml
@@ -8,11 +8,6 @@
         <xpath expr="script[last()]" position="after">
             <script type="text/javascript" src="/sale/static/src/js/sale.js"></script>
             <script type="text/javascript" src="/sale/static/src/js/tour.js"></script>
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_mixin.js"></script>
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_renderer.js"></script>
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_controller.js"></script>
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_view.js"></script>
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_modal.js"></script>
             <script type="text/javascript" src="/sale/static/src/js/account_reconciliation.js"></script>
         </xpath>
     </template>
@@ -28,7 +23,6 @@
     <template id="qunit_suite" name="sale_tests" inherit_id="web.qunit_suite">
         <xpath expr="//t[@t-set='head']" position="inside">
             <script type="text/javascript" src="/sale/static/tests/sales_team_dashboard_tests.js"></script>
-            <script type="text/javascript" src="/sale/static/tests/product_configurator.test.js"></script>
         </xpath>
     </template>
 </odoo>
diff --git a/addons/sale/views/res_config_settings_views.xml b/addons/sale/views/res_config_settings_views.xml
index bc1366e5d5c38..86abec7541c44 100644
--- a/addons/sale/views/res_config_settings_views.xml
+++ b/addons/sale/views/res_config_settings_views.xml
@@ -18,7 +18,7 @@
                             <div class="o_setting_right_pane">
                                 <label for="group_product_variant"/>
                                 <div class="text-muted">
-                                    Configure your products with variants and select optional products
+                                    Sell variants of a product using attributes (size, color, etc.)
                                 </div>
                                 <div class="content-group" attrs="{'invisible': [('group_product_variant','=',False)]}">
                                     <div class="mt16">
@@ -27,6 +27,17 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="col-12 col-lg-6 o_setting_box">
+                            <div class="o_setting_left_pane">
+                                <field name="module_sale_product_configurator"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="module_sale_product_configurator"/>
+                                <div class="text-muted">
+                                    Configure your attributes with exclusions and select optional products
+                                </div>
+                            </div>
+                        </div>
                         <div class="col-12 col-lg-6 o_setting_box">
                             <div class="o_setting_left_pane">
                                 <field name="group_uom"/>
diff --git a/addons/sale/views/sale_product_configurator_templates.xml b/addons/sale/views/sale_product_configurator_templates.xml
deleted file mode 100644
index 075a4f1175173..0000000000000
--- a/addons/sale/views/sale_product_configurator_templates.xml
+++ /dev/null
@@ -1,312 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <template id="optional_products_modal" name="Optional Products">
-        <main class="modal-body">
-            <t t-call="sale.product_configurator_configure_optional_products" />
-        </main>
-    </template>
-
-    <!-- backend -->
-    <template id="product_configurator_configure" name="Configure">
-        <div class="js_product main_product">
-
-            <t t-set="first_possible_combination" t-value="product._get_first_possible_combination()"/>
-            <t t-set="combination_info" t-value="product._get_combination_info(first_possible_combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
-            <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
-
-            <input type="hidden" class="product_template_id" t-att-value="product.id"/>
-            <input type="hidden" class="product_id" t-attf-name="product_id" t-att-value="product_variant.id"/>
-            <div class="col-lg-12 text-center mt-5">
-                <div class="col-lg-5 d-inline-block align-top text-left">
-                    <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image' % product_variant.id" class="d-block product_detail_img" alt="Product Image"/>
-                    <img t-else="" t-att-src="'/web/image/product.template/%s/image' % product.id" class="d-block product_detail_img" alt="Product Image"/>
-                </div>
-                <div class="col-lg-1 d-inline-block"></div>
-                <div t-if="product._is_add_to_cart_possible()" class="col-lg-5 d-inline-block text-left">
-                    <t t-if="first_possible_combination" t-call="sale.variants">
-                        <t t-set="parent_combination" t-value="None"/>
-                    </t>
-                    <h2>
-                        <span t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
-                            t-esc="combination_info['list_price']"
-                            t-options='{
-                                "widget": "monetary",
-                                "display_currency": (pricelist or product).currency_id
-                            }'/>
-                        <span class="oe_price product_id mt-3" style="white-space: nowrap;"
-                            t-att-data-product-id="product.id"
-                            t-esc="combination_info['price']"
-                            t-options='{
-                                "widget": "monetary",
-                                "display_currency": (pricelist or product).currency_id
-                            }'/>
-                    </h2>
-                    <div class="css_quantity input-group oe_website_spinner">
-                        <div class="input-group-prepend">
-                            <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
-                                <i class="fa fa-minus"></i>
-                            </button>
-                        </div>
-                        <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
-                        <div class="input-group-append">
-                            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
-                                <i class="fa fa-plus"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <p class="css_not_available_msg alert alert-warning">This combination does not exist.</p>
-                </div>
-                <div t-else="" class="col-lg-5 d-inline-block text-left">
-                    <p class="alert alert-warning">This product has no valid combination.</p>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <!-- modal: full table, currenclty selected products at top -->
-    <template id="product_configurator_configure_optional_products">
-        <table class="table table-striped table-sm">
-        <thead>
-            <tr>
-                <th class="td-img">Product</th>
-                <th></th>
-                <th class="text-center td-qty">Quantity</th>
-                <th class="text-center td-price">Price</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="js_product in_cart main_product">
-
-                <t t-set="combination_info" t-value="product.product_tmpl_id._get_combination_info(combination, product.id, add_qty or 1, pricelist)"/>
-                <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
-
-                <input type="hidden" class="product_template_id" t-att-value="product.product_tmpl_id.id"/>
-                <input type="hidden" class="product_id" t-att-value="product_variant.id"/>
-                <td class='td-img'>
-                    <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_medium' % product_variant.id" alt="Product Image"/>
-                    <img t-else="" t-att-src="'/web/image/product.template/%s/image_medium' % product.id" alt="Product Image"/>
-                </td>
-                <td class='td-product_name'>
-                    <strong t-esc="combination_info['display_name']"/>
-                    <div class="text-muted small">
-                        <div t-field="product.description_sale"/>
-                        <div class="js_attributes"/>
-                    </div>
-                </td>
-                <td class="text-center td-qty">
-                    <div class="css_quantity input-group oe_website_spinner">
-                        <div class="input-group-prepend">
-                            <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
-                                <i class="fa fa-minus"></i>
-                            </button>
-                        </div>
-                        <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
-                        <div class="input-group-append">
-                            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
-                                <i class="fa fa-plus"></i>
-                            </button>
-                        </div>
-                    </div>
-                </td>
-                <td class="text-center td-price" name="price">
-                    <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"></ul>
-                    <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="variant_values" ></div>
-                    <div t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
-                        t-esc="combination_info['list_price']"
-                        t-options='{
-                            "widget": "monetary",
-                            "display_currency": (pricelist or product).currency_id
-                        }'
-                    />
-                    <span class="oe_price product_id" style="white-space: nowrap;"
-                        t-att-data-product-id="product.id"
-                        t-esc="combination_info['price']"
-                        t-options='{
-                            "widget": "monetary",
-                            "display_currency": (pricelist or product).currency_id
-                        }'/>
-                    <span class="js_raw_price d-none" t-esc="product.price"/>
-                </td>
-            </tr>
-            <tr class="o_total_row">
-                <td colspan="4" class="text-right">
-                    <strong>Total:</strong>
-                    <span class="js_price_total font-weight-bold" style="white-space: nowrap;"
-                        t-att-data-product-id="product.id"
-                        t-esc="combination_info['price'] * (add_qty or 1)"
-                        t-options='{
-                            "widget": "monetary",
-                            "display_currency": (pricelist or product).currency_id
-                        }'/>
-                </td>
-            </tr>
-            <tr t-if="product.optional_product_ids" class="o_select_options"><td colspan="4"><h4>Available Options:</h4></td></tr>
-            <t t-call="sale.optional_product_items">
-                <t t-set="parent_combination" t-value="combination"/>
-            </t>
-        </tbody>
-        </table>
-    </template>
-
-    <!-- modal: optional products -->
-    <template id="optional_product_items">
-        <t t-foreach="product.optional_product_ids" t-as="product">
-            <t t-set="first_possible_combination" t-value="product._get_first_possible_combination(parent_combination)"/>
-            <t t-if="product._is_add_to_cart_possible(parent_combination)">
-
-                <t t-set="combination_info" t-value="product._get_combination_info(first_possible_combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
-                <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
-
-                <tr class="js_product">
-                    <td class="td-img">
-                        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
-                        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}" t-att-value="product_variant.id"/>
-                        <input type="hidden" class="product_display_name" t-attf-name="optional-productname-#{product.id}" t-att-value="combination_info['display_name']"/>
-                        <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_medium' % product_variant.id"  class="variant_image" alt="Product Image"/>
-                        <img t-else="" t-att-src="'/web/image/product.template/%s/image_medium' % product.id"  class="variant_image" alt="Product Image"/>
-                    </td>
-                    <td class='td-product_name' colspan="2">
-                        <div class="float-left">
-                            <strong class="product-name" t-esc="combination_info['display_name']"/>
-                            <div class="text-muted small" t-field="product.description_sale"/>
-                        </div>
-                        <div class="float-right">
-                            <t t-call="sale.variants"/>
-                        </div>
-                    </td>
-                    <td class="text-center td-price">
-                        <div t-attf-class="text-danger oe_default_price oe_optional oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
-                            t-esc="combination_info['list_price']"
-                            t-options='{
-                                "widget": "monetary",
-                                "display_currency": (pricelist or product).currency_id
-                            }'/>
-                        <div class="oe_price" style="white-space: nowrap;"
-                            t-esc="combination_info['price']"
-                            t-options='{
-                                "widget": "monetary",
-                                "display_currency": (pricelist or product).currency_id
-                            }'/>
-                        <span class="js_raw_price d-none" t-esc="combination_info['price']" />
-                        <p class="css_not_available_msg alert alert-warning">Option not available</p>
-
-                        <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product.id}" value="0"/>
-                        <a role="button" href="#" class="js_add btn btn-primary btn-sm"><i class="fa fa-shopping-cart add-optionnal-item"></i> Add to cart</a>
-                        <span class="js_remove d-none">
-                            <span class="optional_product_quantity"><span class="js_item add_qty">1 </span><span class="js_items d-none">5 </span> <span t-field="product.uom_id.sudo().name"/><br/></span>
-                            <a role="button" href="#" class="js_remove"><i class="fa fa-trash-o remove-optionnal-item"></i></a>
-                        </span>
-                    </td>
-                </tr>
-            </t>
-        </t>
-    </template>
-
-
-
-    <template id="variants">
-        <t t-set="attribute_exclusions" t-value="product._get_attribute_exclusions(parent_combination)"/>
-        <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
-            <t t-foreach="product._get_valid_product_template_attribute_lines()" t-as="variant_id">
-                <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
-                <li t-att-data-attribute_id="variant_id.attribute_id.id"
-                    t-att-data-attribute_name="variant_id.attribute_id.name"
-                    t-attf-class="variant_attribute #{'d-none' if len(variant_id.product_template_value_ids) == 1 and not variant_id.product_template_value_ids[0].is_custom else ''}">
-
-                    <strong t-field="variant_id.attribute_id.name" class="attribute_name"/>
-
-                    <t t-if="variant_id.attribute_id.type == 'select'">
-                        <select
-                            t-att-data-attribute_id="variant_id.attribute_id.id"
-                            t-attf-class="form-control js_variant_change #{variant_id.attribute_id.create_variant}"
-                            t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)">
-                            <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
-                                <option t-att-value="value_id.id"
-                                    t-att-data-value_id="value_id.product_attribute_value_id.id"
-                                    t-att-data-value_name="value_id.name"
-                                    t-att-data-attribute_name="value_id.attribute_id.name"
-                                    t-att-data-is_custom="value_id.is_custom"
-                                    t-att-selected="first_possible_combination[variant_id_index] == value_id">
-                                    <span t-field="value_id.name"/>
-                                    <span t-if="value_id.price_extra" class="badge badge-pill badge-secondary">
-                                        <!--
-                                            price_extra is displayed as catalog price instead of
-                                            price after pricelist because it is impossible to
-                                            compute. Indeed, the pricelist rule might depend on the
-                                            selected variant, so the price_extra will be different
-                                            depending on the selected combination. The price of an
-                                            attribute is therefore variable and it's not very
-                                            accurate to display it.
-                                         -->
-                                        <t t-esc="value_id.price_extra > 0 and '+' or '-'"/>
-                                        <span t-esc="abs(value_id.price_extra)" class="variant_price_extra" style="white-space: nowrap;"
-                                            t-options='{
-                                                "widget": "monetary",
-                                                "from_currency": product.currency_id,
-                                                "display_currency": (pricelist or product).currency_id
-                                            }'/>
-                                    </span>
-                                </option>
-                            </t>
-                        </select>
-                    </t>
-
-                    <t t-if="variant_id.attribute_id.type == 'radio'">
-                        <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-unstyled">
-                            <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
-                                <li class="form-group js_attribute_value" style="margin: 0;">
-                                    <label class="col-form-label">
-                                        <div>
-                                            <input type="radio"
-                                                t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
-                                                t-att-checked="first_possible_combination[variant_id_index] == value_id"
-                                                t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
-                                                t-att-value="value_id.id"
-                                                t-att-data-value_id="value_id.product_attribute_value_id.id"
-                                                t-att-data-value_name="value_id.name"
-                                                t-att-data-attribute_name="value_id.attribute_id.name"
-                                                t-att-data-is_custom="value_id.is_custom" />
-                                            <div class="radio_input_value">
-                                                <span t-field="value_id.name"/>
-                                                <span class="badge badge-pill badge-secondary" t-if="value_id.price_extra">
-                                                    <!-- see note above about price_extra -->
-                                                    <t t-esc="value_id.price_extra > 0 and '+' or '-'"/>
-                                                    <span t-esc="abs(value_id.price_extra)" class="variant_price_extra" style="white-space: nowrap;"
-                                                        t-options='{
-                                                            "widget": "monetary",
-                                                            "from_currency": product.currency_id,
-                                                            "display_currency": (pricelist or product).currency_id
-                                                        }'/>
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </label>
-                                </li>
-                            </t>
-                        </ul>
-                    </t>
-
-                    <t t-if="variant_id.attribute_id.type == 'color'">
-                        <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-inline">
-                            <li t-foreach="variant_id.product_template_value_ids" t-as="value_id" class="list-inline-item">
-                                <label t-attf-style="background-color:#{value_id.html_color or value_id.name if not value_id.is_custom else ''}"
-                                    t-attf-class="css_attribute_color #{'active' if first_possible_combination[variant_id_index] == value_id else ''} #{'custom_value' if value_id.is_custom else ''}">
-                                    <input type="radio"
-                                        t-attf-class="js_variant_change  #{variant_id.attribute_id.create_variant}"
-                                        t-att-checked="first_possible_combination[variant_id_index] == value_id"
-                                        t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
-                                        t-att-value="value_id.id"
-                                        t-att-title="value_id.name"
-                                        t-att-data-value_id="value_id.product_attribute_value_id.id"
-                                        t-att-data-value_name="value_id.name"
-                                        t-att-data-attribute_name="value_id.attribute_id.name"
-                                        t-att-data-is_custom="value_id.is_custom"/>
-                                </label>
-                            </li>
-                        </ul>
-                    </t>
-                </li>
-            </t>
-        </ul>
-    </template>
-</odoo>
diff --git a/addons/sale/views/sale_views.xml b/addons/sale/views/sale_views.xml
index 18b06b56c9a5d..0a5df73d185ff 100644
--- a/addons/sale/views/sale_views.xml
+++ b/addons/sale/views/sale_views.xml
@@ -81,13 +81,6 @@
                 <xpath expr="//page[@name='sales']" position="attributes">
                     <attribute name="invisible">0</attribute>
                 </xpath>
-                <xpath expr="//group[@name='sale']" position="after">
-                    <group name="options" groups="product.group_product_variant">
-                        <group string="Options">
-                            <field name="optional_product_ids" widget="many2many_tags" options="{'color_field': 'color'}" domain="[('id', '!=', active_id)]" />
-                        </group>
-                    </group>
-                </xpath>
             </field>
         </record>
 
@@ -379,10 +372,6 @@
                                     </div>
                                     <field name="state" invisible="1"/>
                                 </form>
-                                <!-- This is inherited below to make the order lines non-editable (inline)
-                                    for the members of some usability groups (packaging, event):
-                                    Indeed in those cases we need a dialog because there are additional fields to input.
-                                -->
                                 <tree
                                     string="Sales Order Lines"
                                     editable="bottom"
@@ -390,7 +379,6 @@
                                 >
                                     <control>
                                         <create name="add_product_control" string="Add a product"/>
-                                        <create name="configure_product_control" string="Configure a product" context="{'open_product_configurator': True}" groups="product.group_product_variant"/>
                                         <create name="add_section_control" string="Add a section" context="{'default_display_type': 'line_section'}"/>
                                         <create name="add_note_control" string="Add a note" context="{'default_display_type': 'line_note'}"/>
                                     </control>
@@ -417,8 +405,6 @@
                                             'default_description_sale': name
                                         }"
                                     />
-                                    <field name="product_custom_attribute_value_ids" invisible="1" />
-                                    <field name="product_no_variant_attribute_value_ids" invisible="1" />
                                     <field name="name" widget="section_and_note_text"/>
                                     <field
                                         name="product_uom_qty"
@@ -456,6 +442,7 @@
                                         groups="uom.group_uom"
                                         options='{"no_open": True}'
                                     />
+                                    <field name="customer_lead" />
                                     <field
                                         name="analytic_tag_ids"
                                         groups="analytic.group_analytic_tags"
@@ -477,7 +464,6 @@
                                     <field name="price_total" widget="monetary" groups="account.group_show_line_subtotals_tax_included"/>
                                     <field name="state" invisible="1"/>
                                     <field name="invoice_status" invisible="1"/>
-                                    <field name="customer_lead" invisible="1"/>
                                     <field name="currency_id" invisible="1"/>
                                     <field name="price_tax" invisible="1"/>
                                 </tree>
@@ -601,20 +587,6 @@
             </field>
         </record>
 
-        <!-- inherited view to make the order lines list in the form non-editable
-             for the members of some usability groups -->
-        <record id="view_order_form_editable_list" model="ir.ui.view">
-            <field name="name">sale.order.form.editable.list</field>
-            <field name="model">sale.order</field>
-            <field name="inherit_id" ref="sale.view_order_form"/>
-            <field name="groups_id" eval="[(4, ref('product.group_stock_packaging'))]"/>
-            <field name="arch" type="xml">
-                <xpath expr="//field[@name='order_line']/tree" position="attributes">
-                    <attribute name="editable"/>
-                </xpath>
-            </field>
-        </record>
-
         <record id="view_sales_order_filter" model="ir.ui.view">
             <field name="name">sale.order.list.select</field>
             <field name="model">sale.order</field>
diff --git a/addons/sale/views/variant_templates.xml b/addons/sale/views/variant_templates.xml
new file mode 100644
index 0000000000000..d9d28998e6496
--- /dev/null
+++ b/addons/sale/views/variant_templates.xml
@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="variants">
+        <t t-set="attribute_exclusions" t-value="product._get_attribute_exclusions(parent_combination, parent_name)"/>
+        <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
+            <t t-foreach="product._get_valid_product_template_attribute_lines()" t-as="variant_id">
+                <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
+                <li t-att-data-attribute_id="variant_id.attribute_id.id"
+                    t-att-data-attribute_name="variant_id.attribute_id.name"
+                    t-attf-class="variant_attribute #{'d-none' if len(variant_id.product_template_value_ids) == 1 and not variant_id.product_template_value_ids[0].is_custom else ''}">
+
+                    <!-- Used to customize layout if the only available attribute value is custom -->
+                    <t t-set="single_and_custom" t-value="len(variant_id.product_template_value_ids) == 1 and variant_id.product_template_value_ids[0].is_custom" />
+                    <strong t-field="variant_id.attribute_id.name" class="attribute_name"/>
+
+                    <t t-if="variant_id.attribute_id.type == 'select'">
+                        <select
+                            t-att-data-attribute_id="variant_id.attribute_id.id"
+                            t-attf-class="form-control js_variant_change #{variant_id.attribute_id.create_variant} #{'d-none' if single_and_custom else ''}"
+                            t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)">
+                            <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
+                                <option t-att-value="value_id.id"
+                                    t-att-data-value_id="value_id.product_attribute_value_id.id"
+                                    t-att-data-value_name="value_id.name"
+                                    t-att-data-attribute_name="value_id.attribute_id.name"
+                                    t-att-data-is_custom="value_id.is_custom"
+                                    t-att-selected="value_id in combination"
+                                    t-att-data-is_single_and_custom="single_and_custom">
+                                    <span t-field="value_id.name"/>
+                                    <span t-if="value_id.price_extra" class="badge badge-pill badge-secondary">
+                                        <!--
+                                            price_extra is displayed as catalog price instead of
+                                            price after pricelist because it is impossible to
+                                            compute. Indeed, the pricelist rule might depend on the
+                                            selected variant, so the price_extra will be different
+                                            depending on the selected combination. The price of an
+                                            attribute is therefore variable and it's not very
+                                            accurate to display it.
+                                            -->
+                                        <t t-esc="value_id.price_extra > 0 and '+' or '-'"/>
+                                        <span t-esc="abs(value_id.price_extra)" class="variant_price_extra" style="white-space: nowrap;"
+                                            t-options='{
+                                                "widget": "monetary",
+                                                "from_currency": product.currency_id,
+                                                "display_currency": (pricelist or product).currency_id
+                                            }'/>
+                                    </span>
+                                </option>
+                            </t>
+                        </select>
+                    </t>
+
+                    <t t-if="variant_id.attribute_id.type == 'radio'">
+                        <ul t-att-data-attribute_id="variant_id.attribute_id.id" t-attf-class="list-unstyled #{'d-none' if single_and_custom else ''}">
+                            <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
+                                <li class="form-group js_attribute_value" style="margin: 0;">
+                                    <label class="col-form-label">
+                                        <div>
+                                            <input type="radio"
+                                                t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
+                                                t-att-checked="value_id in combination"
+                                                t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
+                                                t-att-value="value_id.id"
+                                                t-att-data-value_id="value_id.product_attribute_value_id.id"
+                                                t-att-data-value_name="value_id.name"
+                                                t-att-data-attribute_name="value_id.attribute_id.name"
+                                                t-att-data-is_custom="value_id.is_custom"
+                                                t-att-data-is_single_and_custom="single_and_custom" />
+                                            <div class="radio_input_value">
+                                                <span t-field="value_id.name"/>
+                                                <span class="badge badge-pill badge-secondary" t-if="value_id.price_extra">
+                                                    <!-- see note above about price_extra -->
+                                                    <t t-esc="value_id.price_extra > 0 and '+' or '-'"/>
+                                                    <span t-esc="abs(value_id.price_extra)" class="variant_price_extra" style="white-space: nowrap;"
+                                                        t-options='{
+                                                            "widget": "monetary",
+                                                            "from_currency": product.currency_id,
+                                                            "display_currency": (pricelist or product).currency_id
+                                                        }'/>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </label>
+                                </li>
+                            </t>
+                        </ul>
+                    </t>
+
+                    <t t-if="variant_id.attribute_id.type == 'color'">
+                        <ul t-att-data-attribute_id="variant_id.attribute_id.id" t-attf-class="list-inline  #{'d-none' if single_and_custom else ''}">
+                            <li t-foreach="variant_id.product_template_value_ids" t-as="value_id" class="list-inline-item">
+                                <label t-attf-style="background-color:#{value_id.html_color or value_id.name if not value_id.is_custom else ''}"
+                                    t-attf-class="css_attribute_color #{'active' if value_id in combination else ''} #{'custom_value' if value_id.is_custom else ''}">
+                                    <input type="radio"
+                                        t-attf-class="js_variant_change  #{variant_id.attribute_id.create_variant}"
+                                        t-att-checked="value_id in combination"
+                                        t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
+                                        t-att-value="value_id.id"
+                                        t-att-title="value_id.name"
+                                        t-att-data-value_id="value_id.product_attribute_value_id.id"
+                                        t-att-data-value_name="value_id.name"
+                                        t-att-data-attribute_name="value_id.attribute_id.name"
+                                        t-att-data-is_custom="value_id.is_custom"
+                                        t-att-data-is_single_and_custom="single_and_custom"/>
+                                </label>
+                            </li>
+                        </ul>
+                    </t>
+                </li>
+            </t>
+        </ul>
+    </template>
+</odoo>
diff --git a/addons/sale/wizard/__init__.py b/addons/sale/wizard/__init__.py
index 145cce89c1ed8..09f069f85edb5 100644
--- a/addons/sale/wizard/__init__.py
+++ b/addons/sale/wizard/__init__.py
@@ -3,4 +3,3 @@
 
 from . import payment_acquirer_onboarding_wizard
 from . import sale_make_invoice_advance
-from . import sale_product_configurator
\ No newline at end of file
diff --git a/addons/sale/wizard/sale_product_configurator.py b/addons/sale/wizard/sale_product_configurator.py
deleted file mode 100644
index 755638729281a..0000000000000
--- a/addons/sale/wizard/sale_product_configurator.py
+++ /dev/null
@@ -1,14 +0,0 @@
-# -*- coding: utf-8 -*-
-# Part of Odoo. See LICENSE file for full copyright and licensing details.
-
-from odoo import models, fields
-
-
-class SaleProductConfigurator(models.TransientModel):
-    _name = 'sale.product.configurator'
-    _description = 'Sale Product Configurator'
-
-    product_template_id = fields.Many2one(
-        'product.template', string="Product",
-        required=True, domain=[('sale_ok', '=', True), '|', ('attribute_line_ids.value_ids', '!=', False), ('optional_product_ids', '!=', False)])
-    pricelist_id = fields.Many2one('product.pricelist', 'Pricelist', readonly=True)
diff --git a/addons/sale/wizard/sale_product_configurator_views.xml b/addons/sale/wizard/sale_product_configurator_views.xml
deleted file mode 100644
index 9b29c3f9183e9..0000000000000
--- a/addons/sale/wizard/sale_product_configurator_views.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <record id="sale_product_configurator_view_form" model="ir.ui.view">
-        <field name="name">sale.product.configurator.view.form</field>
-        <field name="model">sale.product.configurator</field>
-        <field name="arch" type="xml">
-            <form js_class="product_configurator_form">
-                <group>
-                    <field name="product_template_id" class="oe_product_configurator_product_template_id" />
-                </group>
-                <footer>
-                    <button string="Add" class="btn-primary o_sale_product_configurator_add disabled"/>
-                    <button string="Cancel" class="btn-secondary" special="cancel"/>
-                </footer>
-            </form>
-        </field>
-    </record>
-</odoo>
\ No newline at end of file
diff --git a/addons/sale_management/__manifest__.py b/addons/sale_management/__manifest__.py
index 3bf801a604bc1..98f77d209566e 100644
--- a/addons/sale_management/__manifest__.py
+++ b/addons/sale_management/__manifest__.py
@@ -47,7 +47,6 @@
         'views/sale_management_views.xml',
         'views/digest_views.xml',
         'views/sale_order_views.xml',
-        'views/assets.xml',
         'report/sale_report_templates.xml',
     ],
     'demo': [
diff --git a/addons/sale_management/tests/test_sale_ui.py b/addons/sale_management/tests/test_sale_ui.py
index 6ec2f4167c136..cf107b02ebc5c 100644
--- a/addons/sale_management/tests/test_sale_ui.py
+++ b/addons/sale_management/tests/test_sale_ui.py
@@ -7,119 +7,3 @@ class TestUi(odoo.tests.HttpCase):
 
     def test_01_sale_tour(self):
         self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_tour.ready", login="admin")
-
-    def test_02_product_configurator(self):
-        # group_product_variant: use the product configurator
-        # group_sale_pricelist: display the pricelist to determine when it is changed after choosing
-        #                       the partner
-        self.env.ref('base.user_admin').write({
-            'groups_id': [
-                (4, self.env.ref('product.group_product_variant').id),
-                (4, self.env.ref('product.group_sale_pricelist').id),
-            ],
-        })
-
-        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_tour.ready", login="admin")
-
-    def test_03_product_configurator_advanced(self):
-        # group_product_variant: use the product configurator
-        # group_sale_pricelist: display the pricelist to determine when it is changed after choosing
-        #                       the partner
-        self.env.ref('base.user_admin').write({
-            'groups_id': [
-                (4, self.env.ref('product.group_product_variant').id),
-                (4, self.env.ref('product.group_sale_pricelist').id),
-            ],
-        })
-
-        # Prepare relevant test data
-        # This is not included in demo data to avoid useless noise
-        product_attributes = self.env['product.attribute'].create([{
-            'name': 'PA1',
-            'type': 'radio',
-            'create_variant': 'dynamic'
-        }, {
-            'name': 'PA2',
-            'type': 'radio',
-            'create_variant': 'always'
-        }, {
-            'name': 'PA3',
-            'type': 'radio',
-            'create_variant': 'dynamic'
-        }, {
-            'name': 'PA4',
-            'type': 'select',
-            'create_variant': 'no_variant'
-        }, {
-            'name': 'PA5',
-            'type': 'select',
-            'create_variant': 'no_variant'
-        }, {
-            'name': 'PA7',
-            'type': 'color',
-            'create_variant': 'no_variant'
-        }, {
-            'name': 'PA8',
-            'type': 'radio',
-            'create_variant': 'no_variant'
-        }])
-
-        product_attribute_values = self.env['product.attribute.value'].create([{
-            'name': 'PAV' + str(i),
-            'is_custom': i == 9,
-            'attribute_id': product_attribute.id
-        } for i in range(1, 11) for product_attribute in product_attributes])
-
-        product_template_attribute_lines = self.env['product.template.attribute.line'].create([{
-            'attribute_id': product_attribute.id,
-            'product_tmpl_id': self.env.ref("product.product_product_4").id,
-            'value_ids': [(6, 0, product_attribute_values.filtered(
-                lambda product_attribute_value: product_attribute_value.attribute_id == product_attribute
-            ).ids)]
-        } for product_attribute in product_attributes])
-
-        self.env.ref("product.product_product_4").update({
-            'attribute_line_ids': [(4, product_template_attribute_line.id) for product_template_attribute_line in product_template_attribute_lines]
-        })
-
-        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_advanced_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_advanced_tour.ready", login="admin")
-
-    def test_04_product_configurator_pricelist(self):
-        """The goal of this test is to make sure pricelist rules are correctly
-        applied on the backend product configurator.
-        Also testing B2C setting: no impact on the backend configurator.
-        """
-
-        admin = self.env.ref('base.user_admin')
-
-        # Activate B2C
-        self.env.ref('account.group_show_line_subtotals_tax_included').users |= admin
-        self.env.ref('account.group_show_line_subtotals_tax_excluded').users -= admin
-
-        # Active pricelist on SO
-        self.env.ref('product.group_sale_pricelist').users |= admin
-
-        # Add a 15% tax on desk
-        tax = self.env['account.tax'].create({'name': "Test tax", 'amount': 15})
-        self.env.ref('product.product_product_4_product_template').taxes_id = tax
-
-        # Remove tax from Conference Chair and Chair floor protection
-        self.env.ref('sale.product_product_1_product_template').taxes_id = None
-        self.env.ref('product.product_product_11_product_template').taxes_id = None
-
-        # Make sure pricelist rule exist
-        product_template = self.env.ref('product.product_product_4_product_template')
-        pricelist = self.env.ref('product.list0')
-
-        if not pricelist.item_ids.filtered(lambda i: i.product_tmpl_id == product_template and i.price_discount == 20):
-            self.env['product.pricelist.item'].create({
-                'base': 'list_price',
-                'applied_on': '1_product',
-                'pricelist_id': pricelist.id,
-                'product_tmpl_id': product_template.id,
-                'price_discount': 20,
-                'min_quantity': 2,
-                'compute_price': 'formula',
-            })
-
-        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_pricelist_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_pricelist_tour.ready", login="admin")
diff --git a/addons/sale_management/views/assets.xml b/addons/sale_management/views/assets.xml
deleted file mode 100644
index a5a3134949d71..0000000000000
--- a/addons/sale_management/views/assets.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <template id="assets_backend_inherit_sale_management" inherit_id="web.assets_backend" name="Sale management backend assets">
-        <xpath expr="script[last()]" position="after">
-            <script type="text/javascript" src="/sale_management/static/tests/product_configurator_test_ui.js"/>
-            <script type="text/javascript" src="/sale_management/static/tests/product_configurator_advanced_test_ui.js"/>
-            <script type="text/javascript" src="/sale_management/static/tests/product_configurator_pricelist_test_ui.js"/>
-        </xpath>
-    </template>
-</odoo>
diff --git a/addons/sale_product_configurator/__init__.py b/addons/sale_product_configurator/__init__.py
new file mode 100644
index 0000000000000..1f4530082b3e9
--- /dev/null
+++ b/addons/sale_product_configurator/__init__.py
@@ -0,0 +1,5 @@
+# -*- coding: utf-8 -*-
+
+from . import models
+from . import controllers
+from . import wizard
diff --git a/addons/sale_product_configurator/__manifest__.py b/addons/sale_product_configurator/__manifest__.py
new file mode 100644
index 0000000000000..fd72a2fec6f07
--- /dev/null
+++ b/addons/sale_product_configurator/__manifest__.py
@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+{
+    'name': "Sale Product Configurator",
+    'version': '1.0',
+    'category': 'Hidden',
+    'summary': "Configure your products",
+
+    'description': """
+        Technical module installed when the user checks the "module_sale_product_configurator" setting.
+        The main purpose is to override the sale_order view to allow configuring products in the SO form.
+
+        It also enables the optional products feature.
+    """,
+
+    'depends': ['sale'],
+    'data': [
+        'views/assets.xml',
+        'views/templates.xml',
+        'views/sale_views.xml',
+        'wizard/sale_product_configurator_views.xml',
+    ],
+    'demo': [
+        'data/sale_demo.xml',
+    ],
+}
diff --git a/addons/sale_product_configurator/controllers/__init__.py b/addons/sale_product_configurator/controllers/__init__.py
new file mode 100644
index 0000000000000..5d4b25db9c001
--- /dev/null
+++ b/addons/sale_product_configurator/controllers/__init__.py
@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from . import main
diff --git a/addons/sale_product_configurator/controllers/main.py b/addons/sale_product_configurator/controllers/main.py
new file mode 100644
index 0000000000000..d187d1c7d5af3
--- /dev/null
+++ b/addons/sale_product_configurator/controllers/main.py
@@ -0,0 +1,86 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import http
+from odoo.http import request
+
+
+class ProductConfiguratorController(http.Controller):
+    @http.route(['/sale_product_configurator/configure'], type='json', auth="user", methods=['POST'])
+    def configure(self, product_id, pricelist_id, **kw):
+        add_qty = int(kw.get('add_qty', 1))
+        product_template = request.env['product.template'].browse(int(product_id))
+        pricelist = self._get_pricelist(pricelist_id)
+
+        product_combination = False
+        attribute_value_ids = set(kw.get('product_template_attribute_value_ids', []))
+        attribute_value_ids |= set(kw.get('product_no_variant_attribute_value_ids', []))
+        if attribute_value_ids:
+            product_combination = request.env['product.template.attribute.value'].browse(attribute_value_ids)
+
+        if pricelist:
+            product_template = product_template.with_context(pricelist=pricelist.id, partner=request.env.user.partner_id)
+
+        return request.env['ir.ui.view'].render_template("sale_product_configurator.configure", {
+            'product': product_template,
+            'pricelist': pricelist,
+            'add_qty': add_qty,
+            'product_combination': product_combination
+        })
+
+    @http.route(['/sale_product_configurator/show_optional_products'], type='json', auth="user", methods=['POST'])
+    def show_optional_products(self, product_id, variant_values, pricelist_id, **kw):
+        pricelist = self._get_pricelist(pricelist_id)
+        return self._show_optional_products(product_id, variant_values, pricelist, False, **kw)
+
+    @http.route(['/sale_product_configurator/optional_product_items'], type='json', auth="user", methods=['POST'])
+    def optional_product_items(self, product_id, pricelist_id, **kw):
+        pricelist = self._get_pricelist(pricelist_id)
+        return self._optional_product_items(product_id, pricelist, **kw)
+
+    def _optional_product_items(self, product_id, pricelist, **kw):
+        add_qty = int(kw.get('add_qty', 1))
+        product = request.env['product.product'].browse(int(product_id))
+
+        parent_combination = product.product_template_attribute_value_ids
+        if product.env.context.get('no_variant_attribute_values'):
+            # Add "no_variant" attribute values' exclusions
+            # They are kept in the context since they are not linked to this product variant
+            parent_combination |= product.env.context.get('no_variant_attribute_values')
+
+        return request.env['ir.ui.view'].render_template("sale_product_configurator.optional_product_items", {
+            'product': product,
+            'parent_name': product.name,
+            'parent_combination': parent_combination,
+            'pricelist': pricelist,
+            'add_qty': add_qty,
+        })
+
+    def _show_optional_products(self, product_id, variant_values, pricelist, handle_stock, **kw):
+        product = request.env['product.product'].browse(int(product_id))
+        combination = request.env['product.template.attribute.value'].browse(variant_values)
+        has_optional_products = product.optional_product_ids.filtered(lambda p: p._is_add_to_cart_possible(combination))
+
+        if not has_optional_products:
+            return False
+
+        add_qty = int(kw.get('add_qty', 1))
+
+        no_variant_attribute_values = combination.filtered(
+            lambda product_template_attribute_value: product_template_attribute_value.attribute_id.create_variant == 'no_variant'
+        )
+        if no_variant_attribute_values:
+            product = product.with_context(no_variant_attribute_values=no_variant_attribute_values)
+
+        return request.env['ir.ui.view'].render_template("sale_product_configurator.optional_products_modal", {
+            'product': product,
+            'combination': combination,
+            'add_qty': add_qty,
+            'parent_name': product.name,
+            'variant_values': variant_values,
+            'pricelist': pricelist,
+            'handle_stock': handle_stock,
+        })
+
+    def _get_pricelist(self, pricelist_id, pricelist_fallback=False):
+        return request.env['product.pricelist'].browse(int(pricelist_id or 0))
diff --git a/addons/sale_product_configurator/data/sale_demo.xml b/addons/sale_product_configurator/data/sale_demo.xml
new file mode 100644
index 0000000000000..00683af885504
--- /dev/null
+++ b/addons/sale_product_configurator/data/sale_demo.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data noupdate="1">
+        <record id="product_product_1_product_template" model="product.template">
+            <field name="name">Chair floor protection</field>
+            <field name="categ_id" ref="product.product_category_5"/>
+            <field name="list_price">12.0</field>
+            <field name="weight">0.01</field>
+            <field name="uom_id" ref="uom.product_uom_unit"/>
+            <field name="uom_po_id" ref="uom.product_uom_unit"/>
+            <field name="description_sale">Office chairs can harm your floor: protect it.</field>
+            <field name="image" type="base64" file="sale/static/img/floor_protection-image.png"/>
+        </record>
+
+        <record id="product.product_product_4_product_template" model="product.template">
+            <field name="optional_product_ids" eval="[(6,0,[ref('product.product_product_11_product_template')])]"/>
+        </record>
+        <record id="product.product_product_11_product_template" model="product.template">
+            <field name="optional_product_ids" eval="[(6,0,[ref('product_product_1_product_template')])]"/>
+        </record>
+        <record id="product.product_product_13_product_template" model="product.template">
+            <field name="optional_product_ids" eval="[(6,0,[ref('product.product_product_11_product_template')])]"/>
+        </record>
+    </data>
+</odoo>
diff --git a/addons/sale_product_configurator/models/__init__.py b/addons/sale_product_configurator/models/__init__.py
new file mode 100644
index 0000000000000..3873985e687ab
--- /dev/null
+++ b/addons/sale_product_configurator/models/__init__.py
@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+
+from . import sale_order_line
+from . import product
diff --git a/addons/sale_product_configurator/models/product.py b/addons/sale_product_configurator/models/product.py
new file mode 100644
index 0000000000000..612c14aaacc77
--- /dev/null
+++ b/addons/sale_product_configurator/models/product.py
@@ -0,0 +1,49 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import fields, models, api
+
+
+class ProductTemplate(models.Model):
+    _inherit = 'product.template'
+
+    optional_product_ids = fields.Many2many(
+        'product.template', 'product_optional_rel', 'src_id', 'dest_id',
+        string='Optional Products', help="Optional Products are suggested "
+        "whenever the customer hits *Add to Cart* (cross-sell strategy, "
+        "e.g. for computers: warranty, software, etc.).")
+    has_configurable_attributes = fields.Boolean("Is a configurable product", compute='_compute_has_configurable_attributes', store=True)
+
+    @api.multi
+    @api.depends('attribute_line_ids.value_ids.is_custom', 'attribute_line_ids.attribute_id.create_variant')
+    def _compute_has_configurable_attributes(self):
+        """ A product is considered configurable if:
+        - It has dynamic attributes
+        - It has any attribute line with at least 2 attribute values configured
+        - It has at least one custom attribute value """
+        for product in self:
+            product.has_configurable_attributes = any(attribute.create_variant == 'dynamic' for attribute in product.mapped('attribute_line_ids.attribute_id')) \
+                or any(len(attribute_line_id.value_ids) >= 2 for attribute_line_id in product.attribute_line_ids) \
+                or any(attribute_value.is_custom for attribute_value in product.mapped('attribute_line_ids.value_ids'))
+
+    def get_single_product_variant(self):
+        """ Method used by the product configurator to check if the product is configurable or not.
+
+        We need to open the product configurator if the product:
+        - is configurable (see has_configurable_attributes)
+        - has optional products """
+        self.ensure_one()
+
+        if self.product_variant_count == 1 and not self.has_configurable_attributes:
+            has_optional_products = False
+            for optional_product in self.product_variant_id.optional_product_ids:
+                if optional_product.has_dynamic_attributes() or optional_product._get_possible_variants(self.product_variant_id.product_template_attribute_value_ids):
+                    has_optional_products = True
+                    break
+
+            return {
+                'product_id': self.product_variant_id.id,
+                'has_optional_products': has_optional_products
+            }
+
+        return None
diff --git a/addons/sale_product_configurator/models/sale_order_line.py b/addons/sale_product_configurator/models/sale_order_line.py
new file mode 100644
index 0000000000000..c081d14cced6f
--- /dev/null
+++ b/addons/sale_product_configurator/models/sale_order_line.py
@@ -0,0 +1,12 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import fields, models
+
+
+class SaleOrderLine(models.Model):
+    _inherit = "sale.order.line"
+
+    product_template_id = fields.Many2one('product.template', string='Product Template', related="product_id.product_tmpl_id", domain=[('sale_ok', '=', True)])
+    is_configurable_product = fields.Boolean('Is the product configurable?', related="product_template_id.has_configurable_attributes")
+    product_template_attribute_value_ids = fields.Many2many(related='product_id.product_template_attribute_value_ids', readonly=True)
diff --git a/addons/sale_product_configurator/static/src/js/product_configurator_controller.js b/addons/sale_product_configurator/static/src/js/product_configurator_controller.js
new file mode 100644
index 0000000000000..1b162f3f301f1
--- /dev/null
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_controller.js
@@ -0,0 +1,311 @@
+odoo.define('sale_product_configurator.ProductConfiguratorFormController', function (require) {
+"use strict";
+
+var core = require('web.core');
+var _t = core._t;
+var FormController = require('web.FormController');
+var OptionalProductsModal = require('sale_product_configurator.OptionalProductsModal');
+
+var ProductConfiguratorFormController = FormController.extend({
+    custom_events: _.extend({}, FormController.prototype.custom_events, {
+        field_changed: '_onFieldChanged',
+        handle_add: '_handleAdd'
+    }),
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            self.$el.addClass('o_product_configurator');
+        });
+    },
+    /**
+     * We need to first load the template of the selected product and then render the content
+     * to avoid a flicker when the modal is opened.
+     *
+     * @override
+     */
+    willStart: function (){
+        var def = this._super.apply(this, arguments);
+        if (this.initialState.data.product_template_id) {
+            return this._configureProduct(
+                this.initialState.data.product_template_id.data.id
+            ).then(function () {
+                return def;
+            });
+        }
+
+        return def;
+    },
+    /**
+     * Showing this window is useless for configuratorMode 'options' as this form view
+     * is used as a bridge between SO lines and optional products.
+     *
+     * Placed here because it's the only method that is called after the modal is rendered.
+     *
+     * @override
+     */
+    renderButtons: function () {
+        this._super.apply(this, arguments);
+
+        if (this.renderer.state.context.configuratorMode === 'options') {
+            this.$el.closest('.modal').addClass('d-none');
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+
+    /**
+    * We need to override the default click behavior for our "Add" button
+    * because there is a possibility that this product has optional products.
+    * If so, we need to display an extra modal to choose the options.
+    *
+    * @override
+    */
+    _onButtonClicked: function (event) {
+        if (event.stopPropagation){
+            event.stopPropagation();
+        }
+        var attrs = event.data.attrs;
+        if (attrs.special === 'cancel') {
+            this._super.apply(this, arguments);
+        } else {
+            if (!this.$el
+                    .parents('.modal')
+                    .find('.o_sale_product_configurator_add')
+                    .hasClass('disabled')){
+                this._handleAdd();
+            }
+        }
+    },
+    /**
+     * This is overridden to allow catching the "select" event on our product template select field.
+     *
+     * @override
+     * @private
+     */
+    _onFieldChanged: function (event) {
+        this._super.apply(this, arguments);
+
+        var self = this;
+        var product_id = event.data.changes.product_template_id.id;
+
+        // check to prevent traceback when emptying the field
+        if (!product_id) {
+            return;
+        }
+
+        this._configureProduct(event.data.changes.product_template_id.id)
+            .then(function (){
+                self.renderer.renderConfigurator(self.renderer.configuratorHtml);
+            });
+    },
+
+    /**
+     * Renders the "variants" part of the wizard
+     *
+     * @param {integer} productTemplateId
+     */
+    _configureProduct: function (productTemplateId) {
+        var self = this;
+        var data = this.renderer.state.data;
+        return this._rpc({
+            route: '/sale_product_configurator/configure',
+            params: {
+                product_id: productTemplateId,
+                pricelist_id: this.renderer.pricelistId,
+                add_qty: data.quantity,
+                product_template_attribute_value_ids: this._getAttributeValueIds(
+                    data.product_template_attribute_value_ids
+                ),
+                product_no_variant_attribute_value_ids: this._getAttributeValueIds(
+                    data.product_no_variant_attribute_value_ids
+                )
+            }
+        }).then(function (configurator) {
+            self.renderer.configuratorHtml = configurator;
+        });
+    },
+    /**
+    * When the user adds a product that has optional products, we need to display
+    * a window to allow the user to choose these extra options.
+    *
+    * This will also create the product if it's in "dynamic" mode
+    * (see product_attribute.create_variant)
+    *
+    * If "self.renderer.state.context.configuratorMode" is 'edit', this will only send
+    * the main product with its changes.
+    *
+    * As opposed to the 'add' mode that will add the main product AND all the configured optional products.
+    *
+    * A third mode, 'options', is available for products that don't have a configuration but have
+    * optional products to select. This will bypass the configuration step and open the
+    * options modal directly.
+    *
+    * @private
+    */
+    _handleAdd: function () {
+        var self = this;
+        var $modal = this.$el;
+        var productSelector = [
+            'input[type="hidden"][name="product_id"]',
+            'input[type="radio"][name="product_id"]:checked'
+        ];
+
+        var productId = parseInt($modal.find(productSelector.join(', ')).first().val(), 10);
+        var productTemplateId = $modal.find('.product_template_id').val();
+        this.renderer.selectOrCreateProduct(
+            $modal,
+            productId,
+            productTemplateId,
+            false
+        ).then(function (productId) {
+            $modal.find(productSelector.join(', ')).val(productId);
+
+            var variantValues = self
+                .renderer
+                .getSelectedVariantValues($modal.find('.js_product'));
+
+            var productCustomVariantValues = self
+                .renderer
+                .getCustomVariantValues($modal.find('.js_product'));
+
+            var noVariantAttributeValues = self
+                .renderer
+                .getNoVariantAttributeValues($modal.find('.js_product'));
+
+            self.rootProduct = {
+                product_id: productId,
+                product_template_id: parseInt(productTemplateId),
+                quantity: parseFloat($modal.find('input[name="add_qty"]').val() || 1),
+                variant_values: variantValues,
+                product_custom_attribute_values: productCustomVariantValues,
+                no_variant_attribute_values: noVariantAttributeValues
+            };
+
+            if (self.renderer.state.context.configuratorMode === 'edit') {
+                // edit mode only takes care of main product
+                self._onAddRootProductOnly();
+                return;
+            }
+
+            self.optionalProductsModal = new OptionalProductsModal($('body'), {
+                rootProduct: self.rootProduct,
+                pricelistId: self.renderer.pricelistId,
+                okButtonText: _t('Confirm'),
+                cancelButtonText: _t('Back'),
+                title: _t('Configure'),
+                context: self.initialState.context,
+                previousModalHeight: self.$el.closest('.modal-content').height()
+            }).open();
+
+            self.optionalProductsModal.on('options_empty', null,
+                // no optional products found for this product, only add the root product
+                self._onAddRootProductOnly.bind(self));
+
+            self.optionalProductsModal.on('update_quantity', null,
+                self._onOptionsUpdateQuantity.bind(self));
+
+            self.optionalProductsModal.on('confirm', null,
+                self._onModalConfirm.bind(self));
+
+            self.optionalProductsModal.on('closed', null,
+                self._onModalClose.bind(self));
+        });
+    },
+
+    /**
+     * Add root product only and forget optional products.
+     * Used when product has no optional products and in 'edit' mode.
+     *
+     * @private
+     */
+    _onAddRootProductOnly: function () {
+        this._addProducts([this.rootProduct]);
+    },
+
+    /**
+     * Add all selected products
+     *
+     * @private
+     */
+    _onModalConfirm: function () {
+        this._wasConfirmed = true;
+        this._addProducts(this.optionalProductsModal.getSelectedProducts());
+    },
+
+    /**
+     * When the optional products modal is closed (and not confirmed) on 'options' mode,
+     * this window should also be closed immediately.
+     *
+     * @private
+     */
+    _onModalClose: function () {
+        if (this.renderer.state.context.configuratorMode === 'options'
+            && this._wasConfirmed !== true) {
+            this._onAddRootProductOnly();
+        }
+    },
+
+    /**
+     * Update product configurator form
+     * when quantity is updated in the optional products window
+     *
+     * @private
+     * @param {integer} quantity
+     */
+    _onOptionsUpdateQuantity: function (quantity) {
+        this.$el
+            .find('input[name="add_qty"]')
+            .val(quantity)
+            .trigger('change');
+    },
+
+    /**
+    * This triggers the close action for the window and
+    * adds the product as the "infos" parameter.
+    * It will allow the caller (typically the product_configurator widget) of this window
+    * to handle the added products.
+    *
+    * @private
+    * @param {Array} products the list of added products
+    *   {integer} products.product_id: the id of the product
+    *   {integer} products.quantity: the added quantity for this product
+    *   {Array} products.product_custom_attribute_values:
+    *     see variant_mixin.getCustomVariantValues
+    *   {Array} products.no_variant_attribute_values:
+    *     see variant_mixin.getNoVariantAttributeValues
+    */
+    _addProducts: function (products) {
+        this.do_action({type: 'ir.actions.act_window_close', infos: {
+            mainProduct: products[0],
+            options: products.slice(1)
+        }});
+    },
+    /**
+     * Extracts the ids from the passed attributeValueIds and returns them
+     * as a plain array.
+     *
+     * @param {Array} attributeValueIds
+     */
+    _getAttributeValueIds(attributeValueIds) {
+        if (!attributeValueIds || attributeValueIds.length === 0){
+            return false;
+        }
+
+        var result = [];
+        _.each(attributeValueIds.data, function (attributeValue) {
+            result.push(attributeValue.data.id);
+        });
+
+        return result;
+    }
+});
+
+return ProductConfiguratorFormController;
+
+});
diff --git a/addons/sale/static/src/js/product_configurator_modal.js b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
similarity index 86%
rename from addons/sale/static/src/js/product_configurator_modal.js
rename to addons/sale_product_configurator/static/src/js/product_configurator_modal.js
index 3bcebf88725bd..da3ac1d849419 100644
--- a/addons/sale/static/src/js/product_configurator_modal.js
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
@@ -1,41 +1,33 @@
-odoo.define('sale.OptionalProductsModal', function (require) {
+odoo.define('sale_product_configurator.OptionalProductsModal', function (require) {
     "use strict";
 
 var ajax = require('web.ajax');
 var Dialog = require('web.Dialog');
 var ServicesMixin = require('web.ServicesMixin');
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
+var VariantMixin = require('sale.VariantMixin');
 
-var productNameMap = {};
 var optionalProductsMap = {};
 
-var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixin, {
-    events:  _.extend({}, Dialog.prototype.events, ProductConfiguratorMixin.events, {
+var OptionalProductsModal = Dialog.extend(ServicesMixin, VariantMixin, {
+    events:  _.extend({}, Dialog.prototype.events, VariantMixin.events, {
         'click a.js_add, a.js_remove': '_onAddOrRemoveOption',
-        'change .in_cart.main_product input.js_quantity': '_onChangeQuantity'
+        'change .in_cart.main_product input.js_quantity': '_onChangeQuantity',
+        'change .js_raw_price': '_computePriceTotal'
     }),
     /**
      * Initializes the optional products modal
      *
-     * If the "isWebsite" param is true, will also disable the following events:
-     * - change [data-attribute_exclusions]
-     * - click button.js_add_cart_json
-     *
-     * This has to be done because those events are already registered at the "website_sale"
-     * component level.
-     * This modal is part of the form that has these events registered and we
-     * want to avoid duplicates.
-     *
      * @override
      * @param {$.Element} parent The parent container
      * @param {Object} params
      * @param {integer} params.pricelistId
-     * @param {boolean} params.isWebsite If we're on a web shop page, we need some
-     *   custom behavior
      * @param {string} params.okButtonText The text to apply on the "ok" button, typically
-     * "Add" for the sale order and "Proceed to checkout" on the web shop
+     *   "Add" for the sale order and "Proceed to checkout" on the web shop
      * @param {string} params.cancelButtonText same as "params.okButtonText" but
      *   for the cancel button
+     * @param {integer} params.previousModalHeight used to configure a min height on the modal-content.
+     *   This parameter is provided by the product configurator to "cover" its modal by making
+     *   this one big enough. This way the user can't see multiple buttons (which can be confusing).
      * @param {Object} params.rootProduct The root product of the optional products window
      * @param {integer} params.rootProduct.product_id
      * @param {integer} params.rootProduct.quantity
@@ -65,13 +57,18 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
         this.rootProduct = params.rootProduct;
         this.container = parent;
         this.pricelistId = params.pricelistId;
-        this.isWebsite = params.isWebsite;
-        this.dialogClass = 'oe_optional_products_modal' + (params.isWebsite ? ' oe_website_sale' : '');
-
-        if (this.isWebsite) {
-            delete this.events['click button.js_add_cart_json'];
-        }
+        this.previousModalHeight = params.previousModalHeight;
+        this.dialogClass = 'oe_optional_products_modal';
         this._productImageField = 'image_medium';
+
+        // reset any previously populated properties maps
+        optionalProductsMap = {};
+
+        this._opened.then(function () {
+            if (self.previousModalHeight) {
+                self.$el.closest('.modal-content').css('min-height', self.previousModalHeight + 'px');
+            }
+        });
     },
      /**
      * @override
@@ -79,7 +76,7 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
     willStart: function () {
         var self = this;
 
-        var uri = this._getUri("/product_configurator/show_optional_products");
+        var uri = this._getUri("/sale_product_configurator/show_optional_products");
         var getModalContent = ajax.jsonRpc(uri, 'call', {
             product_id: self.rootProduct.product_id,
             variant_values: self.rootProduct.variant_values,
@@ -188,6 +185,7 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
             var noVariantAttributeValues = self.getNoVariantAttributeValues($(this));
             products.push({
                 product_id: parseInt($item.find('input.product_id').val()),
+                product_template_id: parseInt($item.find('input.product_template_id').val()),
                 quantity: quantity,
                 product_custom_attribute_values: productCustomVariantValues,
                 no_variant_attribute_values: noVariantAttributeValues
@@ -283,7 +281,7 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
             self._onRemoveOption($modal, $parent ,productTemplateId);
         }
 
-        self.computePriceTotal();
+        self._computePriceTotal();
     },
 
     /**
@@ -303,11 +301,6 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
         $parent.find('.td-qty').addClass('text-center');
         $parent.find('.td-qty').append($parent.find('.optional_product_quantity'));
 
-        // change product name to display_name (containing attribute values) when it's added to cart
-        // the "simple" name is kept into a map to revert to it if the product is removed from the cart
-        productNameMap[productTemplateId] = $parent.find(".product-name").html();
-        $parent.find(".product-name").html($parent.find(".product_display_name").val());
-
         var productCustomVariantValues = self.getCustomVariantValues($parent);
         var noVariantAttributeValues = self.getNoVariantAttributeValues($parent);
         if (productCustomVariantValues || noVariantAttributeValues) {
@@ -361,7 +354,7 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
         ).then(function (productId) {
             $parent.find('.product_id').val(productId);
 
-            ajax.jsonRpc(self._getUri("/product_configurator/optional_product_items"), 'call', {
+            ajax.jsonRpc(self._getUri("/sale_product_configurator/optional_product_items"), 'call', {
                 'product_id': productId,
                 'pricelist_id': self.pricelistId || false,
             }).then(function (addedItem) {
@@ -408,10 +401,6 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
         var $select_options_text = $modal.find('.o_select_options');
         $select_options_text.show();
 
-        // revert back to original product name and clean the entry
-        $parent.find(".product-name").html(productNameMap[productTemplateId]);
-        delete productNameMap[productTemplateId];
-
         this._removeOptionOption($modal, productTemplateId);
 
         $modal.find('tr:last').after($parent);
@@ -447,7 +436,7 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
             .first()
             .text(combination.display_name);
 
-        ProductConfiguratorMixin._onChangeCombination.apply(this, arguments);
+        VariantMixin._onChangeCombination.apply(this, arguments);
     },
     /**
      * When the quantity of the root product is updated, we need to update
@@ -470,11 +459,38 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, ProductConfiguratorMixi
 
         this.rootProduct.quantity = qty;
 
-        if (!this.isWebsite){
+        if (this._triggerPriceUpdateOnChangeQuantity()){
             this.onChangeAddQuantity(ev);
         }
 
         this.trigger('update_quantity', qty);
+    },
+
+    /**
+     * When a product is added or when the quantity is changed,
+     * we need to refresh the total price row
+     */
+    _computePriceTotal: function () {
+        if (this.$modal.find('.js_price_total').length){
+            var price = 0;
+            var quantity = parseInt(this.$modal.find('input[name="add_qty"]').first().val());
+            this.$modal.find('.js_product.in_cart').each(function (){
+                price += parseFloat($(this).find('.js_raw_price').html()) * quantity;
+            });
+
+            this.$modal.find('.js_price_total .oe_currency_value').text(
+                this._priceToStr(parseFloat(price))
+            );
+        }
+    },
+
+    /**
+     * Extension point for website_sale
+     *
+     * @private
+     */
+    _triggerPriceUpdateOnChangeQuantity: function () {
+        return true;
     }
 });
 
diff --git a/addons/sale_product_configurator/static/src/js/product_configurator_renderer.js b/addons/sale_product_configurator/static/src/js/product_configurator_renderer.js
new file mode 100644
index 0000000000000..339254c8e45af
--- /dev/null
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_renderer.js
@@ -0,0 +1,117 @@
+odoo.define('sale_product_configurator.ProductConfiguratorFormRenderer', function (require) {
+"use strict";
+
+var FormRenderer = require('web.FormRenderer');
+var VariantMixin = require('sale.VariantMixin');
+
+var ProductConfiguratorFormRenderer = FormRenderer.extend(VariantMixin, {
+    /**
+     * @override
+     */
+    init: function (){
+        this._super.apply(this, arguments);
+        this.pricelistId = this.state.context.default_pricelist_id || 0;
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            self.$el.append($('<div>', {class: 'configurator_container'}));
+            self.renderConfigurator(self.configuratorHtml);
+            self._checkMode();
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Renders the product configurator within the form
+     *
+     * Will also:
+     *
+     * - add events handling for variant changes
+     * - trigger variant change to compute the price and other
+     *   variant specific changes
+     *
+     * @param {string} configuratorHtml the evaluated template of
+     *   the product configurator
+     */
+    renderConfigurator: function (configuratorHtml) {
+        var $configuratorContainer = this.$('.configurator_container');
+        $configuratorContainer.empty();
+
+        var $configuratorHtml = $(configuratorHtml);
+        $configuratorHtml.appendTo($configuratorContainer);
+
+        this.triggerVariantChange($configuratorContainer);
+        this._applyCustomValues();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * If the configuratorMode in the given context is 'edit', we need to
+     * hide the regular 'Add' button to replace it with an 'EDIT' button.
+     *
+     * If the configuratorMode is set to 'options', we will directly open the
+     * options modal.
+     *
+     * @private
+     */
+    _checkMode: function () {
+        if (this.state.context.configuratorMode === 'edit') {
+            this.$('.o_sale_product_configurator_add').hide();
+            this.$('.o_sale_product_configurator_edit').css('display', 'inline-block');
+        } else if (this.state.context.configuratorMode === 'options') {
+            this.trigger_up('handle_add');
+        }
+    },
+
+    /**
+     * Will fill the custom values input based on the provided initial configuration.
+     *
+     * @private
+     */
+    _applyCustomValues: function () {
+        var self = this;
+        var customValueIds = this.state.data.product_custom_attribute_value_ids;
+        if (customValueIds) {
+            _.each(customValueIds.data, function (customValue) {
+                if (customValue.data.custom_value) {
+                    var attributeValueId = customValue.data.attribute_value_id.data.id;
+                    var $input = self._findRelatedAttributeValueInput(attributeValueId);
+                    $input
+                        .closest('li[data-attribute_id]')
+                        .find('.variant_custom_value')
+                        .val(customValue.data.custom_value);
+                }
+            });
+        }
+    },
+
+    /**
+     * Find the $.Element input/select related to that product.attribute.value
+     *
+     * @param {integer} attributeValueId
+     *
+     * @private
+     */
+    _findRelatedAttributeValueInput: function (attributeValueId) {
+        var selectors = [
+            'ul.js_add_cart_variants input[data-value_id="' + attributeValueId + '"]',
+            'ul.js_add_cart_variants option[data-value_id="' + attributeValueId + '"]'
+        ];
+
+        return this.$(selectors.join(', '));
+    }
+});
+
+return ProductConfiguratorFormRenderer;
+
+});
diff --git a/addons/sale/static/src/js/product_configurator_view.js b/addons/sale_product_configurator/static/src/js/product_configurator_view.js
similarity index 58%
rename from addons/sale/static/src/js/product_configurator_view.js
rename to addons/sale_product_configurator/static/src/js/product_configurator_view.js
index 5a3bb4401be48..aa16a0bb81d92 100644
--- a/addons/sale/static/src/js/product_configurator_view.js
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_view.js
@@ -1,8 +1,8 @@
-odoo.define('sale.ProductConfiguratorFormView', function (require) {
+odoo.define('sale_product_configurator.ProductConfiguratorFormView', function (require) {
 "use strict";
 
-var ProductConfiguratorFormController = require('sale.ProductConfiguratorFormController');
-var ProductConfiguratorFormRenderer = require('sale.ProductConfiguratorFormRenderer');
+var ProductConfiguratorFormController = require('sale_product_configurator.ProductConfiguratorFormController');
+var ProductConfiguratorFormRenderer = require('sale_product_configurator.ProductConfiguratorFormRenderer');
 var FormView = require('web.FormView');
 var viewRegistry = require('web.view_registry');
 
@@ -17,4 +17,4 @@ viewRegistry.add('product_configurator_form', ProductConfiguratorFormView);
 
 return ProductConfiguratorFormView;
 
-});
\ No newline at end of file
+});
diff --git a/addons/sale_product_configurator/static/src/js/product_configurator_widget.js b/addons/sale_product_configurator/static/src/js/product_configurator_widget.js
new file mode 100644
index 0000000000000..977ed70f96132
--- /dev/null
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_widget.js
@@ -0,0 +1,434 @@
+odoo.define('sale_product_configurator.product_configurator', function (require) {
+var relationalFields = require('web.relational_fields');
+var FieldsRegistry = require('web.field_registry');
+var core = require('web.core');
+var _t = core._t;
+
+/**
+ * The product configurator widget is a simple FieldMany2One that adds the capability
+ * to configure a product_template_id using the product configurator wizard.
+ *
+ * !!! It should only be used on a product_template_id field !!!
+ */
+var ProductConfiguratorWidget = relationalFields.FieldMany2One.extend({
+    events: _.extend({}, relationalFields.FieldMany2One.prototype.events, {
+        'click .o_edit_product_configuration': '_onEditProductConfiguration'
+    }),
+
+    /**
+     * This method will check if the current product_template set on the SO line is configurable
+     * -> If so, we add a 'Edit Configuration' button next to the dropdown.
+     *
+     * @override
+     */
+    start: function () {
+        var prom = this._super.apply(this, arguments);
+
+        var $inputDropdown = this.$('.o_input_dropdown');
+
+        if (this.recordData.is_configurable_product &&
+            $inputDropdown.length !== 0 &&
+            this.$('.o_edit_product_configuration').length === 0) {
+            var $editConfigurationButton = $('<button>', {
+                type: 'button',
+                class: 'fa fa-pencil btn btn-secondary o_edit_product_configuration',
+                tabindex: '-1',
+                draggable: false,
+                'aria-label': _t('Edit Configuration'),
+                title: _t('Edit Configuration')
+            });
+
+            $inputDropdown.after($editConfigurationButton);
+        }
+        return prom;
+    },
+
+    /**
+     * This method is overridden to check to check if the product_template_id
+     * needs configuration or not:
+     *
+     * - The product_template has only one "product.product" and is not dynamic
+     *   -> Set the product_id on the SO line
+     *   -> If the product has optional products, open the configurator in 'options' mode
+     *
+     * - The product_template is configurable
+     *   -> Open the product configurator wizard and initialize it with
+     *      the provided product_template_id and its current attribute values
+     * @override
+     * @param {OdooEvent} event
+     *   {boolean} event.data.preventProductIdCheck prevent the product configurator widget
+     *     from looping forever when it needs to change the 'product_template_id'
+     *
+     * @private
+     */
+    _onFieldChanged: function (event) {
+        var self = this;
+        self.restoreProductTemplateId = self.recordData.product_template_id;
+
+        this._super.apply(this, arguments);
+
+        var $inputDropdown = this.$('.o_input_dropdown');
+        if (event.data.changes.product_template_id
+            && $inputDropdown.length !== 0 &&
+            this.$('.o_edit_product_configuration').length !== 0){
+            this.$('.o_edit_product_configuration').remove();
+        }
+
+        if (!event.data.changes.product_template_id
+            || event.data.preventProductIdCheck){
+            return;
+        }
+
+        var productTemplateId = event.data.changes.product_template_id.id;
+        if (productTemplateId){
+            this._rpc({
+                model: 'product.template',
+                method: 'get_single_product_variant',
+                args: [
+                    productTemplateId
+                ]
+            }).then(function (result){
+                if (result){
+                    self.trigger_up('field_changed', {
+                        dataPointID: event.data.dataPointID,
+                        changes: {
+                            product_id: {id: result.product_id},
+                            product_custom_attribute_value_ids: {
+                                operation: 'DELETE_ALL'
+                            }
+                        },
+                        onSuccess: function () {
+                            if (result.has_optional_products) {
+                                self._openProductConfigurator({
+                                        configuratorMode: 'options',
+                                        default_pricelist_id: self._getPricelistId(),
+                                        default_product_template_id: productTemplateId
+                                    },
+                                    event.data.dataPointID
+                                );
+                            }
+                        }
+                    });
+
+                    self._onSimpleProductFound(result.product_id, event.data.dataPointID);
+                } else {
+                    self._openProductConfigurator({
+                            configuratorMode: 'add',
+                            default_pricelist_id: self._getPricelistId(),
+                            default_product_template_id: productTemplateId
+                        },
+                        event.data.dataPointID
+                    );
+                }
+            });
+        }
+    },
+
+    /**
+     * Hooking point for other modules
+     *
+     * @param {integer} productId
+     * @param {string} dataPointID
+     *
+     * @private
+     */
+    _onSimpleProductFound: function (productId, dataPointID) {},
+
+    /**
+     * Opens the product configurator to allow configuring the product template
+     * and its various options.
+     *
+     * The configuratorMode param controls how to open the configurator.
+     * - The "add" mode will allow configuring the product template & options.
+     * - The "edit" mode will only allow editing the product template's configuration.
+     * - The "options" mode is a special case where the product configurator is used as a bridge
+     *   between the SO line and the optional products modal. It will hide its window and handle
+     *   the communication between those two.
+     *
+     * When the configuration is canceled (i.e when the product configurator is closed using the
+     * "CANCEL" button or the cross on the top right corner of the window),
+     * the product_template is reset to its previous value if any.
+     *
+     * @param {Object} data various "default_" values
+     *  {string} data.configuratorMode 'add' or 'edit'.
+     * @param {string} dataPointId
+     *
+     * @private
+     */
+    _openProductConfigurator: function (data, dataPointId) {
+        var self = this;
+        this.do_action('sale_product_configurator.sale_product_configurator_action', {
+            additional_context: data,
+            on_close: function (result) {
+                if (result && result !== 'special'){
+                    self._addProducts(result, dataPointId);
+                } else {
+                    if (self.restoreProductTemplateId) {
+                        self.trigger_up('field_changed', {
+                            dataPointID: dataPointId,
+                            preventProductIdCheck: true,
+                            changes: {
+                                product_template_id: self.restoreProductTemplateId.data
+                            }
+                        });
+                    }
+                }
+            }
+        });
+    },
+
+    /**
+     * Opens the product configurator in "edit" mode.
+     * (see '_openProductConfigurator' for more info on the "edit" mode).
+     * The requires to retrieve all the needed data from the SO line
+     * that are kept in the "recordData" object.
+     *
+     * @private
+     */
+    _onEditProductConfiguration: function () {
+        this._openProductConfigurator({
+                configuratorMode: 'edit',
+                default_product_template_id: this.recordData.product_template_id.data.id,
+                default_pricelist_id: this._getPricelistId(),
+                default_product_template_attribute_value_ids: this._convertFromMany2Many(
+                    this.recordData.product_template_attribute_value_ids
+                ),
+                default_product_no_variant_attribute_value_ids: this._convertFromMany2Many(
+                    this.recordData.product_no_variant_attribute_value_ids
+                ),
+                default_product_custom_attribute_value_ids: this._convertFromOne2Many(
+                    this.recordData.product_custom_attribute_value_ids
+                ),
+                default_quantity: this.recordData.product_uom_qty
+            },
+            this.dataPointID
+        );
+    },
+
+    /**
+     * This will first modify the SO line to update all the information coming from
+     * the product configurator using the 'field_changed' event.
+     *
+     * onSuccess from that first method, it will add the optional products to the SO
+     * using the 'add_record' event.
+     *
+     * Doing both at the same time could lead to unordered product_template/options.
+     *
+     * @param {Object} products the products to add to the SO line.
+     *   {Object} products.mainProduct the product_template configured
+     *     with various attribute/custom values
+     *   {Array} products.options the various selected optional products
+     *     with their configuration
+     * @param {string} dataPointId
+     *
+     * @private
+     */
+    _addProducts: function (result, dataPointId) {
+        var self = this;
+        this.trigger_up('field_changed', {
+            dataPointID: dataPointId,
+            preventProductIdCheck: true,
+            changes: this._getMainProductChanges(result.mainProduct),
+            onSuccess: function () {
+                if (result.options) {
+                    var parentList = self.getParent();
+                    self.trigger_up('add_record', {
+                        context: self._productsToRecords(result.options),
+                        forceEditable: 'bottom',
+                        allowWarning: true,
+                        onSuccess: function (){
+                            parentList.unselectRow();
+                        }
+                    });
+                }
+            }
+        });
+    },
+
+    /**
+     * This will convert the result of the product configurator into
+     * "changes" that are understood by the basic_model.js
+     *
+     * For the product_custom_attribute_value_ids, we need to do a DELETE_ALL
+     * command to clean the currently selected values and then a CREATE for every
+     * custom value specified in the configurator.
+     *
+     * For the product_no_variant_attribute_value_ids, we also need to do a DELETE_ALL
+     * command to clean the currently selected values and issue a single ADD_M2M containing
+     * all the ids of the product_attribute_values.
+     *
+     * @param {Object} mainProduct
+     *
+     * @private
+     */
+    _getMainProductChanges: function (mainProduct) {
+        var result = {
+            product_id: {id: mainProduct.product_id},
+            product_template_id: {id: mainProduct.product_template_id},
+            product_uom_qty: mainProduct.quantity
+        };
+
+        var customAttributeValues = mainProduct.product_custom_attribute_values;
+        var customValuesCommands = [{operation: 'DELETE_ALL'}];
+        if (customAttributeValues && customAttributeValues.length !== 0) {
+            _.each(customAttributeValues, function (customValue) {
+                // FIXME awa: This could be optimized by adding a "disableDefaultGet" to avoid
+                // having multiple default_get calls that are useless since we already
+                // have all the default values locally.
+                // However, this would mean a lot of changes in basic_model.js to handle
+                // those "default_" values and set them on the various fields (text,o2m,m2m,...).
+                // -> This is not considered as worth it right now.
+                customValuesCommands.push({
+                    operation: 'CREATE',
+                    context: [{
+                        default_attribute_value_id: customValue.attribute_value_id,
+                        default_custom_value: customValue.custom_value
+                    }]
+                });
+            });
+        }
+
+        result['product_custom_attribute_value_ids'] = {
+            operation: 'MULTI',
+            commands: customValuesCommands
+        };
+
+        var noVariantAttributeValues = mainProduct.no_variant_attribute_values;
+        var noVariantCommands = [{operation: 'DELETE_ALL'}];
+        if (noVariantAttributeValues && noVariantAttributeValues.length !== 0) {
+            var res_ids = _.map(noVariantAttributeValues, function (noVariantValue) {
+                return {id: parseInt(noVariantValue.value)};
+            });
+
+            noVariantCommands.push({
+                operation: 'ADD_M2M',
+                ids: res_ids
+            });
+        }
+
+        result['product_no_variant_attribute_value_ids'] = {
+            operation: 'MULTI',
+            commands: noVariantCommands
+        };
+
+        return result;
+    },
+
+    /**
+     * Returns the pricelist_id set on the sale_order form
+     *
+     * @private
+     * @returns {integer} pricelist_id's id
+     */
+    _getPricelistId: function () {
+        return this.record.evalContext.parent.pricelist_id;
+    },
+
+    /**
+     * Will map the products to appropriate record objects that are
+     * ready for the default_get.
+     *
+     * @param {Array} products The products to transform into records
+     *
+     * @private
+     */
+    _productsToRecords: function (products) {
+        var records = [];
+        _.each(products, function (product){
+            var record = {
+                default_product_id: product.product_id,
+                default_product_template_id: product.product_template_id,
+                default_product_uom_qty: product.quantity
+            };
+
+            if (product.no_variant_attribute_values) {
+                var default_product_no_variant_attribute_values = [];
+                _.each(product.no_variant_attribute_values, function (attribute_value) {
+                        default_product_no_variant_attribute_values.push(
+                            [4, parseInt(attribute_value.value)]
+                        );
+                });
+                record['default_product_no_variant_attribute_value_ids']
+                    = default_product_no_variant_attribute_values;
+            }
+
+            if (product.product_custom_attribute_values) {
+                var default_custom_attribute_values = [];
+                _.each(product.product_custom_attribute_values, function (attribute_value) {
+                    default_custom_attribute_values.push(
+                            [0, 0, {
+                                attribute_value_id: attribute_value.attribute_value_id,
+                                custom_value: attribute_value.custom_value
+                            }]
+                        );
+                });
+                record['default_product_custom_attribute_value_ids']
+                    = default_custom_attribute_values;
+            }
+
+            records.push(record);
+        });
+
+        return records;
+    },
+
+    /**
+     * Will convert the values contained in the recordData parameter to
+     * a list of '4' operations that can be passed as a 'default_' parameter.
+     *
+     * @param {Object} recordData
+     *
+     * @private
+     */
+    _convertFromMany2Many: function (recordData) {
+        if (recordData) {
+            var convertedValues = [];
+            _.each(recordData.res_ids, function (res_id) {
+                convertedValues.push([4, parseInt(res_id)]);
+            });
+
+            return convertedValues;
+        }
+
+        return null;
+    },
+
+    /**
+     * Will convert the values contained in the recordData parameter to
+     * a list of '0' or '4' operations (based on wether the record is already persisted or not)
+     * that can be passed as a 'default_' parameter.
+     *
+     * @param {Object} recordData
+     *
+     * @private
+     */
+    _convertFromOne2Many: function (recordData) {
+        if (recordData) {
+            var convertedValues = [];
+            _.each(recordData.res_ids, function (res_id) {
+                if (isNaN(res_id)){
+                    _.each(recordData.data, function (record) {
+                        if (record.ref === res_id) {
+                            convertedValues.push([0, 0, {
+                                attribute_value_id: record.data.attribute_value_id.data.id,
+                                custom_value: record.data.custom_value
+                            }]);
+                        }
+                    });
+                } else {
+                    convertedValues.push([4, res_id]);
+                }
+            });
+
+            return convertedValues;
+        }
+
+        return null;
+    }
+});
+
+FieldsRegistry.add('product_configurator', ProductConfiguratorWidget);
+
+return ProductConfiguratorWidget;
+
+});
diff --git a/addons/sale_product_configurator/static/src/js/tour.js b/addons/sale_product_configurator/static/src/js/tour.js
new file mode 100644
index 0000000000000..a9ade92928e1a
--- /dev/null
+++ b/addons/sale_product_configurator/static/src/js/tour.js
@@ -0,0 +1,18 @@
+odoo.define("sale_product_configurator.tour", function (require) {
+"use strict";
+/**
+ * We need to replace the trigger of the product selection step because the
+ * "sale_product_configurator" module replaces the "product_id" field with
+ * a "product_template_id" field.
+ */
+var tour = require('web_tour.tour');
+require('sale.tour');
+
+var productSelectionStepIndex = _.findIndex(tour.tours.sale_tour.steps, function (step) {
+    return (step.id === 'product_selection_step');
+});
+
+var productSelectionStep = tour.tours.sale_tour.steps[productSelectionStepIndex];
+productSelectionStep.trigger = ".o_form_editable .o_field_many2one[name='product_template_id']";
+
+});
diff --git a/addons/sale_product_configurator/static/src/scss/product_configurator_widget.scss b/addons/sale_product_configurator/static/src/scss/product_configurator_widget.scss
new file mode 100644
index 0000000000000..d70da1f7d882d
--- /dev/null
+++ b/addons/sale_product_configurator/static/src/scss/product_configurator_widget.scss
@@ -0,0 +1,9 @@
+.o_list_view {
+    .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier) {
+        .o_field_widget .o_edit_product_configuration {
+            padding: 0;
+            background-color: inherit;
+            margin-left: 3px;
+        }
+    }
+}
diff --git a/addons/sale_product_configurator/static/tests/product_configurator.test.js b/addons/sale_product_configurator/static/tests/product_configurator.test.js
new file mode 100644
index 0000000000000..757e2f52743da
--- /dev/null
+++ b/addons/sale_product_configurator/static/tests/product_configurator.test.js
@@ -0,0 +1,262 @@
+odoo.define('sale.product.configurator.tests', function (require) {
+"use strict";
+
+var FormView = require('web.FormView');
+var ProductConfiguratorFormView = require('sale_product_configurator.ProductConfiguratorFormView');
+var testUtils = require('web.test_utils');
+var createView = testUtils.createView;
+
+var getArch = function (){
+    return '<form>' +
+    '<sheet>' +
+    '<field name="pricelist_id" widget="selection" />' +
+    '<field name="sale_order_line" widget="section_and_note_one2many">' +
+    '<tree editable="top"><control>' +
+    '<create string="Add a product"/>' +
+    '<create string="Add a section" context="{\'default_display_type\': \'line_section\'}"/>' +
+    '<create string="Add a note" context="{\'default_display_type\': \'line_note\'}"/>' +
+    '</control>' +
+    '<field name="product_id" invisible="1"/>' +
+    '<field name="product_template_id" widget="product_configurator"/>' +
+    '<field name="product_uom_qty"/>' +
+    '<field name="product_custom_attribute_value_ids" invisible="1"/>' +
+    '</tree>' +
+    '</field>' +
+    '</sheet>' +
+    '</form>';
+};
+
+QUnit.module('Product Configurator', {
+    beforeEach: function () {
+        this.data = {
+            product_template: {
+                fields: {
+                    id: {type: 'integer'}
+                },
+                records: [{
+                    id: 42,
+                    display_name: "Customizable Desk"
+                }]
+            },
+            product: {
+                fields: {
+                    id: {type: 'integer'}
+                },
+                records: [{
+                    id: 1,
+                    display_name: "Customizable Desk (1)"
+                }, {
+                    id: 2,
+                    display_name: "Customizable Desk (2)"
+                }]
+            },
+            sale_order: {
+                fields: {
+                    id: {type: 'integer'},
+                    pricelist_id: {
+                        string: 'Pricelist',
+                        type: 'one2many',
+                        relation: 'pricelist'
+                    },
+                    sale_order_line: {
+                        string: 'lines',
+                        type: 'one2many',
+                        relation: 'sale_order_line'
+                    },
+                }
+            },
+            sale_order_line: {
+                fields: {
+                    product_template_id: {
+                        string: 'product template',
+                        type: 'many2one',
+                        relation: 'product_template'
+                    },
+                    product_id: {
+                        string: 'product',
+                        type: 'many2one',
+                        relation: 'product'
+                    },
+                    product_custom_attribute_value_ids: {
+                        string: 'product_custom_attribute_values',
+                        type: 'one2many',
+                        relation: 'product_custom_attribute_value'
+                    },
+                    product_uom_qty: {type: 'integer'}
+                }
+            },
+            product_custom_attribute_value: {
+                fields: {
+                    id: {type: 'integer'},
+                    sale_order_line_id: {
+                        string: 'sale order line',
+                        type: 'many2one',
+                        relation: 'sale_order_line'
+                    }
+                }
+            },
+            sale_product_configurator: {
+                fields: {
+                    product_template_id: {
+                        string: 'product',
+                        type: 'many2one',
+                        relation: 'product_template'
+                    },
+                    product_template_attribute_value_ids: {
+                        type: 'many2many',
+                        relation: 'product_template_attribute_value'
+                    },
+                    product_no_variant_attribute_value_ids: {
+                        type: 'many2many',
+                        relation: 'product_template_attribute_value'
+                    },
+                    product_custom_attribute_value_ids: {
+                        type: 'many2many',
+                        relation: 'product_attribute_custom_value'
+                    }
+                },
+                records: [{
+                    product_template_id: 42
+                }]
+            },
+            product_template_attribute_value: {
+                fields: {
+                    id: {type: 'integer'}
+                }
+            },
+            product_attribute_custom_value: {
+                fields: {
+                    id: {type: 'integer'}
+                }
+            },
+            pricelist: {
+                fields: {
+                    id: {type: 'integer'}
+                }
+            }
+        };
+    }
+}, function (){
+    QUnit.test('Select a non configurable product template and verify that the product_id is correctly set', async function (assert) {
+        assert.expect(2);
+
+        var form = await createView({
+            View: FormView,
+            model: 'sale_order',
+            data: this.data,
+            arch: getArch(),
+            mockRPC: function (route, params) {
+                if (params.method === 'get_single_product_variant') {
+                    assert.ok(true);
+                    return Promise.resolve({product_id: 2});
+                }
+                // FIXME awa: this shouldn't be here since the read is done in 'event_sale'
+                // But at the moment there is no easy way to solve such cross module 'include' issues
+                if (params.method === 'read') {
+                    return Promise.resolve(false);
+                }
+                return this._super.apply(this, arguments);
+            },
+            intercepts: {
+                do_action: function (ev) {
+                    if (ev.data.action === 'sale_product_configurator.sale_product_configurator_action') {
+                        assert.ok(false, "Should not execute the configure action");
+                    }
+                },
+            }
+        });
+
+        await testUtils.dom.click(form.$("a:contains('Add a product')"));
+        await testUtils.fields.many2one.searchAndClickItem("product_template_id", {item: 'Customizable Desk'});
+        // check that product_id is correctly set to 2
+        assert.strictEqual(form.renderer.state.data.sale_order_line.data[0].data.product_id.data.id, 2);
+        form.destroy();
+    });
+
+    QUnit.test('Select a configurable product template and verify that the product configurator is opened', async function (assert) {
+        assert.expect(2);
+
+        var form = await createView({
+            View: FormView,
+            model: 'sale_order',
+            data: this.data,
+            arch: getArch(),
+            mockRPC: function (route, params) {
+                if (params.method === 'get_single_product_variant') {
+                    assert.ok(true);
+                    return Promise.resolve(false);
+                }
+                return this._super.apply(this, arguments);
+            },
+            intercepts: {
+                do_action: function (ev) {
+                    if (ev.data.action === 'sale_product_configurator.sale_product_configurator_action') {
+                        assert.ok(true);
+                    }
+                },
+            }
+        });
+
+        await testUtils.dom.click(form.$("a:contains('Add a product')"));
+        await testUtils.fields.many2one.searchAndClickItem("product_template_id", {item: 'Customizable Desk'});
+        form.destroy();
+    });
+
+    QUnit.test('trigger_up the "add_record" event and checks that rows are correctly added to the list', async function (assert) {
+        assert.expect(1);
+
+        var form = await createView({
+            View: FormView,
+            model: 'sale_order',
+            data: this.data,
+            arch: getArch()
+        });
+
+        var list = form.renderer.allFieldWidgets[form.handle][1];
+
+        list.trigger_up('add_record', {
+            context: [{default_product_id: 1, default_product_uom_qty: 2}, {default_product_id: 2, default_product_uom_qty: 3}],
+            forceEditable: "bottom" ,
+            allowWarning: true
+        });
+        await testUtils.nextTick();
+
+        assert.containsN(list, "tr.o_data_row", 2);
+        form.destroy();
+    });
+
+    QUnit.test('Select a product in the list and check for template loading', async function (assert){
+        assert.expect(1);
+
+        var product_configurator_form = await createView({
+            View: ProductConfiguratorFormView,
+            model: 'sale_product_configurator',
+            data: this.data,
+            arch:
+                '<form js_class="product_configurator_form">' +
+                    '<group>' +
+                        '<field name="product_template_id" class="oe_product_configurator_product_template_id" />' +
+                        '<field name="product_template_attribute_value_ids" invisible="1" />' +
+                        '<field name="product_no_variant_attribute_value_ids" invisible="1" />' +
+                        '<field name="product_custom_attribute_value_ids" invisible="1" />' +
+                    '</group>' +
+                    '<footer>' +
+                        '<button string="Add" class="btn-primary o_sale_product_configurator_add disabled"/>' +
+                        '<button string="Cancel" class="btn-secondary" special="cancel"/>' +
+                    '</footer>' +
+                '</form>',
+                mockRPC: function (route) {
+                    if (route === '/sale_product_configurator/configure') {
+                        assert.ok(true);
+                        return Promise.resolve('<div>plop</div>');
+                    }
+                    return this._super.apply(this, arguments);
+                }
+        });
+        await testUtils.dom.click(product_configurator_form.$('.o_input'));
+        await testUtils.dom.click($("ul.ui-autocomplete li a:contains('Customizable Desk')").mouseenter());
+        product_configurator_form.destroy();
+    });
+});
+
+});
diff --git a/addons/sale_management/static/tests/product_configurator_advanced_test_ui.js b/addons/sale_product_configurator/static/tests/product_configurator_advanced_test_ui.js
similarity index 93%
rename from addons/sale_management/static/tests/product_configurator_advanced_test_ui.js
rename to addons/sale_product_configurator/static/tests/product_configurator_advanced_test_ui.js
index 074da95f06e0a..2f292161d48f8 100644
--- a/addons/sale_management/static/tests/product_configurator_advanced_test_ui.js
+++ b/addons/sale_product_configurator/static/tests/product_configurator_advanced_test_ui.js
@@ -24,15 +24,20 @@ tour.register('sale_product_configurator_advanced_tour', {
     trigger: ".ui-menu-item > a:contains('Tajine Saucisse')",
     auto: true,
 }, {
-    trigger: "a:contains('Configure a product')",
+    trigger: "a:contains('Add a product')",
     extra_trigger: ".o_field_widget[name=pricelist_id] > .o_external_button", // Wait for pricelist (onchange_partner_id)
 }, {
-    trigger: '.o_product_configurator .o_input_dropdown input',
-    run: 'click'
+    trigger: 'div[name="product_template_id"] input',
+    run: function (){
+        var $input = $('div[name="product_template_id"] input');
+        $input.click();
+        $input.val('Custo');
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    }
 }, {
-    trigger: 'li a:contains("Customizable Desk")',
-    in_modal: false,
-    extra_trigger: 'ul.ui-autocomplete',
+    trigger: 'ul.ui-autocomplete a:contains("Customizable Desk")',
     run: 'click'
 }, {
     trigger: 'span:contains("Custom")',
diff --git a/addons/sale_product_configurator/static/tests/product_configurator_edition_test_ui.js b/addons/sale_product_configurator/static/tests/product_configurator_edition_test_ui.js
new file mode 100644
index 0000000000000..b80e7888acdd6
--- /dev/null
+++ b/addons/sale_product_configurator/static/tests/product_configurator_edition_test_ui.js
@@ -0,0 +1,160 @@
+odoo.define('sale.product_configurator_edition_tour', function (require) {
+"use strict";
+
+var tour = require('web_tour.tour');
+
+tour.register('sale_product_configurator_edition_tour', {
+    url: "/web",
+    test: true,
+}, [tour.STEPS.SHOW_APPS_MENU_ITEM, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'community'
+}, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'enterprise'
+}, {
+    trigger: ".o_list_button_add",
+    extra_trigger: ".o_sale_order"
+}, {
+    trigger: "a:contains('Add a product')"
+}, {
+    trigger: 'div[name="product_template_id"] input',
+    run: function (){
+        var $input = $('div[name="product_template_id"] input');
+        $input.click();
+        $input.val('Custo');
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    }
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("Customizable Desk")',
+    run: 'click'
+}, {
+    trigger: '.configurator_container span:contains("Steel")',
+    run: function () {
+        $('input.product_id').change(function () {
+            $('.o_sale_product_configurator_add').attr('request_count', 1);
+        });
+    }
+}, {
+    trigger: '.configurator_container span:contains("Aluminium")'
+}, {
+    trigger: '.o_sale_product_configurator_add[request_count="1"]',
+    run: function (){} // used to sync with "get_combination_info" completion
+}, {
+    trigger: '.o_sale_product_configurator_add:not(.disabled)'
+}, {
+    trigger: 'button span:contains(Confirm)',
+    extra_trigger: '.oe_optional_products_modal',
+    run: 'click'
+}, {
+    trigger: 'td.o_data_cell:contains("Customizable Desk (Aluminium, White)")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check added product
+}, {
+    trigger: 'td.o_product_configurator_cell',
+}, {
+    trigger: '.o_edit_product_configuration',
+}, {
+    trigger: '.configurator_container li.js_attribute_value:has(span:contains("Aluminium")) input:checked',
+    run: function (){} // check updated legs
+}, {
+    trigger: 'span.oe_currency_value:contains("800")',
+    run: function (){} // check updated price
+}, {
+    trigger: '.configurator_container span:contains("Steel")',
+    run: function () {
+        $('input.product_id').change(function () {
+            if ($('.o_sale_product_configurator_edit').attr('request_count')) {
+                $('.o_sale_product_configurator_edit').attr('request_count',
+                    parseInt($('.o_sale_product_configurator_edit').attr('request_count')) + 1);
+            } else {
+                $('.o_sale_product_configurator_edit').attr('request_count', 1);
+            }
+        });
+    }
+}, {
+    trigger: '.configurator_container span:contains("Custom")',
+    run: function () {
+        // FIXME awa: since jquery3 update it doesn't "click"
+        // on the element without this run (and 'run: "click"'
+        // doesn't work either)
+        $('.configurator_container span:contains("Custom")').click();
+    }
+}, {
+    trigger: '.configurator_container .variant_custom_value',
+    run: 'text nice custom value'
+}, {
+    trigger: 'input[data-value_name="Black"]',
+    run: 'click'
+}, {
+    trigger: '.o_sale_product_configurator_edit[request_count="2"]',
+    run: function (){} // used to sync with "get_combination_info" completion
+}, {
+    trigger: '.o_sale_product_configurator_edit',
+}, {
+    trigger: 'td.o_data_cell:contains("Customizable Desk (Custom, Black)")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check updated product
+}, {
+    trigger: 'td.o_data_cell:contains("Custom: nice custom value")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check custom value
+}, {
+    trigger: 'td.o_product_configurator_cell',
+}, {
+    trigger: '.o_edit_product_configuration',
+}, {
+    trigger: '.configurator_container .variant_custom_value',
+    run: 'text another nice custom value'
+}, {
+    trigger: '.o_sale_product_configurator_edit',
+}, {
+    trigger: 'td.o_data_cell:contains("Custom: another nice custom value")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check custom value
+}, {
+    trigger: 'td.o_product_configurator_cell',
+}, {
+    trigger: '.o_edit_product_configuration',
+}, {
+    trigger: '.configurator_container span:contains("Steel")',
+    run: function () {
+        $('input.product_id').change(function () {
+            $('.o_sale_product_configurator_edit').attr('request_count', 1);
+        });
+    }
+}, {
+    trigger: '.configurator_container span:contains("Steel")',
+    run: function () {
+        // FIXME awa: since jquery3 update it doesn't "click"
+        // on the element without this run (and 'run: "click"'
+        // doesn't work either)
+        $('.configurator_container span:contains("Steel")').click();
+    }
+}, {
+    trigger: '.o_sale_product_configurator_edit[request_count="1"]',
+    run: function (){} // used to sync with "get_combination_info" completion
+}, {
+    trigger: '.configurator_container button.js_add_cart_json:has(.fa-plus)',
+}, {
+    trigger: '.o_sale_product_configurator_edit',
+}, {
+    trigger: 'td.o_data_cell:contains("2.000")',
+    run: function (){} // check quantity
+}, {
+    trigger: 'td.o_product_configurator_cell',
+    run: function () {
+        // used to check that the description does not contain a custom value anymore
+        if ($('td.o_data_cell:contains("Custom: another nice custom value")').length === 0){
+            $('td.o_data_cell:contains("Customizable Desk (Steel, Black)")').html('tour success');
+        }
+    }
+}, {
+    trigger: 'td.o_data_cell:contains("tour success")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){}
+}]);
+
+});
diff --git a/addons/sale_product_configurator/static/tests/product_configurator_optional_products_test_ui.js b/addons/sale_product_configurator/static/tests/product_configurator_optional_products_test_ui.js
new file mode 100644
index 0000000000000..8fe2b3d207e4d
--- /dev/null
+++ b/addons/sale_product_configurator/static/tests/product_configurator_optional_products_test_ui.js
@@ -0,0 +1,51 @@
+odoo.define('sale.product_configurator_optional_products_tour', function (require) {
+"use strict";
+
+var tour = require('web_tour.tour');
+
+tour.register('sale_product_configurator_optional_products_tour', {
+    url: "/web",
+    test: true,
+}, [tour.STEPS.SHOW_APPS_MENU_ITEM, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'community'
+}, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'enterprise'
+}, {
+    trigger: ".o_list_button_add",
+    extra_trigger: ".o_sale_order"
+}, {
+    trigger: "a:contains('Add a product')"
+}, {
+    trigger: 'div[name="product_template_id"] input',
+    run: function (){
+        var $input = $('div[name="product_template_id"] input');
+        $input.click();
+        $input.val('Office Chair Black');
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    }
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("Office Chair Black")',
+    run: 'click'
+}, {
+    trigger: '.js_add'
+}, {
+    trigger: '.js_add_cart_json .fa-plus'
+}, {
+    trigger: 'button span:contains(Confirm)',
+    extra_trigger: '.oe_optional_products_modal',
+    run: 'click'
+}, {
+    trigger: 'tr:has(td.o_data_cell:contains("Office Chair Black")) td.o_data_cell:contains("2.0")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check added product
+}, {
+    trigger: 'tr:has(td.o_data_cell:contains("Chair floor protection")) td.o_data_cell:contains("2.0")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check added product
+}]);
+
+});
diff --git a/addons/sale_management/static/tests/product_configurator_pricelist_test_ui.js b/addons/sale_product_configurator/static/tests/product_configurator_pricelist_test_ui.js
similarity index 87%
rename from addons/sale_management/static/tests/product_configurator_pricelist_test_ui.js
rename to addons/sale_product_configurator/static/tests/product_configurator_pricelist_test_ui.js
index 0cb9b46e530f5..2691000f9bbb9 100644
--- a/addons/sale_management/static/tests/product_configurator_pricelist_test_ui.js
+++ b/addons/sale_product_configurator/static/tests/product_configurator_pricelist_test_ui.js
@@ -40,17 +40,20 @@ tour.STEPS.SHOW_APPS_MENU_ITEM,
     trigger: 'div.o_with_button[name="pricelist_id"]',
     run: function () {},
 }, {
-    content: "open product configurator",
-    trigger: 'a:contains("Configure a product")',
-}, {
-    content: "open product selector",
-    trigger: '.o_product_configurator .o_input_dropdown input',
+    trigger: "a:contains('Add a product')"
+}, {
+    trigger: 'div[name="product_template_id"] input',
+    run: function (){
+        var $input = $('div[name="product_template_id"] input');
+        $input.click();
+        $input.val('Custo');
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    }
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("Customizable Desk")',
     run: 'click'
-}, {
-    content: "select desk",
-    trigger: 'li a:contains("Customizable Desk")',
-    in_modal: false,
-    extra_trigger: 'ul.ui-autocomplete',
 }, {
     content: "check price is correct (USD)",
     trigger: 'span.oe_currency_value:contains("750.00")',
diff --git a/addons/sale_product_configurator/static/tests/product_configurator_single_custom_attribute_test_ui.js b/addons/sale_product_configurator/static/tests/product_configurator_single_custom_attribute_test_ui.js
new file mode 100644
index 0000000000000..9c145ce0c711e
--- /dev/null
+++ b/addons/sale_product_configurator/static/tests/product_configurator_single_custom_attribute_test_ui.js
@@ -0,0 +1,79 @@
+odoo.define('sale.product_configurator_single_custom_attribute_tour', function (require) {
+"use strict";
+
+var tour = require('web_tour.tour');
+
+tour.register('sale_product_configurator_single_custom_attribute_tour', {
+    url: "/web",
+    test: true,
+}, [tour.STEPS.SHOW_APPS_MENU_ITEM, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'community'
+}, {
+    trigger: '.o_app[data-menu-xmlid="sale.sale_menu_root"]',
+    edition: 'enterprise'
+}, {
+    trigger: ".o_list_button_add",
+    extra_trigger: ".o_sale_order"
+}, {
+    trigger: "a:contains('Add a product')"
+}, {
+    trigger: 'div[name="product_template_id"] input',
+    run: function (){
+        var $input = $('div[name="product_template_id"] input');
+        $input.click();
+        $input.val('Custo');
+        // fake keydown to trigger search
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    }
+}, {
+    trigger: 'ul.ui-autocomplete a:contains("Customizable Desk")',
+    run: 'click'
+}, {
+    trigger: '.configurator_container span:contains("Aluminium")',
+    run: function () {
+        // used to check that the radio is NOT rendered
+        if ($('.configurator_container ul[data-attribute_id].d-none input[data-value_name="single product attribute value"]').length === 1) {
+            $('.configurator_container').addClass('tour_success');
+        }
+    }
+}, {
+    trigger: '.configurator_container.tour_success',
+    run: function () {
+        //check
+    }
+}, {
+    trigger: '.configurator_container .variant_custom_value',
+    run: 'text great single custom value'
+}, {
+    trigger: '.o_sale_product_configurator_add',
+}, {
+    trigger: 'button span:contains(Confirm)',
+    extra_trigger: '.oe_optional_products_modal',
+    run: 'click'
+}, {
+    trigger: 'td.o_data_cell:contains("single product attribute value: great single custom value")',
+    extra_trigger: 'div[name="order_line"]',
+    run: function (){} // check custom value
+}, {
+    trigger: 'td.o_product_configurator_cell',
+}, {
+    trigger: '.o_edit_product_configuration',
+}, {
+    trigger: '.configurator_container .variant_custom_value',
+    run: function () {
+        // check custom value initialized
+        if ($('.configurator_container .variant_custom_value').val() === "great single custom value") {
+            $('.configurator_container').addClass('tour_success_2');
+        }
+    }
+}, {
+    trigger: '.configurator_container.tour_success_2',
+    run: function () {
+        //check
+    }
+}]);
+
+});
diff --git a/addons/sale_management/static/tests/product_configurator_test_ui.js b/addons/sale_product_configurator/static/tests/product_configurator_test_ui.js
similarity index 78%
rename from addons/sale_management/static/tests/product_configurator_test_ui.js
rename to addons/sale_product_configurator/static/tests/product_configurator_test_ui.js
index 03f5a0a8bbcf8..7bce9880f7371 100644
--- a/addons/sale_management/static/tests/product_configurator_test_ui.js
+++ b/addons/sale_product_configurator/static/tests/product_configurator_test_ui.js
@@ -19,25 +19,26 @@ tour.register('sale_product_configurator_tour', {
     trigger: ".o_list_button_add",
     extra_trigger: ".o_sale_order"
 }, {
-    trigger: "a:contains('Configure a product')",
-}, {
-    trigger: '.o_product_configurator .o_input_dropdown input',
-    run: 'click'
+    trigger: "a:contains('Add a product')",
+}, {
+    trigger: 'div[name="product_template_id"] input',
+    run: function (){
+        var $input = $('div[name="product_template_id"] input');
+        $input.click();
+        $input.val('Custo');
+        // fake keydown to trigger search
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        $input.trigger(keyDownEvent);
+    }
 }, {
-    trigger: 'li a:contains("Customizable Desk")',
-    in_modal: false,
-    extra_trigger: 'ul.ui-autocomplete',
+    trigger: 'ul.ui-autocomplete a:contains("Customizable Desk")',
     run: 'click'
 }, {
     trigger: '.configurator_container span:contains("Steel")',
     run: function () {
         $('input.product_id').change(function () {
-            var request_count = 0;
-            if ($('.o_sale_product_configurator_add').attr('request_count')) {
-                request_count = parseInt($('.o_sale_product_configurator_add').attr('request_count'));
-            }
-            request_count++;
-            $('.o_sale_product_configurator_add').attr('request_count', request_count);
+            $('.o_sale_product_configurator_add').attr('request_count', 1);
         });
     }
 }, {
@@ -47,11 +48,7 @@ tour.register('sale_product_configurator_tour', {
     trigger: 'span.oe_currency_value:contains("800.40")',
     run: function (){} // check updated price
 }, {
-    trigger: 'input[data-value_name="Black"]'
-}, {
-    trigger: 'input[data-value_name="White"]'
-}, {
-    trigger: '.o_sale_product_configurator_add[request_count="3"]',
+    trigger: '.o_sale_product_configurator_add[request_count="1"]',
     run: function (){} // used to sync with "get_combination_info" completion
 }, {
     trigger: '.o_sale_product_configurator_add:not(.disabled)'
diff --git a/addons/sale_product_configurator/tests/__init__.py b/addons/sale_product_configurator/tests/__init__.py
new file mode 100644
index 0000000000000..c1cb786c91949
--- /dev/null
+++ b/addons/sale_product_configurator/tests/__init__.py
@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from . import test_sale_product_configurator_ui
diff --git a/addons/sale_product_configurator/tests/test_sale_product_configurator_ui.py b/addons/sale_product_configurator/tests/test_sale_product_configurator_ui.py
new file mode 100644
index 0000000000000..8470090c7a800
--- /dev/null
+++ b/addons/sale_product_configurator/tests/test_sale_product_configurator_ui.py
@@ -0,0 +1,173 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+import odoo.tests
+
+
+@odoo.tests.tagged('post_install', '-at_install')
+class TestUi(odoo.tests.HttpCase):
+    def test_01_product_configurator(self):
+        # To be able to test the product configurator, admin user must have access to "variants" feature, so we give him the right group for that
+        self.env.ref('base.user_admin').write({'groups_id': [(4, self.env.ref('product.group_product_variant').id)]})
+
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_tour.ready", login="admin")
+
+    def test_02_product_configurator_advanced(self):
+        # group_product_variant: use the product configurator
+        # group_sale_pricelist: display the pricelist to determine when it is changed after choosing
+        #                       the partner
+        self.env.ref('base.user_admin').write({
+            'groups_id': [
+                (4, self.env.ref('product.group_product_variant').id),
+                (4, self.env.ref('product.group_sale_pricelist').id),
+            ],
+        })
+
+        # Prepare relevant test data
+        # This is not included in demo data to avoid useless noise
+        product_attributes = self.env['product.attribute'].create([{
+            'name': 'PA1',
+            'type': 'radio',
+            'create_variant': 'dynamic'
+        }, {
+            'name': 'PA2',
+            'type': 'radio',
+            'create_variant': 'always'
+        }, {
+            'name': 'PA3',
+            'type': 'radio',
+            'create_variant': 'dynamic'
+        }, {
+            'name': 'PA4',
+            'type': 'select',
+            'create_variant': 'no_variant'
+        }, {
+            'name': 'PA5',
+            'type': 'select',
+            'create_variant': 'no_variant'
+        }, {
+            'name': 'PA7',
+            'type': 'color',
+            'create_variant': 'no_variant'
+        }, {
+            'name': 'PA8',
+            'type': 'radio',
+            'create_variant': 'no_variant'
+        }])
+
+        product_attribute_values = self.env['product.attribute.value'].create([{
+            'name': 'PAV' + str(i),
+            'is_custom': i == 9,
+            'attribute_id': product_attribute.id
+        } for i in range(1, 11) for product_attribute in product_attributes])
+
+        product_template_attribute_lines = self.env['product.template.attribute.line'].create([{
+            'attribute_id': product_attribute.id,
+            'product_tmpl_id': self.env.ref("product.product_product_4").id,
+            'value_ids': [(6, 0, product_attribute_values.filtered(
+                lambda product_attribute_value: product_attribute_value.attribute_id == product_attribute
+            ).ids)]
+        } for product_attribute in product_attributes])
+
+        self.env.ref("product.product_product_4").update({
+            'attribute_line_ids': [(4, product_template_attribute_line.id) for product_template_attribute_line in product_template_attribute_lines]
+        })
+
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_advanced_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_advanced_tour.ready", login="admin")
+
+    def test_03_product_configurator_edition(self):
+        # To be able to test the product configurator, admin user must have access to "variants" feature, so we give him the right group for that
+        self.env.ref('base.user_admin').write({'groups_id': [(4, self.env.ref('product.group_product_variant').id)]})
+
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_edition_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_edition_tour.ready", login="admin")
+
+    def test_04_product_configurator_single_custom_value(self):
+        # group_product_variant: use the product configurator
+        # group_sale_pricelist: display the pricelist to determine when it is changed after choosing
+        #                       the partner
+        self.env.ref('base.user_admin').write({
+            'groups_id': [
+                (4, self.env.ref('product.group_product_variant').id),
+                (4, self.env.ref('product.group_sale_pricelist').id),
+            ],
+        })
+
+        # Prepare relevant test data
+        # This is not included in demo data to avoid useless noise
+        product_attributes = self.env['product.attribute'].create([{
+            'name': 'product attribute',
+            'type': 'radio',
+            'create_variant': 'always'
+        }])
+
+        product_attribute_values = self.env['product.attribute.value'].create([{
+            'name': 'single product attribute value',
+            'is_custom': True,
+            'attribute_id': product_attributes[0].id
+        }])
+
+        product_template_attribute_lines = self.env['product.template.attribute.line'].create([{
+            'attribute_id': product_attributes[0].id,
+            'product_tmpl_id': self.env.ref("product.product_product_4").id,
+            'value_ids': [(6, 0, [product_attribute_values[0].id])]
+        }])
+
+        self.env.ref("product.product_product_4").update({
+            'attribute_line_ids': [(4, product_template_attribute_lines[0].id)]
+        })
+
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_single_custom_attribute_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_single_custom_attribute_tour.ready", login="admin")
+
+    def test_05_product_configurator_pricelist(self):
+        """The goal of this test is to make sure pricelist rules are correctly
+        applied on the backend product configurator.
+        Also testing B2C setting: no impact on the backend configurator.
+        """
+
+        admin = self.env.ref('base.user_admin')
+
+        # Activate B2C
+        self.env.ref('account.group_show_line_subtotals_tax_included').users |= admin
+        self.env.ref('account.group_show_line_subtotals_tax_excluded').users -= admin
+
+        # Active pricelist on SO
+        self.env.ref('product.group_sale_pricelist').users |= admin
+
+        # Add a 15% tax on desk
+        tax = self.env['account.tax'].create({'name': "Test tax", 'amount': 15})
+        self.env.ref('product.product_product_4_product_template').taxes_id = tax
+
+        # Remove tax from Conference Chair and Chair floor protection
+        self.env.ref('sale_product_configurator.product_product_1_product_template').taxes_id = None
+        self.env.ref('product.product_product_11_product_template').taxes_id = None
+
+        # Make sure pricelist rule exist
+        product_template = self.env.ref('product.product_product_4_product_template')
+        pricelist = self.env.ref('product.list0')
+
+        if not pricelist.item_ids.filtered(lambda i: i.product_tmpl_id == product_template and i.price_discount == 20):
+            self.env['product.pricelist.item'].create({
+                'base': 'list_price',
+                'applied_on': '1_product',
+                'pricelist_id': pricelist.id,
+                'product_tmpl_id': product_template.id,
+                'price_discount': 20,
+                'min_quantity': 2,
+                'compute_price': 'formula',
+            })
+
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_pricelist_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_pricelist_tour.ready", login="admin")
+
+    def test_06_product_configurator_optional_products(self):
+        """The goal of this test is to check that the product configurator
+        window opens correctly and lets you select optional products even
+        if the main product does not have variants.
+        """
+
+        # add an optional product to the office chair for test purposes
+        office_chair = self.env.ref('product.product_product_12')
+        office_chair.update({
+            'optional_product_ids': [(6, 0, [self.env.ref('sale_product_configurator.product_product_1_product_template').id])]
+        })
+
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('sale_product_configurator_optional_products_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.sale_product_configurator_optional_products_tour.ready", login="admin")
diff --git a/addons/sale_product_configurator/views/assets.xml b/addons/sale_product_configurator/views/assets.xml
new file mode 100644
index 0000000000000..f14e1f53ccd4d
--- /dev/null
+++ b/addons/sale_product_configurator/views/assets.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="assets_backend" inherit_id="web.assets_backend" name="sale_product_configurator assets backend">
+        <xpath expr="link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/sale_product_configurator/static/src/scss/product_configurator_widget.scss"/>
+        </xpath>
+        <xpath expr="script[last()]" position="after">
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/tour.js"></script>
+            <script type="text/javascript" src="/sale/static/src/js/variant_mixin.js"></script>
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/product_configurator_renderer.js"></script>
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/product_configurator_controller.js"></script>
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/product_configurator_view.js"></script>
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/product_configurator_widget.js"/>
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/product_configurator_modal.js"></script>
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator_test_ui.js"/>
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator_advanced_test_ui.js"/>
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator_edition_test_ui.js"/>
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator_single_custom_attribute_test_ui.js"/>
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator_pricelist_test_ui.js"/>
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator_optional_products_test_ui.js"/>
+        </xpath>
+    </template>
+    <template id="qunit_suite" inherit_id="web.qunit_suite" name="sale_product_configurator_tests">
+        <xpath expr="//t[@t-set='head']" position="inside">
+            <script type="text/javascript" src="/sale_product_configurator/static/tests/product_configurator.test.js"></script>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/sale_product_configurator/views/sale_views.xml b/addons/sale_product_configurator/views/sale_views.xml
new file mode 100644
index 0000000000000..fe588cc612b2e
--- /dev/null
+++ b/addons/sale_product_configurator/views/sale_views.xml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="product_template_view_form" model="ir.ui.view">
+        <field name="name">product.template.form.inherit.sale.product.configurator</field>
+        <field name="model">product.template</field>
+        <field name="inherit_id" ref="product.product_template_form_view"/>
+        <field name="arch" type="xml">
+            <xpath expr="//group[@name='sale']" position="after">
+                <group name="options" groups="product.group_product_variant">
+                    <group string="Options">
+                        <field name="optional_product_ids" widget="many2many_tags" options="{'color_field': 'color'}" domain="[('id', '!=', active_id)]" />
+                    </group>
+                </group>
+            </xpath>
+        </field>
+    </record>
+
+    <record id="sale_order_view_form" model="ir.ui.view">
+        <field name="name">sale.order.form.inherit.sale.product.configurator</field>
+        <field name="model">sale.order</field>
+        <field name="inherit_id" ref="sale.view_order_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//tree/field[@name='product_id']" position="after">
+                <field
+                    name="product_template_id"
+                    string="Product"
+                    options="{'no_open': True}"
+                    attrs="{
+                        'readonly': [('product_updatable', '=', False)],
+                        'required': [('display_type', '=', False)],
+                    }"
+                    context="{
+                        'partner_id': parent.partner_id,
+                        'quantity': product_uom_qty,
+                        'pricelist': parent.pricelist_id,
+                        'uom':product_uom,
+                        'company_id': parent.company_id,
+                        'default_lst_price': price_unit,
+                        'default_description_sale': name
+                    }"
+                    widget="product_configurator"
+                />
+                <field name="product_template_attribute_value_ids" invisible="1" />
+                <field name="product_custom_attribute_value_ids" invisible="1" >
+                    <tree>
+                        <field name="attribute_value_id" />
+                        <field name="custom_value" />
+                    </tree>
+                </field>
+                <field name="product_no_variant_attribute_value_ids" invisible="1" />
+                <field name="is_configurable_product" invisible="1" />
+            </xpath>
+            <xpath expr="//tree/field[@name='product_id']" position="attributes">
+                <attribute name="invisible">1</attribute>
+            </xpath>
+        </field>
+    </record>
+</odoo>
diff --git a/addons/sale_product_configurator/views/templates.xml b/addons/sale_product_configurator/views/templates.xml
new file mode 100644
index 0000000000000..ba03bbb30d194
--- /dev/null
+++ b/addons/sale_product_configurator/views/templates.xml
@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="optional_products_modal" name="Optional Products">
+        <main class="modal-body">
+            <t t-call="sale_product_configurator.configure_optional_products" />
+        </main>
+    </template>
+
+    <!-- backend -->
+    <template id="configure" name="Configure">
+        <div class="js_product main_product">
+
+            <t t-set="combination" t-value="product_combination if product_combination else product._get_first_possible_combination()"/>
+            <t t-set="combination_info" t-value="product._get_combination_info(combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
+            <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
+
+            <input type="hidden" class="product_template_id" t-att-value="product.id"/>
+            <input type="hidden" class="product_id" t-attf-name="product_id" t-att-value="product_variant.id"/>
+            <div class="col-lg-12 text-center mt-5">
+                <t t-if="product._is_add_to_cart_possible()">
+                    <div class="col-lg-5 d-inline-block text-left">
+                        <t t-if="combination" t-call="sale.variants">
+                            <t t-set="parent_combination" t-value="None"/>
+                        </t>
+                        <h2>
+                            <span t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                                t-esc="combination_info['list_price']"
+                                t-options='{
+                                    "widget": "monetary",
+                                    "display_currency": (pricelist or product).currency_id
+                                }'/>
+                            <span class="oe_price product_id mt-3" style="white-space: nowrap;"
+                                t-att-data-product-id="product.id"
+                                t-esc="combination_info['price']"
+                                t-options='{
+                                    "widget": "monetary",
+                                    "display_currency": (pricelist or product).currency_id
+                                }'/>
+                        </h2>
+                        <div class="css_quantity input-group oe_website_spinner">
+                            <div class="input-group-prepend">
+                                <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
+                                    <i class="fa fa-minus"></i>
+                                </button>
+                            </div>
+                            <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
+                            <div class="input-group-append">
+                                <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
+                                    <i class="fa fa-plus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <p class="css_not_available_msg alert alert-warning">This combination does not exist.</p>
+                    </div>
+                    <div class="col-lg-1 d-inline-block"></div>
+                    <div class="col-lg-5 d-inline-block align-top text-left">
+                        <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image' % product_variant.id" class="d-block product_detail_img" alt="Product Image"/>
+                        <img t-else="" t-att-src="'/web/image/product.template/%s/image' % product.id" class="d-block product_detail_img" alt="Product Image"/>
+                    </div>
+                </t>
+                <t t-else="">
+                    <div class="col-lg-5 d-inline-block text-left">
+                        <p class="alert alert-warning">This product has no valid combination.</p>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </template>
+
+    <!-- modal: full table, currenclty selected products at top -->
+    <template id="configure_optional_products">
+        <table class="table table-striped table-sm">
+        <thead>
+            <tr>
+                <th class="td-img">Product</th>
+                <th></th>
+                <th class="text-center td-qty">Quantity</th>
+                <th class="text-center td-price">Price</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="js_product in_cart main_product">
+
+                <t t-set="combination_info" t-value="product.product_tmpl_id._get_combination_info(combination, product.id, add_qty or 1, pricelist)"/>
+                <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
+
+                <input type="hidden" class="product_template_id" t-att-value="product.product_tmpl_id.id"/>
+                <input type="hidden" class="product_id" t-att-value="product_variant.id"/>
+                <td class='td-img'>
+                    <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_medium' % product_variant.id" alt="Product Image"/>
+                    <img t-else="" t-att-src="'/web/image/product.template/%s/image_medium' % product.id" alt="Product Image"/>
+                </td>
+                <td class='td-product_name'>
+                    <strong t-esc="combination_info['display_name']"/>
+                    <div class="text-muted small">
+                        <div t-field="product.description_sale"/>
+                        <div class="js_attributes"/>
+                    </div>
+                </td>
+                <td class="text-center td-qty">
+                    <div class="css_quantity input-group oe_website_spinner">
+                        <div class="input-group-prepend">
+                            <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
+                                <i class="fa fa-minus"></i>
+                            </button>
+                        </div>
+                        <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
+                        <div class="input-group-append">
+                            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
+                                <i class="fa fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
+                </td>
+                <td class="text-center td-price" name="price">
+                    <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"></ul>
+                    <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="variant_values" ></div>
+                    <div t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                        t-esc="combination_info['list_price']"
+                        t-options='{
+                            "widget": "monetary",
+                            "display_currency": (pricelist or product).currency_id
+                        }'
+                    />
+                    <span class="oe_price product_id" style="white-space: nowrap;"
+                        t-att-data-product-id="product.id"
+                        t-esc="combination_info['price']"
+                        t-options='{
+                            "widget": "monetary",
+                            "display_currency": (pricelist or product).currency_id
+                        }'/>
+                    <span class="js_raw_price d-none" t-esc="product.price"/>
+                </td>
+            </tr>
+            <tr class="o_total_row">
+                <td colspan="4" class="text-right">
+                    <strong>Total:</strong>
+                    <span class="js_price_total font-weight-bold" style="white-space: nowrap;"
+                        t-att-data-product-id="product.id"
+                        t-esc="combination_info['price'] * (add_qty or 1)"
+                        t-options='{
+                            "widget": "monetary",
+                            "display_currency": (pricelist or product).currency_id
+                        }'/>
+                </td>
+            </tr>
+            <tr t-if="product.optional_product_ids" class="o_select_options"><td colspan="4"><h4>Available Options:</h4></td></tr>
+            <t t-call="sale_product_configurator.optional_product_items">
+                <t t-set="parent_combination" t-value="combination"/>
+            </t>
+        </tbody>
+        </table>
+    </template>
+
+    <!-- modal: optional products -->
+    <template id="optional_product_items">
+        <t t-foreach="product.optional_product_ids" t-as="product">
+            <t t-set="combination" t-value="product._get_first_possible_combination(parent_combination)"/>
+            <t t-if="product._is_add_to_cart_possible(parent_combination)">
+
+                <t t-set="combination_info" t-value="product._get_combination_info(combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
+                <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
+
+                <tr class="js_product">
+                    <td class="td-img">
+                        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
+                        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}" t-att-value="product_variant.id"/>
+                        <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_medium' % product_variant.id"  class="variant_image" alt="Product Image"/>
+                        <img t-else="" t-att-src="'/web/image/product.template/%s/image_medium' % product.id"  class="variant_image" alt="Product Image"/>
+                    </td>
+                    <td class='td-product_name' colspan="2">
+                        <div class="float-left">
+                            <strong class="product-name product_display_name" t-esc="combination_info['display_name']"/>
+                            <div class="text-muted small" t-field="product.description_sale"/>
+                        </div>
+                        <div class="float-right">
+                            <t t-call="sale.variants"/>
+                        </div>
+                    </td>
+                    <td class="text-center td-price">
+                        <div t-attf-class="text-danger oe_default_price oe_optional oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                            t-esc="combination_info['list_price']"
+                            t-options='{
+                                "widget": "monetary",
+                                "display_currency": (pricelist or product).currency_id
+                            }'/>
+                        <div class="oe_price" style="white-space: nowrap;"
+                            t-esc="combination_info['price']"
+                            t-options='{
+                                "widget": "monetary",
+                                "display_currency": (pricelist or product).currency_id
+                            }'/>
+                        <span class="js_raw_price d-none" t-esc="combination_info['price']" />
+                        <p class="css_not_available_msg alert alert-warning">Option not available</p>
+
+                        <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product.id}" value="0"/>
+                        <a role="button" href="#" class="js_add btn btn-primary btn-sm"><i class="fa fa-shopping-cart add-optionnal-item"></i> Add to cart</a>
+                        <span class="js_remove d-none">
+                            <span class="optional_product_quantity"><span class="js_item add_qty">1 </span><span class="js_items d-none">5 </span> <span t-field="product.uom_id.sudo().name"/><br/></span>
+                            <a role="button" href="#" class="js_remove"><i class="fa fa-trash-o remove-optionnal-item"></i></a>
+                        </span>
+                    </td>
+                </tr>
+            </t>
+        </t>
+    </template>
+</odoo>
diff --git a/addons/sale_product_configurator/wizard/__init__.py b/addons/sale_product_configurator/wizard/__init__.py
new file mode 100644
index 0000000000000..a0eaada809c00
--- /dev/null
+++ b/addons/sale_product_configurator/wizard/__init__.py
@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from . import sale_product_configurator
diff --git a/addons/sale_product_configurator/wizard/sale_product_configurator.py b/addons/sale_product_configurator/wizard/sale_product_configurator.py
new file mode 100644
index 0000000000000..2d76f6267e7e5
--- /dev/null
+++ b/addons/sale_product_configurator/wizard/sale_product_configurator.py
@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import models, fields
+
+
+class SaleProductConfigurator(models.TransientModel):
+    _name = 'sale.product.configurator'
+    _description = 'Sale Product Configurator'
+
+    product_template_id = fields.Many2one(
+        'product.template', string="Product",
+        required=True, domain=[('sale_ok', '=', True), ('attribute_line_ids.value_ids', '!=', False)])
+    quantity = fields.Integer('Quantity')
+    pricelist_id = fields.Many2one('product.pricelist', 'Pricelist', readonly=True)
+    product_template_attribute_value_ids = fields.Many2many(
+        'product.template.attribute.value', 'product_configurator_template_attribute_value_rel', string='Template Attribute Values', readonly=True)
+    product_custom_attribute_value_ids = fields.Many2many(
+        'product.attribute.custom.value', 'product_configurator_custom_attribute_value_rel', string='User entered custom product attribute values')
+    product_no_variant_attribute_value_ids = fields.Many2many(
+        'product.template.attribute.value', 'product_configurator_no_variant_attribute_value_rel', string='Product attribute values that do not create variants')
diff --git a/addons/sale_product_configurator/wizard/sale_product_configurator_views.xml b/addons/sale_product_configurator/wizard/sale_product_configurator_views.xml
new file mode 100644
index 0000000000000..68772668d5019
--- /dev/null
+++ b/addons/sale_product_configurator/wizard/sale_product_configurator_views.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="sale_product_configurator_view_form" model="ir.ui.view">
+        <field name="name">sale_product_configurator.product.configurator.view.form</field>
+        <field name="model">sale.product.configurator</field>
+        <field name="arch" type="xml">
+            <form js_class="product_configurator_form">
+                <group>
+                    <field name="product_template_id" class="oe_product_configurator_product_template_id" />
+                    <field name="product_template_attribute_value_ids" invisible="1" />
+                    <field name="product_custom_attribute_value_ids" invisible="1" widget="one2many" >
+                        <tree>
+                            <field name="attribute_value_id"/>
+                            <field name="custom_value"/>
+                        </tree>
+                    </field>
+                    <field name="product_no_variant_attribute_value_ids" invisible="1" />
+                    <field name="quantity" invisible="1" />
+                </group>
+                <footer>
+                    <button string="Add" class="btn-primary o_sale_product_configurator_add"/>
+                    <button string="Save" class="btn-primary o_sale_product_configurator_edit" style="display: none;" />
+                    <button string="Cancel" class="btn-secondary" special="cancel"/>
+                </footer>
+            </form>
+        </field>
+    </record>
+
+    <record id="sale_product_configurator_action" model="ir.actions.act_window">
+        <field name="name">Configure a product</field>
+        <field name="res_model">sale.product.configurator</field>
+        <field name="view_mode">form</field>
+        <field name="target">new</field>
+        <field name="view_id" ref="sale_product_configurator_view_form"/>
+    </record>
+</odoo>
diff --git a/addons/sale_stock/data/sale_order_demo.xml b/addons/sale_stock/data/sale_order_demo.xml
index b1ce1cb758bca..cf3d29808cac3 100644
--- a/addons/sale_stock/data/sale_order_demo.xml
+++ b/addons/sale_stock/data/sale_order_demo.xml
@@ -26,5 +26,27 @@
             <field name="warehouse_id" ref="stock.warehouse0"/>
         </record>
 
+        <record id="stock_inventory_customizable_desk_update" model="stock.inventory">
+            <field name="name">Inventory for new Customizable Desks</field>
+        </record>
+
+        <record id="stock_inventory_line_7e" model="stock.inventory.line">
+            <field name="product_id" ref="sale.product_product_4e"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_customizable_desk_update"/>
+            <field name="product_qty">65.0</field>
+            <field name="location_id" ref="stock.stock_location_components"/>
+        </record>
+        <record id="stock_inventory_line_7f" model="stock.inventory.line">
+            <field name="product_id" ref="sale.product_product_4f"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_customizable_desk_update"/>
+            <field name="product_qty">70.0</field>
+            <field name="location_id" ref="stock.stock_location_components"/>
+        </record>
+
+        <function model="stock.inventory" name="action_validate">
+            <function eval="[[('state','=','draft'),('id', '=', ref('stock_inventory_customizable_desk_update'))]]" model="stock.inventory" name="search"/>
+        </function>
     </data>
 </odoo>
diff --git a/addons/sale_stock/static/src/js/tour.js b/addons/sale_stock/static/src/js/tour.js
deleted file mode 100644
index 9127714cf158b..0000000000000
--- a/addons/sale_stock/static/src/js/tour.js
+++ /dev/null
@@ -1,53 +0,0 @@
-odoo.define("sale_stock.tour", function (require) {
-    "use strict";
-
-    var tour = require('web_tour.tour');
-    require('sale.tour');
-
-    var quotation_product_selected_step_index = _.findIndex(tour.tours.sale_product_configurator_tour.steps, function (step) {
-        return (step.id === "quotation_product_selected");
-    });
-
-    tour.tours.sale_product_configurator_tour.steps[quotation_product_selected_step_index].run = function (actions) {
-        actions.auto();
-    };
-
-    tour.tours.sale_product_configurator_tour.steps.splice(quotation_product_selected_step_index+1, 0, {
-        trigger: ".o_dialog_warning + .modal-footer .btn-primary",
-        auto: true,
-        run: function (actions) {
-            actions.auto('.o_dialog_warning + .modal-footer .btn-primary');
-        }
-    }, {
-        trigger: ".o_dialog_warning + .modal-footer .btn-primary",
-        auto: true,
-        run: function (actions) {
-            actions.auto('.o_dialog_warning + .modal-footer .btn-primary');
-        }
-    }, {
-        trigger: "body:not(:has(.o_dialog_warning))",
-        auto: true,
-        in_modal: false,
-        run: function (actions) {
-            if ($('.modal-footer .btn-primary').length){
-                actions.auto('.modal-footer .btn-primary');
-            }
-        },
-    });
-
-    // Check if sale_management is installed since sale_stock is adding an extra
-    // step to add to SO (not enough inventory)
-    // This works under 2 assumptions: this file must be after the file defining
-    // the tour in the assets, and the module defining the tour must be sync
-    if ('sale.product_configurator_pricelist_tour' in odoo.__DEBUG__.factories) {
-        var steps = tour.tours.sale_product_configurator_pricelist_tour.steps;
-        for (var k=0; k<steps.length; k++) {
-            if (steps[k].content === "add to SO") {
-                steps.splice(k+1, 0, {
-                    content: "click in modal on ok button",
-                    trigger: '.modal-footer button:contains("Ok")',
-                });
-            }
-        }
-    }
-});
diff --git a/addons/sale_stock/views/sale_order_views.xml b/addons/sale_stock/views/sale_order_views.xml
index e7cedff1daab2..be5023ffcd4e3 100644
--- a/addons/sale_stock/views/sale_order_views.xml
+++ b/addons/sale_stock/views/sale_order_views.xml
@@ -30,6 +30,9 @@
                 <xpath expr="//page/field[@name='order_line']/form/group/group/field[@name='tax_id']" position="before">
                     <field name="product_packaging" attrs="{'invisible': [('product_id', '=', False)]}" context="{'default_product_id': product_id, 'tree_view_ref':'product.product_packaging_tree_view', 'form_view_ref':'product.product_packaging_form_view'}" domain="[('product_id','=',product_id)]" groups="product.group_stock_packaging" />
                 </xpath>
+                <xpath expr="//page/field[@name='order_line']/tree/field[@name='tax_id']" position="before">
+                    <field name="product_packaging" attrs="{'invisible': [('product_id', '=', False)]}" context="{'default_product_id': product_id, 'tree_view_ref':'product.product_packaging_tree_view', 'form_view_ref':'product.product_packaging_form_view'}" domain="[('product_id','=',product_id)]" groups="product.group_stock_packaging" />
+                </xpath>
                 <xpath expr="//field[@name='order_line']/form/group/group/field[@name='price_unit']" position="before">
                     <field name="route_id" groups="sale_stock.group_route_so_lines" options="{'no_create': True}"/>
                 </xpath>
diff --git a/addons/sale_stock/views/stock_views.xml b/addons/sale_stock/views/stock_views.xml
index 23f28d21eb818..c95aca3f55196 100644
--- a/addons/sale_stock/views/stock_views.xml
+++ b/addons/sale_stock/views/stock_views.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data>
-        <template id="assets_backend" inherit_id="web.assets_backend">
-            <xpath expr="//script[last()]" position="after">
-                <script type="text/javascript" src="/sale_stock/static/src/js/tour.js"></script>
-            </xpath>
-        </template>
-
         <template id="exception_on_so">
             <div>
                 Exception(s) occurred on the sale order(s):
diff --git a/addons/stock/data/stock_demo.xml b/addons/stock/data/stock_demo.xml
index c9ee3a0f7322a..d92c6a69c54b4 100644
--- a/addons/stock/data/stock_demo.xml
+++ b/addons/stock/data/stock_demo.xml
@@ -65,6 +65,41 @@
             <field name="product_qty">26.0</field>
             <field name="location_id" ref="stock_location_components"/>
         </record>
+        <record id="stock_inventory_line_6b" model="stock.inventory.line">
+            <field name="product_id" ref="product.product_product_11b"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_0"/>
+            <field name="product_qty">30.0</field>
+            <field name="location_id" ref="stock_location_components"/>
+        </record>
+        <record id="stock_inventory_line_7" model="stock.inventory.line">
+            <field name="product_id" ref="product.product_product_4"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_0"/>
+            <field name="product_qty">45.0</field>
+            <field name="location_id" ref="stock_location_components"/>
+        </record>
+        <record id="stock_inventory_line_7b" model="stock.inventory.line">
+            <field name="product_id" ref="product.product_product_4b"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_0"/>
+            <field name="product_qty">50.0</field>
+            <field name="location_id" ref="stock_location_components"/>
+        </record>
+        <record id="stock_inventory_line_7c" model="stock.inventory.line">
+            <field name="product_id" ref="product.product_product_4c"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_0"/>
+            <field name="product_qty">55.0</field>
+            <field name="location_id" ref="stock_location_components"/>
+        </record>
+        <record id="stock_inventory_line_7d" model="stock.inventory.line">
+            <field name="product_id" ref="product.product_product_4d"/>
+            <field name="product_uom_id" ref="uom.product_uom_unit"/>
+            <field name="inventory_id" ref="stock_inventory_0"/>
+            <field name="product_qty">60.0</field>
+            <field name="location_id" ref="stock_location_components"/>
+        </record>
         <record id="stock_inventory_line_11" model="stock.inventory.line">
             <field name="product_id" ref="product.product_product_12"/>
             <field name="product_uom_id" ref="uom.product_uom_unit"/>
diff --git a/addons/web/static/src/js/views/basic/basic_model.js b/addons/web/static/src/js/views/basic/basic_model.js
index e7ce88962ff9c..79fac0f2247ea 100644
--- a/addons/web/static/src/js/views/basic/basic_model.js
+++ b/addons/web/static/src/js/views/basic/basic_model.js
@@ -1347,7 +1347,7 @@ var BasicModel = AbstractModel.extend({
         for (var fieldName in changes) {
             field = record.fields[fieldName];
             if (field.type === 'one2many' || field.type === 'many2many') {
-                defs.push(this._applyX2ManyChange(record, fieldName, changes[fieldName], options.viewType, options.allowWarning));
+                defs.push(this._applyX2ManyChange(record, fieldName, changes[fieldName], options));
             } else if (field.type === 'many2one' || field.type === 'reference') {
                 defs.push(this._applyX2OneChange(record, fieldName, changes[fieldName]));
             } else {
@@ -1677,14 +1677,15 @@ var BasicModel = AbstractModel.extend({
      * @param {string} fieldName
      * @param {Object} command A command object.  It should have a 'operation'
      *   key.  For example, it looks like {operation: ADD, id: 'partner_1'}
-     * @param {string} [viewType] current viewType. If not set, we will assume
+     * @param {Object} [options]
+     * @param {string} [options.viewType] current viewType. If not set, we will assume
      *   main viewType from the record
-     * @param {boolean} [allowWarning=false] if true, change
+     * @param {boolean} [options.allowWarning=false] if true, change
      *   operation can complete, even if a warning is raised
      *   (only supported by the 'CREATE' command.operation)
      * @returns {Promise}
      */
-    _applyX2ManyChange: function (record, fieldName, command, viewType, allowWarning) {
+    _applyX2ManyChange: function (record, fieldName, command, options) {
         if (command.operation === 'TRIGGER_ONCHANGE') {
             // the purpose of this operation is to trigger an onchange RPC, so
             // there is no need to apply any change on the record (the changes
@@ -1697,7 +1698,8 @@ var BasicModel = AbstractModel.extend({
         var localID = (record._changes && record._changes[fieldName]) || record.data[fieldName];
         var list = this.localData[localID];
         var field = record.fields[fieldName];
-        var fieldInfo = record.fieldsInfo[viewType || record.viewType][fieldName];
+        var viewType = (options && options.viewType) || record.viewType;
+        var fieldInfo = record.fieldsInfo[viewType][fieldName];
         var view = fieldInfo.views && fieldInfo.views[fieldInfo.mode];
         var def, rec;
         var defs = [];
@@ -1776,12 +1778,12 @@ var BasicModel = AbstractModel.extend({
                 }
                 break;
             case 'CREATE':
-                var options = {
+                var createOptions = _.extend({
                     context: command.context,
-                    position: command.position,
-                    allowWarning: allowWarning
-                };
-                def = this._addX2ManyDefaultRecord(list, options).then(function (ids) {
+                    position: command.position
+                }, options || {});
+
+                def = this._addX2ManyDefaultRecord(list, createOptions).then(function (ids) {
                     _.each(ids, function(id){
                         if (command.position === 'bottom' && list.orderedResIDs && list.orderedResIDs.length >= list.limit) {
                             list.tempLimitIncrement = (list.tempLimitIncrement || 0) + 1;
@@ -1822,6 +1824,17 @@ var BasicModel = AbstractModel.extend({
                     list._changes.push({operation: operation, id: id});
                 });
                 break;
+            case 'DELETE_ALL':
+                // first remove all pending 'ADD' operations
+                list._changes = _.reject(list._changes, function (change) {
+                    return change.operation === 'ADD';
+                });
+
+                // then apply 'DELETE' on existing records
+                return this._applyX2ManyChange(record, fieldName, {
+                    operation: 'DELETE',
+                    ids: list.res_ids
+                }, options);
             case 'REPLACE_WITH':
                 // this is certainly not optimal... and not sure that it is
                 // correct if some ids are added and some other are removed
@@ -1836,7 +1849,7 @@ var BasicModel = AbstractModel.extend({
                     addDef = this._applyX2ManyChange(record, fieldName, {
                         operation: 'ADD_M2M',
                         ids: values
-                    }, viewType);
+                    }, options);
                 }
                 if (removedIds.length) {
                     var listData = _.map(list.data, function (localId) {
@@ -1850,9 +1863,20 @@ var BasicModel = AbstractModel.extend({
                             }
                             return _.findWhere(listData, {res_id: resID}).id;
                         }),
-                    }, viewType);
+                    }, options);
                 }
                 return Promise.all([addDef, removedDef]);
+            case 'MULTI':
+                // allows batching multiple operations
+                _.each(command.commands, function (innerCommand){
+                    defs.push(self._applyX2ManyChange(
+                        record,
+                        fieldName,
+                        innerCommand,
+                        options
+                    ));
+                });
+                break;
         }
 
         return Promise.all(defs).then(function () {
@@ -1911,7 +1935,10 @@ var BasicModel = AbstractModel.extend({
                 case 'FORGET':
                 case 'DELETE':
                     list.count--;
-                    list.res_ids = _.without(list.res_ids, relRecord.res_id);
+                    // FIXME awa: there is no "relRecord" for o2m field
+                    // seems like using change.id does the trick -> check with framework JS
+                    var deletedResID = relRecord ? relRecord.res_id : change.id;
+                    list.res_ids = _.without(list.res_ids, deletedResID);
                     break;
                 case 'REMOVE_ALL':
                     list.count = 0;
diff --git a/addons/web/static/tests/views/basic_model_tests.js b/addons/web/static/tests/views/basic_model_tests.js
index 33f07493ef934..2a9fbec6bd4b9 100644
--- a/addons/web/static/tests/views/basic_model_tests.js
+++ b/addons/web/static/tests/views/basic_model_tests.js
@@ -2155,5 +2155,166 @@ odoo.define('web.basic_model_tests', function (require) {
             assert.strictEqual(record.data.foobool2, true, "foobool2 field should be true");
             model.destroy();
         });
+
+        QUnit.test('notifyChange DELETE_ALL on a one2many', async function (assert) {
+            assert.expect(5);
+
+            this.data.partner.records[1].product_ids = [37, 38];
+            this.params.fieldNames = ['product_ids'];
+
+            var model = createModel({
+                Model: BasicModel,
+                data: this.data,
+            });
+
+            var o2mParams = {
+                modelName: 'product',
+                fields: this.data.product.fields,
+            };
+
+            var resultID = await model.load(this.params);
+            var newRecordID = await model.load(o2mParams);
+            var record = model.get(resultID);
+            var x2mListID = record.data.product_ids.id;
+
+            assert.strictEqual(record.data.product_ids.count, 2,
+                "there should be two records in the relation");
+
+            await model.notifyChanges(resultID, {product_ids: {operation: 'ADD', id: newRecordID}});
+
+            assert.deepEqual(model.localData[x2mListID]._changes, [{
+                operation: 'ADD', id: newRecordID,
+            }], "_changes should be correct");
+
+            record = model.get(resultID);
+            assert.strictEqual(record.data.product_ids.count, 3,
+                "there should be three records in the relation");
+
+            await model.notifyChanges(resultID, {product_ids: {operation: 'DELETE_ALL'}});
+
+            assert.deepEqual(model.localData[x2mListID]._changes, [{
+                id: 37,
+                operation: "DELETE"
+            }, {
+                id: 38,
+                operation: "DELETE"
+            }], "_changes should contain the two 'DELETE' operations");
+
+            record = model.get(resultID);
+            assert.strictEqual(record.data.product_ids.count, 0,
+                "there should be no more records in the relation");
+            model.destroy();
+        });
+
+        QUnit.test('notifyChange MULTI on a one2many', async function (assert) {
+            assert.expect(4);
+
+            this.data.partner.records[1].product_ids = [37, 38];
+            this.params.fieldNames = ['product_ids'];
+
+            var model = createModel({
+                Model: BasicModel,
+                data: this.data,
+            });
+
+            var o2mParams = {
+                modelName: 'product',
+                fields: this.data.product.fields,
+            };
+
+            var resultID = await model.load(this.params);
+            var newRecordID = await model.load(o2mParams);
+            var record = model.get(resultID);
+            var x2mListID = record.data.product_ids.id;
+
+            assert.strictEqual(record.data.product_ids.count, 2,
+                "there should be two records in the relation");
+
+            await model.notifyChanges(resultID, {product_ids: {
+                operation: 'MULTI',
+                commands: [{
+                    operation: 'DELETE_ALL'
+                }, {
+                    operation: 'ADD',
+                    id: newRecordID
+                }]
+            }});
+
+            assert.deepEqual(model.localData[x2mListID]._changes, [{
+                id: 37,
+                operation: "DELETE"
+            }, {
+                id: 38,
+                operation: "DELETE"
+            }, {
+                operation: 'ADD', id: newRecordID,
+            }], "_changes should be correct");
+
+            record = model.get(resultID);
+            assert.strictEqual(record.data.product_ids.count, 1,
+                "there should be one record in the relation");
+
+            assert.strictEqual(record.data.product_ids.data[0].id, newRecordID,
+                "the id should match");
+        });
+
+        QUnit.test('notifyChange MULTI on a many2many', async function (assert) {
+            assert.expect(3);
+
+            this.params.fieldsInfo = {
+                default: {
+                    category: {
+                        fieldsInfo: {default: {some_char: { context: "{'a': parent.foo}"}}},
+                        relatedFields: {some_char: {type: "char"}},
+                        viewType: 'default',
+                    },
+                    foo: {},
+                },
+            };
+
+            var model = createModel({
+                Model: BasicModel,
+                data: this.data,
+            });
+
+            var resultID = await model.load(this.params);
+            var changes = {
+                category: {
+                    operation: 'MULTI',
+                    commands: [{
+                        operation: 'ADD_M2M',
+                        ids: [{id: 23}, {id: 24}, {id: 25}]
+                    }, {
+                        operation: 'ADD_M2M',
+                        ids: [{id: 26}]
+                    }]
+                }
+            };
+            await model.notifyChanges(resultID, changes);
+            var record = model.get(resultID);
+            var categoryRecord = record.data.category;
+
+            assert.strictEqual(categoryRecord.data.length, 4,
+                "there should 2 records in the relation");
+
+            await model.notifyChanges(resultID, {category: {
+                operation: 'MULTI',
+                commands: [{
+                    operation: 'DELETE_ALL'
+                }, {
+                    operation: 'ADD_M2M',
+                    ids: [{id: 27}]
+                }]
+            }});
+            record = model.get(resultID);
+            categoryRecord = record.data.category;
+            assert.strictEqual(categoryRecord.data.length, 1,
+                "there should 1 record in the relation");
+
+            assert.strictEqual(record.data.category.data[0].data.id, 27,
+                "the id should match");
+
+            model.destroy();
+        });
     });
 });
diff --git a/addons/website_sale/controllers/__init__.py b/addons/website_sale/controllers/__init__.py
index 5ee7aaab8f264..9632bd1bc3987 100644
--- a/addons/website_sale/controllers/__init__.py
+++ b/addons/website_sale/controllers/__init__.py
@@ -3,3 +3,4 @@
 
 from . import backend
 from . import main
+from . import variant
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index d22b69b863628..df264792c2235 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -12,7 +12,6 @@
 from odoo.addons.website.controllers.main import QueryURL
 from odoo.exceptions import ValidationError
 from odoo.addons.website.controllers.main import Website
-from odoo.addons.sale.controllers.product_configurator import ProductConfiguratorController
 from odoo.addons.website_form.controllers.main import WebsiteForm
 from odoo.osv import expression
 
@@ -131,7 +130,7 @@ def get_switchable_related_views(self, key):
         return views
 
 
-class WebsiteSale(ProductConfiguratorController):
+class WebsiteSale(http.Controller):
 
     def _get_compute_currency_and_context(self, product=None):
         pricelist_context, pricelist = self._get_pricelist_context()
@@ -292,6 +291,9 @@ def product(self, product, category='', search='', **kwargs):
         if not product.can_access_from_current_website():
             raise NotFound()
 
+        return request.render("website_sale.product", self._prepare_product_values(product, category, search, **kwargs))
+
+    def _prepare_product_values(self, product, category, search, **kwargs):
         add_qty = int(kwargs.get('add_qty', 1))
 
         product_context = dict(request.env.context, quantity=add_qty,
@@ -319,24 +321,18 @@ def compute_currency(price):
             product_context['pricelist'] = pricelist.id
             product = product.with_context(product_context)
 
-        values = {
+        return {
             'search': search,
             'category': category,
             'pricelist': pricelist,
             'attrib_values': attrib_values,
-            # compute_currency deprecated, get from product
-            'compute_currency': compute_currency,
             'attrib_set': attrib_set,
             'keep': keep,
             'categories': categs,
             'main_object': product,
             'product': product,
             'add_qty': add_qty,
-            'optional_product_ids': [p.with_context({'active_id': p.id}) for p in product.optional_product_ids],
-            # get_attribute_exclusions deprecated, use product method
-            'get_attribute_exclusions': self._get_attribute_exclusions,
         }
-        return request.render("website_sale.product", values)
 
     @http.route(['/shop/change_pricelist/<model("product.pricelist"):pl_id>'], type='http', auth="public", website=True, sitemap=False)
     def pricelist_change(self, pl_id, **post):
@@ -459,9 +455,6 @@ def cart_update_json(self, product_id, line_id=None, add_qty=None, set_qty=None,
 
         value['website_sale.cart_lines'] = request.env['ir.ui.view'].render_template("website_sale.cart_lines", {
             'website_sale_order': order,
-            # compute_currency deprecated (not used in view)
-            'compute_currency': lambda price: from_currency._convert(
-                price, to_currency, order.company_id, fields.Date.today()),
             'date': fields.Date.today(),
             'suggested_products': order._cart_accessories()
         })
@@ -1121,109 +1114,3 @@ def _format_amount(self, amount, currency):
         lang = request.env['res.lang']._lang_get(request.env.context.get('lang') or 'en_US')
         return lang.format(fmt, currency.round(amount), grouping=True, monetary=True)\
             .replace(r' ', u'\N{NO-BREAK SPACE}').replace(r'-', u'-\N{ZERO WIDTH NO-BREAK SPACE}')
-
-    @http.route(['/shop/cart/update_option'], type='http', auth="public", methods=['POST'], website=True, multilang=False)
-    def cart_options_update_json(self, product_id, add_qty=1, set_qty=0, goto_shop=None, lang=None, **kw):
-        """This route is called when submitting the optional product modal."""
-        if lang:
-            request.website = request.website.with_context(lang=lang)
-
-        order = request.website.sale_get_order(force_create=True)
-        if order.state != 'draft':
-            request.session['sale_order_id'] = None
-            order = request.website.sale_get_order(force_create=True)
-        optional_product_ids = []
-        for k, v in kw.items():
-            if "optional-product-" in k and int(kw.get(k.replace("product", "add"))):
-                optional_product_ids.append(int(v))
-
-        custom_values = []
-        if kw.get('custom_values'):
-            custom_values = json.loads(kw.get('custom_values'))
-
-        value = {}
-        if add_qty or set_qty:
-            value = order._cart_update(
-                product_id=int(product_id),
-                add_qty=add_qty,
-                set_qty=set_qty,
-                optional_product_ids=optional_product_ids,
-                product_custom_attribute_values=self._get_product_custom_value(
-                    int(product_id),
-                    custom_values,
-                    'product_custom_attribute_values'
-                ),
-                no_variant_attribute_values=self._get_product_custom_value(
-                    int(product_id),
-                    custom_values,
-                    'no_variant_attribute_values'
-                )
-            )
-
-        # options have all time the same quantity
-        for option_id in optional_product_ids:
-            order._cart_update(
-                product_id=option_id,
-                set_qty=value.get('quantity'),
-                linked_line_id=value.get('line_id'),
-                product_custom_attribute_values=self._get_product_custom_value(
-                    option_id,
-                    custom_values,
-                    'product_custom_attribute_values'
-                ),
-                no_variant_attribute_values=self._get_product_custom_value(
-                    option_id,
-                    custom_values,
-                    'no_variant_attribute_values'
-                )
-            )
-
-        return str(order.cart_quantity)
-
-    def _get_product_custom_value(self, product_id, custom_values, field):
-        if custom_values:
-            for custom_value in custom_values:
-                if custom_value['product_id'] == product_id:
-                    return custom_value[field]
-
-        return None
-
-    # ------------------------------------------------------
-    # Product Configurator
-    # ------------------------------------------------------
-
-    @http.route(auth="public")
-    def create_product_variant(self, product_template_id, product_template_attribute_value_ids, **kwargs):
-        """Override because on the website the public user must access it."""
-        return super(WebsiteSale, self).create_product_variant(product_template_id, product_template_attribute_value_ids, **kwargs)
-
-    @http.route(['/product_configurator/show_optional_products_website'], type='json', auth="public", methods=['POST'], website=True)
-    def show_optional_products_website(self, product_id, variant_values, **kw):
-        """Special route to use website logic in get_combination_info override.
-        This route is called in JS by appending _website to the base route.
-        """
-        kw.pop('pricelist_id')
-        return self.show_optional_products(product_id, variant_values, request.website.get_current_pricelist(), **kw)
-
-    @http.route(['/product_configurator/optional_product_items_website'], type='json', auth="public", methods=['POST'], website=True)
-    def optional_product_items_website(self, product_id, **kw):
-        """Special route to use website logic in get_combination_info override.
-        This route is called in JS by appending _website to the base route.
-        """
-        kw.pop('pricelist_id')
-        return self.optional_product_items(product_id, request.website.get_current_pricelist(), **kw)
-
-    @http.route(['/product_configurator/get_combination_info_website'], type='json', auth="public", methods=['POST'], website=True)
-    def get_combination_info_website(self, product_template_id, product_id, combination, add_qty, **kw):
-        """Special route to use website logic in get_combination_info override.
-        This route is called in JS by appending _website to the base route.
-        """
-        kw.pop('pricelist_id')
-        res = self.get_combination_info(product_template_id, product_id, combination, add_qty, request.website.get_current_pricelist(), **kw)
-        carousel_view = request.env['ir.ui.view'].render_template('website_sale.shop_product_carousel',
-            values={
-                'product': request.env['product.template'].browse(res['product_template_id']),
-                'product_variant': request.env['product.product'].browse(res['product_id']),
-            })
-        res['carousel'] = carousel_view
-        return res
diff --git a/addons/website_sale/controllers/variant.py b/addons/website_sale/controllers/variant.py
new file mode 100644
index 0000000000000..76069d26bc5c7
--- /dev/null
+++ b/addons/website_sale/controllers/variant.py
@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+from odoo import http
+from odoo.http import request
+
+from odoo.addons.sale.controllers.variant import VariantController
+
+class WebsiteSaleVariantController(VariantController):
+    @http.route(['/sale/get_combination_info_website'], type='json', auth="public", methods=['POST'], website=True)
+    def get_combination_info_website(self, product_template_id, product_id, combination, add_qty, **kw):
+        """Special route to use website logic in get_combination_info override.
+        This route is called in JS by appending _website to the base route.
+        """
+        kw.pop('pricelist_id')
+        res = self.get_combination_info(product_template_id, product_id, combination, add_qty, request.website.get_current_pricelist(), **kw)
+
+        carousel_view = request.env['ir.ui.view'].render_template('website_sale.shop_product_carousel',
+            values={
+                'product': request.env['product.template'].browse(res['product_template_id']),
+                'product_variant': request.env['product.product'].browse(res['product_id']),
+            })
+        res['carousel'] = carousel_view
+        return res
+
+    @http.route(auth="public")
+    def create_product_variant(self, product_template_id, product_template_attribute_value_ids, **kwargs):
+        """Override because on the website the public user must access it."""
+        return super(WebsiteSaleVariantController, self).create_product_variant(product_template_id, product_template_attribute_value_ids, **kwargs)
diff --git a/addons/website_sale/data/demo.xml b/addons/website_sale/data/demo.xml
index 49b94a1701b47..3e26dbed8435e 100644
--- a/addons/website_sale/data/demo.xml
+++ b/addons/website_sale/data/demo.xml
@@ -5,11 +5,6 @@
             <field name="salesteam_id" ref="sales_team.salesteam_website_sales"/>
         </record>
 
-        <record id="sale.product_product_1_product_template" model="product.template">
-            <field name="website_sequence">100</field>
-            <field name="website_published" eval="True"/>
-        </record>
-
         <record id="product.product_product_24" model="product.product">
             <field name="website_published" eval="True"/>
         </record>
@@ -663,9 +658,6 @@
             <field name="attribute_line_ids" eval="[(6,0,[ref('product_template_attribute_line_1')])]"/>
             <field name="public_categ_ids" eval="[(6,0,[ref('website_sale.services')])]"/>
         </record>
-        <record id="product.product_product_4_product_template" model="product.template">
-            <field name="optional_product_ids" eval="[(6,0,[ref('product.product_product_11_product_template'), ref('product_product_1_product_template')])]"/>
-        </record>
 
         <!-- Handle automatically created product.template.attribute.value -->
         <function model="ir.model.data" name="_update_xmlids">
diff --git a/addons/website_sale/models/product.py b/addons/website_sale/models/product.py
index 54eb4bce462a0..ad5749a3b1e29 100644
--- a/addons/website_sale/models/product.py
+++ b/addons/website_sale/models/product.py
@@ -182,21 +182,6 @@ class ProductTemplate(models.Model):
 
     product_template_image_ids = fields.One2many('product.image', 'product_tmpl_id', string="Extra Product Images", copy=True)
 
-    # website_price deprecated, directly use _get_combination_info instead
-    website_price = fields.Float('Website price', compute='_website_price', digits=dp.get_precision('Product Price'))
-    # website_public_price deprecated, directly use _get_combination_info instead
-    website_public_price = fields.Float('Website public price', compute='_website_price', digits=dp.get_precision('Product Price'))
-    # website_price_difference deprecated, directly use _get_combination_info instead
-    website_price_difference = fields.Boolean('Website price difference', compute='_website_price')
-
-    def _website_price(self):
-        current_website = self.env['website'].get_current_website()
-        for template in self.with_context(website_id=current_website.id):
-            res = template._get_combination_info()
-            template.website_price = res.get('price')
-            template.website_public_price = res.get('list_price')
-            template.website_price_difference = res.get('has_discounted_price')
-
     @api.multi
     def _has_no_variant_attributes(self):
         """Return whether this `product.template` has at least one no_variant
@@ -219,38 +204,6 @@ def _has_is_custom_values(self):
         """
         return any(v.is_custom for v in self._get_valid_product_attribute_values())
 
-    @api.multi
-    def _is_quick_add_to_cart_possible(self, parent_combination=None):
-        """
-        It's possible to quickly add to cart if there's no optional product,
-        there's only one possible combination and no value is set to is_custom.
-
-        Attributes set to dynamic or no_variant don't have to be tested
-        specifically because they will be taken into account when checking for
-        the possible combinations.
-
-        :param parent_combination: combination from which `self` is an
-            optional or accessory product
-        :type parent_combination: recordset `product.template.attribute.value`
-
-        :return: True if it's possible to quickly add to cart, else False
-        :rtype: bool
-        """
-        self.ensure_one()
-
-        if not self._is_add_to_cart_possible(parent_combination):
-            return False
-        gen = self._get_possible_combinations(parent_combination)
-        first_possible_combination = next(gen)
-        if next(gen, False) is not False:
-            # there are at least 2 possible combinations.
-            return False
-        if self._has_is_custom_values():
-            return False
-        if self.optional_product_ids.filtered(lambda p: p._is_add_to_cart_possible(first_possible_combination)):
-            return False
-        return True
-
     @api.multi
     def _get_possible_variants_sorted(self, parent_combination=None):
         """Return the sorted recordset of variants that are possible.
@@ -429,20 +382,6 @@ class Product(models.Model):
 
     product_variant_image_ids = fields.One2many('product.image', 'product_variant_id', string="Extra Variant Images")
 
-    # website_price deprecated, directly use _get_combination_info instead
-    website_price = fields.Float('Website price', compute='_website_price', digits=dp.get_precision('Product Price'))
-    # website_public_price deprecated, directly use _get_combination_info instead
-    website_public_price = fields.Float('Website public price', compute='_website_price', digits=dp.get_precision('Product Price'))
-    # website_price_difference deprecated, directly use _get_combination_info instead
-    website_price_difference = fields.Boolean('Website price difference', compute='_website_price')
-
-    def _website_price(self):
-        for product in self:
-            res = product._get_combination_info_variant()
-            product.website_price = res.get('price')
-            product.website_public_price = res.get('list_price')
-            product.website_price_difference = res.get('has_discounted_price')
-
     @api.multi
     def website_publish_button(self):
         self.ensure_one()
diff --git a/addons/website_sale/models/sale_order.py b/addons/website_sale/models/sale_order.py
index 0d95368a22376..dd3ba9d287949 100644
--- a/addons/website_sale/models/sale_order.py
+++ b/addons/website_sale/models/sale_order.py
@@ -95,17 +95,8 @@ def _cart_find_product_line(self, product_id=None, line_id=None, **kwargs):
 
         if line_id:
             return lines
-        linked_line_id = kwargs.get('linked_line_id', False)
-        optional_product_ids = set(kwargs.get('optional_product_ids', []))
 
-        lines = lines.filtered(lambda line: line.linked_line_id.id == linked_line_id)
-        if optional_product_ids:
-            # only match the lines with the same chosen optional products on the existing lines
-            lines = lines.filtered(lambda line: optional_product_ids == set(line.mapped('option_line_ids.product_id.id')))
-        else:
-            lines = lines.filtered(lambda line: not line.option_line_ids)
-
-        return lines
+        return self.env['sale.order.line']
 
     @api.multi
     def _website_product_id_change(self, order_id, product_id, qty=0):
@@ -133,28 +124,6 @@ def _website_product_id_change(self, order_id, product_id, qty=0):
             'price_unit': pu,
         }
 
-    @api.multi
-    def _get_line_description(self, order_id, product_id, no_variant_attribute_values=None, custom_values=None):
-        """Deprecated, use `get_sale_order_line_multiline_description_sale`"""
-        order = self.sudo().browse(order_id)
-        product_context = dict(self.env.context)
-        product_context.setdefault('lang', order.partner_id.lang)
-        product = self.env['product.product'].with_context(product_context).browse(product_id)
-
-        name = product.display_name
-
-        if product.description_sale:
-            name += '\n%s' % (product.description_sale)
-
-        if no_variant_attribute_values:
-            name += ''.join(['\n%s: %s' % (attribute_value['attribute_name'], attribute_value['attribute_value_name'])
-                for attribute_value in no_variant_attribute_values])
-
-        if custom_values:
-            name += ''.join(['\n%s: %s' % (custom_value['attribute_value_name'], custom_value['custom_value']) for custom_value in custom_values])
-
-        return name
-
     @api.multi
     def _cart_update(self, product_id=None, line_id=None, add_qty=0, set_qty=0, **kwargs):
         """ Add or set product quantity, add_qty can be negative """
diff --git a/addons/website_sale/static/src/js/variant_mixin.js b/addons/website_sale/static/src/js/variant_mixin.js
new file mode 100644
index 0000000000000..0e92564bd5c42
--- /dev/null
+++ b/addons/website_sale/static/src/js/variant_mixin.js
@@ -0,0 +1,23 @@
+odoo.define('website_sale.VariantMixin', function (require) {
+'use strict';
+
+var VariantMixin = require('sale.VariantMixin');
+
+/**
+ * Website behavior is slightly different from backend so we append
+ * "_website" to URLs to lead to a different route
+ *
+ * @private
+ * @param {string} uri The uri to adapt
+ */
+VariantMixin._getUri = function (uri) {
+    if (this.isWebsite){
+        return uri + '_website';
+    } else {
+        return uri;
+    }
+};
+
+return VariantMixin;
+
+});
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index c4ff6d79e14d2..5ec92758b62b5 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -121,12 +121,12 @@ odoo.define('website_sale.website_sale', function (require) {
 var core = require('web.core');
 var config = require('web.config');
 var publicWidget = require('web.public.widget');
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
+var VariantMixin = require('sale.VariantMixin');
 require("website.content.zoomodoo");
 
-publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfiguratorMixin, {
+publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
     selector: '.oe_website_sale',
-    events: _.extend({}, ProductConfiguratorMixin.events || {}, {
+    events: _.extend({}, VariantMixin.events || {}, {
         'change form .js_product:first input[name="add_qty"]': '_onChangeAddQuantity',
         'mouseup .js_publish': '_onMouseupPublish',
         'touchend .js_publish': '_onMouseupPublish',
@@ -143,6 +143,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
         'change select[name="country_id"]': '_onChangeCountry',
         'change #shipping_use_same': '_onChangeShippingUseSame',
         'click .toggle_summary': '_onToggleSummary',
+        'click #add_to_cart, #products_grid .product_price .a-submit': 'async _onClickAdd',
         'click input.js_product_change': 'onChangeVariant',
         // dirty fix: prevent options modal events to be triggered and bubbled
         'change oe_optional_products_modal [data-attribute_exclusions]': 'onChangeVariant',
@@ -198,7 +199,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
         if (combination) {
             return JSON.parse(combination);
         }
-        return ProductConfiguratorMixin.getSelectedVariantValues.apply(this, arguments);
+        return VariantMixin.getSelectedVariantValues.apply(this, arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -326,7 +327,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
             return parseInt($parent.find('input.js_product_change:checked').val());
         }
         else {
-            return ProductConfiguratorMixin._getProductId.apply(this, arguments);
+            return VariantMixin._getProductId.apply(this, arguments);
         }
     },
     /**
@@ -368,7 +369,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
      * @override
      * @private
      */
-    _updateProductImage: function ($productContainer, productId, productTemplateId, new_carousel) {
+    _updateProductImage: function ($productContainer, displayImage, productId, productTemplateId, new_carousel) {
         var $img;
         var $carousel = $productContainer.find('#o-carousel-product');
 
@@ -414,13 +415,91 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
             }
         }
 
-        $carousel.toggleClass('css_not_available', !this.isSelectedVariantAllowed);
+        $carousel.toggleClass('css_not_available',
+            $productContainer.find('.js_main_product').hasClass('css_not_available'));
     },
 
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAdd: function (ev) {
+        ev.preventDefault();
+        return this._handleAdd($(ev.currentTarget).closest('form'));
+    },
+
+    /**
+     * Initializes the optional products modal
+     * and add handlers to the modal events (confirm, back, ...)
+     *
+     * @private
+     * @param {$.Element} $form the related webshop form
+     */
+    _handleAdd: function ($form) {
+        var self = this;
+        this.$form = $form;
+
+        var productSelector = [
+            'input[type="hidden"][name="product_id"]',
+            'input[type="radio"][name="product_id"]:checked'
+        ];
+
+        var productReady = this.selectOrCreateProduct(
+            $form,
+            parseInt($form.find(productSelector.join(', ')).first().val(), 10),
+            $form.find('.product_template_id').val(),
+            false
+        );
+
+        productReady.then(function (productId){
+            $form.find(productSelector.join(', ')).val(productId);
+
+            self.rootProduct = {
+                product_id: productId,
+                quantity: parseFloat($form.find('input[name="add_qty"]').val() || 1),
+                product_custom_attribute_values: self.getCustomVariantValues($form.find('.js_product')),
+                variant_values: self.getSelectedVariantValues($form.find('.js_product')),
+                no_variant_attribute_values: self.getNoVariantAttributeValues($form.find('.js_product'))
+            };
+
+            return self._onProductReady();
+        });
+
+        return productReady;
+    },
+
+    _onProductReady: function () {
+        this._submitForm();
+    },
+
+    /**
+     * Add custom variant values and attribute values that do not generate variants
+     * in the form data and trigger submit.
+     *
+     * @private
+     */
+    _submitForm: function () {
+        var $productCustomVariantValues = $('<input>', {
+            name: 'product_custom_attribute_values',
+            type: "hidden",
+            value: JSON.stringify(this.rootProduct.product_custom_attribute_values)
+        });
+        this.$form.append($productCustomVariantValues);
+
+        var $productNoVariantAttributeValues = $('<input>', {
+            name: 'no_variant_attribute_values',
+            type: "hidden",
+            value: JSON.stringify(this.rootProduct.no_variant_attribute_values)
+        });
+        this.$form.append($productNoVariantAttributeValues);
+
+        this.$form.trigger('submit', [true]);
+    },
+
     /**
      * @private
      * @param {MouseEvent} ev
@@ -596,7 +675,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
             $el.attr('selected', $el.is(':selected'));
         });
 
-        return ProductConfiguratorMixin.onChangeVariant.apply(this, arguments);
+        return VariantMixin.onChangeVariant.apply(this, arguments);
     },
     /**
      * @private
diff --git a/addons/website_sale/static/src/js/website_sale_options.js b/addons/website_sale/static/src/js/website_sale_options.js
deleted file mode 100644
index 5e55afe0e18f7..0000000000000
--- a/addons/website_sale/static/src/js/website_sale_options.js
+++ /dev/null
@@ -1,193 +0,0 @@
-odoo.define('website_sale_options.website_sale', function (require) {
-'use strict';
-
-var core = require('web.core');
-var publicWidget = require('web.public.widget');
-var OptionalProductsModal = require('sale.OptionalProductsModal');
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
-require('website_sale.website_sale');
-
-var _t = core._t;
-
-publicWidget.registry.WebsiteSaleOptions = publicWidget.Widget.extend(ProductConfiguratorMixin, {
-    selector: '.oe_website_sale',
-    events: _.extend({}, ProductConfiguratorMixin.events || {}, {
-        'click #add_to_cart, #products_grid .product_price .a-submit': 'async _onClickAdd',
-    }),
-
-    /**
-     * @constructor
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-
-        this.isWebsite = true;
-
-        delete this.events['change [data-attribute_exclusions]'];
-        delete this.events['click input.js_product_change'];
-        delete this.events['change input.js_quantity'];
-        delete this.events['click button.js_add_cart_json'];
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Prevents the default submit to allow showing product options
-     * in a modal (if any)
-     *
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onClickAdd: function (ev) {
-        ev.preventDefault();
-        return this._handleAdd($(ev.currentTarget).closest('form'));
-    },
-
-    /**
-     * Initializes the optional products modal
-     * and add handlers to the modal events (confirm, back, ...)
-     *
-     * @private
-     * @param {$.Element} $form the related webshop form
-     */
-    _handleAdd: function ($form) {
-        var self = this;
-        this.$form = $form;
-        this.isWebsite = true;
-
-        var productSelector = [
-            'input[type="hidden"][name="product_id"]',
-            'input[type="radio"][name="product_id"]:checked'
-        ];
-
-        var productReady = this.selectOrCreateProduct(
-            $form,
-            parseInt($form.find(productSelector.join(', ')).first().val(), 10),
-            $form.find('.product_template_id').val(),
-            false
-        );
-
-        productReady.then(function (productId){
-            $form.find(productSelector.join(', ')).val(productId);
-
-            self.rootProduct = {
-                product_id: productId,
-                quantity: parseFloat($form.find('input[name="add_qty"]').val() || 1),
-                product_custom_attribute_values: self.getCustomVariantValues($form.find('.js_product')),
-                variant_values: self.getSelectedVariantValues($form.find('.js_product')),
-                no_variant_attribute_values: self.getNoVariantAttributeValues($form.find('.js_product'))
-            };
-
-            self.optionalProductsModal = new OptionalProductsModal($form, {
-                rootProduct: self.rootProduct,
-                isWebsite: true,
-                okButtonText: _t('Proceed to Checkout'),
-                cancelButtonText: _t('Continue Shopping'),
-                title: _t('Add to cart'),
-                context: self._getContext(),
-            }).open();
-
-            self.optionalProductsModal.on('options_empty', null, self._onModalOptionsEmpty.bind(self));
-            self.optionalProductsModal.on('update_quantity', null, self._onOptionsUpdateQuantity.bind(self));
-            self.optionalProductsModal.on('confirm', null, self._onModalConfirm.bind(self));
-            self.optionalProductsModal.on('back', null, self._onModalBack.bind(self));
-
-            return self.optionalProductsModal.opened();
-        });
-
-        return productReady;
-    },
-
-    /**
-     * No optional products found for this product
-     * Add custom variant values and attribute values that do not generate variants
-     * in the form data and trigger submit
-     *
-     * @private
-     */
-    _onModalOptionsEmpty: function () {
-        var $productCustomVariantValues = $('<input>', {
-            name: 'product_custom_attribute_values',
-            type: "hidden",
-            value: JSON.stringify(this.rootProduct.product_custom_attribute_values)
-        });
-        this.$form.append($productCustomVariantValues);
-
-        var $productNoVariantAttributeValues = $('<input>', {
-            name: 'no_variant_attribute_values',
-            type: "hidden",
-            value: JSON.stringify(this.rootProduct.no_variant_attribute_values)
-        });
-        this.$form.append($productNoVariantAttributeValues);
-
-        this.$form.trigger('submit', [true]);
-    },
-
-    /**
-     * Update web shop base form quantity
-     * when quantity is updated in the optional products window
-     *
-     * @private
-     * @param {integer} quantity
-     */
-    _onOptionsUpdateQuantity: function (quantity) {
-        this.$form
-            .find('input[name="add_qty"]')
-            .first()
-            .val(quantity)
-            .trigger('change');
-    },
-
-    /**
-     * Submit form and stay on the same page
-     *
-     * @private
-     */
-    _onModalBack: function () {
-        this._onModalSubmit(false);
-    },
-
-    /**
-     * Submit form and go to shop
-     *
-     * @private
-     */
-    _onModalConfirm: function () {
-        this._onModalSubmit(true);
-    },
-
-    /**
-     * Submits the form with additional parameters
-     * - lang
-     * - product_custom_attribute_values: The products custom variant values
-     *
-     * @private
-     * @param {Boolean} goToShop Triggers a page refresh to the url "shop/cart"
-     */
-    _onModalSubmit: function (goToShop){
-        var customValues = JSON.stringify(
-            this.optionalProductsModal.getSelectedProducts()
-        );
-
-        this.$form.ajaxSubmit({
-            url:  '/shop/cart/update_option',
-            data: {
-                lang: this._getContext().lang,
-                custom_values: customValues
-            },
-            success: function (quantity) {
-                if (goToShop) {
-                    var path = window.location.pathname.replace(/shop([\/?].*)?$/, "shop/cart");
-                    window.location.pathname = path;
-                }
-                var $quantity = $(".my_cart_quantity");
-                $quantity.parent().parent().removeClass("d-none", !quantity);
-                $quantity.html(quantity).hide().fadeIn(600);
-            }
-        });
-    },
-});
-return publicWidget.registry.WebsiteSaleOptions;
-});
diff --git a/addons/website_sale/views/res_config_settings_views.xml b/addons/website_sale/views/res_config_settings_views.xml
index 6a2daeee7daba..db46110900e35 100644
--- a/addons/website_sale/views/res_config_settings_views.xml
+++ b/addons/website_sale/views/res_config_settings_views.xml
@@ -16,7 +16,7 @@
                         <div class="o_setting_right_pane">
                             <label for="group_product_variant"/>
                             <div class="text-muted">
-                                Set product attributes (e.g. color, size) to sell variants
+                                Sell variants of a product using attributes (size, color, etc.)
                             </div>
                             <div class="content-group" attrs="{'invisible': [('group_product_variant', '=', False)]}">
                                 <div class="mt16">
@@ -25,6 +25,17 @@
                             </div>
                         </div>
                     </div>
+                    <div class="col-12 col-lg-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="module_sale_product_configurator" string="Optional Products"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label for="module_sale_product_configurator" string="Optional Products"/>
+                            <div class="text-muted">
+                                Display a prompt with optional products when adding to cart
+                            </div>
+                        </div>
+                    </div>
                     <div class="col-12 col-lg-6 o_setting_box" id="digital_content_setting" title="Provide customers with product-specific links or downloadable content in the confirmation page of the checkout process if the payment gets through. To do so, attach some files to a product using the new Files button and publish them.">
                         <div class="o_setting_left_pane">
                             <field name="module_website_sale_digital"/>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 3d4cd01eda416..a00b6a0eb8529 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -17,11 +17,10 @@
             <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale_frontend.scss"/>
             <link rel="stylesheet" type="text/scss" href="/sale/static/src/scss/sale_portal.scss"/>
             <link rel="stylesheet" type="text/scss" href="/sale/static/src/scss/product_configurator.scss"/>
-            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale_options.scss"/>
         </xpath>
         <xpath expr="script[last()]" position="after">
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_mixin.js"></script>
-            <script type="text/javascript" src="/sale/static/src/js/product_configurator_modal.js"></script>
+            <script type="text/javascript" src="/sale/static/src/js/variant_mixin.js"></script>
+            <script type="text/javascript" src="/website_sale/static/src/js/variant_mixin.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_utils.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_payment.js"></script>
@@ -35,7 +34,6 @@
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop_deleted_archived_variants.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop_list_view_b2c.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop_no_variant_attribute.js"></script>
-            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_options.js"></script>
         </xpath>
     </template>
 
@@ -420,8 +418,8 @@
 
     <template id="product" name="Product">
 
-        <t t-set="first_possible_combination" t-value="product._get_first_possible_combination()"/>
-        <t t-set="combination_info" t-value="product._get_combination_info(first_possible_combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
+        <t t-set="combination" t-value="product._get_first_possible_combination()"/>
+        <t t-set="combination_info" t-value="product._get_combination_info(combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
         <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
 
         <t t-call="website.layout">
@@ -464,7 +462,7 @@
                                     <t t-placeholder="select">
                                         <input type="hidden" class="product_id" name="product_id" t-att-value="product_variant.id" />
                                         <input type="hidden" class="product_template_id" name="product_template_id" t-att-value="product.id" />
-                                        <t t-if="first_possible_combination" t-call="sale.variants">
+                                        <t t-if="combination" t-call="sale.variants">
                                             <t t-set="ul_class" t-value="'flex-column'" />
                                             <t t-set="parent_combination" t-value="None" />
                                         </t>
@@ -626,7 +624,7 @@
                     <div t-foreach="filtered_sorted_variants" t-as="variant_id" class="custom-control custom-radio">
                         <t t-set="template_combination_info" t-value="product._get_combination_info(only_template=True, add_qty=add_qty, pricelist=pricelist)"/>
                         <t t-set="combination_info" t-value="variant_id._get_combination_info_variant(add_qty=add_qty, pricelist=pricelist)"/>
-                        <input type="radio" name="product_id" class="custom-control-input product_id js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-lst_price="combination_info['list_price']" t-att-data-price="combination_info['price']" t-att-data-combination="variant_id.product_template_attribute_value_ids.ids"/>
+                        <input type="radio" name="product_id" class="custom-control-input product_id js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-price="combination_info['price']" t-att-data-combination="variant_id.product_template_attribute_value_ids.ids"/>
                         <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="custom-control-label">
                             <span t-esc="combination_info['display_name']"/>
                             <t t-set="diff_price" t-value="website.currency_id.compare_amounts(combination_info['price'], template_combination_info['price'])"/>
diff --git a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
index 9410db2c21aa1..306ee1a44f9c7 100644
--- a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
+++ b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
@@ -4,16 +4,16 @@ odoo.define('website_sale_comparison.comparison', function (require) {
 var core = require('web.core');
 var publicWidget = require('web.public.widget');
 var utils = require('web.utils');
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
+var VariantMixin = require('sale.VariantMixin');
 var website_sale_utils = require('website_sale.utils');
 
 var qweb = core.qweb;
 var _t = core._t;
 
-// ProductConfiguratorMixin events are overridden on purpose here
+// VariantMixin events are overridden on purpose here
 // to avoid registering them more than once since they are already registered
 // in website_sale.js
-var ProductComparison = publicWidget.Widget.extend(ProductConfiguratorMixin, {
+var ProductComparison = publicWidget.Widget.extend(VariantMixin, {
     xmlDependencies: ['/website_sale_comparison/static/src/xml/comparison.xml'],
 
     template: 'product_comparison_template',
diff --git a/addons/website_sale_product_configurator/__init__.py b/addons/website_sale_product_configurator/__init__.py
new file mode 100644
index 0000000000000..aa4d0fd63a934
--- /dev/null
+++ b/addons/website_sale_product_configurator/__init__.py
@@ -0,0 +1,4 @@
+# -*- coding: utf-8 -*-
+
+from . import controllers
+from . import models
diff --git a/addons/website_sale_product_configurator/__manifest__.py b/addons/website_sale_product_configurator/__manifest__.py
new file mode 100644
index 0000000000000..690eef24235e1
--- /dev/null
+++ b/addons/website_sale_product_configurator/__manifest__.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+{
+    'name': "Website Sale Product Configurator",
+    'summary': """
+        Bridge module for website_sale / sale_product_configurator""",
+    'description': """
+        Bridge module to make the website e-commerce compatible with the product configurator
+    """,
+    'category': 'Technical Settings',
+    'version': '0.1',
+    'depends': ['website_sale', 'sale_product_configurator'],
+    'auto_install': True,
+    'data': [
+        'views/assets.xml',
+    ],
+    'demo': [
+        'data/demo.xml',
+    ],
+}
diff --git a/addons/website_sale_product_configurator/controllers/__init__.py b/addons/website_sale_product_configurator/controllers/__init__.py
new file mode 100644
index 0000000000000..65a8c12013d23
--- /dev/null
+++ b/addons/website_sale_product_configurator/controllers/__init__.py
@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import main
diff --git a/addons/website_sale_product_configurator/controllers/main.py b/addons/website_sale_product_configurator/controllers/main.py
new file mode 100644
index 0000000000000..19c29049cd644
--- /dev/null
+++ b/addons/website_sale_product_configurator/controllers/main.py
@@ -0,0 +1,99 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+import json
+from odoo import http
+from odoo.http import request
+
+from odoo.addons.sale_product_configurator.controllers.main import ProductConfiguratorController
+from odoo.addons.website_sale.controllers.main import WebsiteSale
+
+class WebsiteSaleProductConfiguratorController(ProductConfiguratorController):
+    @http.route(['/sale_product_configurator/show_optional_products_website'], type='json', auth="public", methods=['POST'], website=True)
+    def show_optional_products_website(self, product_id, variant_values, **kw):
+        """Special route to use website logic in get_combination_info override.
+        This route is called in JS by appending _website to the base route.
+        """
+        kw.pop('pricelist_id')
+        return self.show_optional_products(product_id, variant_values, request.website.get_current_pricelist(), **kw)
+
+    @http.route(['/sale_product_configurator/optional_product_items_website'], type='json', auth="public", methods=['POST'], website=True)
+    def optional_product_items_website(self, product_id, **kw):
+        """Special route to use website logic in get_combination_info override.
+        This route is called in JS by appending _website to the base route.
+        """
+        kw.pop('pricelist_id')
+        return self.optional_product_items(product_id, request.website.get_current_pricelist(), **kw)
+
+
+class WebsiteSale(WebsiteSale):
+    def _prepare_product_values(self, product, category, search, **kwargs):
+        values = super(WebsiteSale, self)._prepare_product_values(product, category, search, **kwargs)
+
+        values['optional_product_ids'] = [p.with_context({'active_id': p.id}) for p in product.optional_product_ids]
+        return values
+
+    @http.route(['/shop/cart/update_option'], type='http', auth="public", methods=['POST'], website=True, multilang=False)
+    def cart_options_update_json(self, product_id, add_qty=1, set_qty=0, goto_shop=None, lang=None, **kw):
+        """This route is called when submitting the optional product modal."""
+        if lang:
+            request.website = request.website.with_context(lang=lang)
+
+        order = request.website.sale_get_order(force_create=True)
+        if order.state != 'draft':
+            request.session['sale_order_id'] = None
+            order = request.website.sale_get_order(force_create=True)
+        optional_product_ids = []
+        for k, v in kw.items():
+            if "optional-product-" in k and int(kw.get(k.replace("product", "add"))):
+                optional_product_ids.append(int(v))
+
+        custom_values = []
+        if kw.get('custom_values'):
+            custom_values = json.loads(kw.get('custom_values'))
+
+        value = {}
+        if add_qty or set_qty:
+            value = order._cart_update(
+                product_id=int(product_id),
+                add_qty=add_qty,
+                set_qty=set_qty,
+                optional_product_ids=optional_product_ids,
+                product_custom_attribute_values=self._get_product_custom_value(
+                    int(product_id),
+                    custom_values,
+                    'product_custom_attribute_values'
+                ),
+                no_variant_attribute_values=self._get_product_custom_value(
+                    int(product_id),
+                    custom_values,
+                    'no_variant_attribute_values'
+                )
+            )
+
+        # options have all time the same quantity
+        for option_id in optional_product_ids:
+            order._cart_update(
+                product_id=option_id,
+                set_qty=value.get('quantity'),
+                linked_line_id=value.get('line_id'),
+                product_custom_attribute_values=self._get_product_custom_value(
+                    option_id,
+                    custom_values,
+                    'product_custom_attribute_values'
+                ),
+                no_variant_attribute_values=self._get_product_custom_value(
+                    option_id,
+                    custom_values,
+                    'no_variant_attribute_values'
+                )
+            )
+
+        return str(order.cart_quantity)
+
+    def _get_product_custom_value(self, product_id, custom_values, field):
+        if custom_values:
+            for custom_value in custom_values:
+                if custom_value['product_id'] == product_id:
+                    return custom_value[field]
+
+        return None
diff --git a/addons/website_sale_product_configurator/data/demo.xml b/addons/website_sale_product_configurator/data/demo.xml
new file mode 100644
index 0000000000000..a091b26688fef
--- /dev/null
+++ b/addons/website_sale_product_configurator/data/demo.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo noupdate="1">
+    <record id="sale_product_configurator.product_product_1_product_template" model="product.template">
+            <field name="website_sequence">100</field>
+            <field name="website_published" eval="True"/>
+        </record>
+    <record id="product.product_product_4_product_template" model="product.template">
+        <field name="optional_product_ids" eval="[(6,0,[ref('product.product_product_11_product_template'), ref('website_sale.product_product_1_product_template')])]"/>
+    </record>
+</odoo>
diff --git a/addons/website_sale_product_configurator/models/__init__.py b/addons/website_sale_product_configurator/models/__init__.py
new file mode 100644
index 0000000000000..6064afee17828
--- /dev/null
+++ b/addons/website_sale_product_configurator/models/__init__.py
@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import sale_order
diff --git a/addons/website_sale_product_configurator/models/sale_order.py b/addons/website_sale_product_configurator/models/sale_order.py
new file mode 100644
index 0000000000000..e3d1fdc96e79e
--- /dev/null
+++ b/addons/website_sale_product_configurator/models/sale_order.py
@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import api, models
+
+
+class SaleOrder(models.Model):
+    _inherit = "sale.order"
+
+    @api.multi
+    def _cart_find_product_line(self, product_id=None, line_id=None, **kwargs):
+        lines = super(SaleOrder, self)._cart_find_product_line(product_id, line_id, **kwargs)
+        if lines:
+            return lines
+
+        linked_line_id = kwargs.get('linked_line_id', False)
+        optional_product_ids = set(kwargs.get('optional_product_ids', []))
+
+        lines = lines.filtered(lambda line: line.linked_line_id.id == linked_line_id)
+        if optional_product_ids:
+            # only match the lines with the same chosen optional products on the existing lines
+            lines = lines.filtered(lambda line: optional_product_ids == set(line.mapped('option_line_ids.product_id.id')))
+        else:
+            lines = lines.filtered(lambda line: not line.option_line_ids)
+
+        return lines
diff --git a/addons/website_sale_product_configurator/static/src/js/product_configurator_modal.js b/addons/website_sale_product_configurator/static/src/js/product_configurator_modal.js
new file mode 100644
index 0000000000000..a6ebf95d32ca7
--- /dev/null
+++ b/addons/website_sale_product_configurator/static/src/js/product_configurator_modal.js
@@ -0,0 +1,42 @@
+odoo.define('website_sale_product_configurator.OptionalProductsModal', function (require) {
+    "use strict";
+
+var OptionalProductsModal = require('sale_product_configurator.OptionalProductsModal');
+
+OptionalProductsModal.include({
+    /**
+     * If the "isWebsite" param is true, will also disable the following events:
+     * - change [data-attribute_exclusions]
+     * - click button.js_add_cart_json
+     *
+     * This has to be done because those events are already registered at the "website_sale"
+     * component level.
+     * This modal is part of the form that has these events registered and we
+     * want to avoid duplicates.
+     *
+     * @override
+     * @param {$.Element} parent The parent container
+     * @param {Object} params
+     * @param {boolean} params.isWebsite If we're on a web shop page, we need some
+     *   custom behavior
+     */
+    init: function (parent, params) {
+        this._super.apply(this, arguments);
+        this.isWebsite = params.isWebsite;
+
+        if (this.isWebsite) {
+            delete this.events['click button.js_add_cart_json'];
+        }
+
+        this.dialogClass = 'oe_optional_products_modal' + (params.isWebsite ? ' oe_website_sale' : '');
+    },
+    /**
+     * @override
+     * @private
+     */
+    _triggerPriceUpdateOnChangeQuantity: function () {
+        return !this.isWebsite;
+    }
+});
+
+});
diff --git a/addons/website_sale_product_configurator/static/src/js/website_sale_options.js b/addons/website_sale_product_configurator/static/src/js/website_sale_options.js
new file mode 100644
index 0000000000000..d32cb5ef0dddf
--- /dev/null
+++ b/addons/website_sale_product_configurator/static/src/js/website_sale_options.js
@@ -0,0 +1,84 @@
+odoo.define('website_sale_options.website_sale', function (require) {
+'use strict';
+
+var core = require('web.core');
+var publicWidget = require('web.public.widget');
+var OptionalProductsModal = require('sale_product_configurator.OptionalProductsModal');
+require('website_sale.website_sale');
+
+var _t = core._t;
+
+publicWidget.registry.WebsiteSale.include({
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    _onProductReady: function () {
+        this.optionalProductsModal = new OptionalProductsModal(this.$form, {
+            rootProduct: this.rootProduct,
+            isWebsite: true,
+            okButtonText: _t('Proceed to Checkout'),
+            cancelButtonText: _t('Continue Shopping'),
+            title: _t('Add to cart'),
+            context: this._getContext(),
+        }).open();
+
+        this.optionalProductsModal.on('options_empty', null, this._submitForm.bind(this));
+        this.optionalProductsModal.on('update_quantity', null, this._onOptionsUpdateQuantity.bind(this));
+        this.optionalProductsModal.on('confirm', null, this._onModalSubmit.bind(this, true));
+        this.optionalProductsModal.on('back', null, this._onModalSubmit.bind(this, false));
+
+        return this.optionalProductsModal.opened();
+    },
+
+    /**
+     * Update web shop base form quantity
+     * when quantity is updated in the optional products window
+     *
+     * @private
+     * @param {integer} quantity
+     */
+    _onOptionsUpdateQuantity: function (quantity) {
+        this.$form
+            .find('input[name="add_qty"]')
+            .first()
+            .val(quantity)
+            .trigger('change');
+    },
+
+    /**
+     * Submits the form with additional parameters
+     * - lang
+     * - product_custom_attribute_values: The products custom variant values
+     *
+     * @private
+     * @param {Boolean} goToShop Triggers a page refresh to the url "shop/cart"
+     */
+    _onModalSubmit: function (goToShop){
+        var customValues = JSON.stringify(
+            this.optionalProductsModal.getSelectedProducts()
+        );
+
+        this.$form.ajaxSubmit({
+            url:  '/shop/cart/update_option',
+            data: {
+                lang: this._getContext().lang,
+                custom_values: customValues
+            },
+            success: function (quantity) {
+                if (goToShop) {
+                    var path = window.location.pathname.replace(/shop([\/?].*)?$/, "shop/cart");
+                    window.location.pathname = path;
+                }
+                var $quantity = $(".my_cart_quantity");
+                $quantity.parent().parent().removeClass("d-none", !quantity);
+                $quantity.html(quantity).hide().fadeIn(600);
+            }
+        });
+    },
+});
+
+return publicWidget.registry.WebsiteSaleOptions;
+
+});
diff --git a/addons/website_sale/static/src/scss/website_sale_options.scss b/addons/website_sale_product_configurator/static/src/scss/website_sale_options.scss
similarity index 100%
rename from addons/website_sale/static/src/scss/website_sale_options.scss
rename to addons/website_sale_product_configurator/static/src/scss/website_sale_options.scss
diff --git a/addons/website_sale_product_configurator/views/assets.xml b/addons/website_sale_product_configurator/views/assets.xml
new file mode 100644
index 0000000000000..3cbe8fff46837
--- /dev/null
+++ b/addons/website_sale_product_configurator/views/assets.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="assets_frontend" inherit_id="website.assets_frontend" name="website_sale_product_configurator assets frontend">
+        <xpath expr="link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/sale/static/src/scss/product_configurator.scss"/>
+            <link rel="stylesheet" type="text/scss" href="/website_sale_product_configurator/static/src/scss/website_sale_options.scss"/>
+        </xpath>
+        <xpath expr="script[contains(@src, '/website_sale/static/src/js/website_sale.js')]" position="before">
+            <script type="text/javascript" src="/sale_product_configurator/static/src/js/product_configurator_modal.js"></script>
+            <script type="text/javascript" src="/website_sale_product_configurator/static/src/js/product_configurator_modal.js"></script>
+        </xpath>
+        <xpath expr="script[last()]" position="after">
+            <script type="text/javascript" src="/website_sale_product_configurator/static/src/js/website_sale_options.js"></script>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/website_sale_stock/controllers/__init__.py b/addons/website_sale_stock/controllers/__init__.py
index 5d4b25db9c001..b6ee6a5108f6d 100644
--- a/addons/website_sale_stock/controllers/__init__.py
+++ b/addons/website_sale_stock/controllers/__init__.py
@@ -1,4 +1,4 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
-from . import main
+from . import variant
diff --git a/addons/website_sale_stock/controllers/main.py b/addons/website_sale_stock/controllers/main.py
deleted file mode 100644
index 58442ef9471ff..0000000000000
--- a/addons/website_sale_stock/controllers/main.py
+++ /dev/null
@@ -1,18 +0,0 @@
-# -*- coding: utf-8 -*-
-# Part of Odoo. See LICENSE file for full copyright and licensing details.
-
-from odoo import http
-from odoo.addons.website_sale.controllers.main import WebsiteSale
-from odoo.http import request
-
-
-class WebsiteSale(WebsiteSale):
-    def _get_combination_info(self, product_template_id, product_id, combination, add_qty, pricelist, **kw):
-        """deprecated, use product method"""
-        combination = request.env['product.template.attribute.value'].browse(combination)
-        return request.env['product.template'].browse(int(product_template_id))._get_combination_info(combination, product_id, add_qty, pricelist)
-
-    @http.route()
-    def get_combination_info_website(self, product_template_id, product_id, combination, add_qty, **kw):
-        kw['context'] = {'website_sale_stock_get_quantity': True}
-        return super(WebsiteSale, self).get_combination_info_website(product_template_id, product_id, combination, add_qty, **kw)
diff --git a/addons/website_sale_stock/controllers/variant.py b/addons/website_sale_stock/controllers/variant.py
new file mode 100644
index 0000000000000..d1e318c21cac3
--- /dev/null
+++ b/addons/website_sale_stock/controllers/variant.py
@@ -0,0 +1,12 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import http
+from odoo.addons.website_sale.controllers.variant import WebsiteSaleVariantController
+
+
+class WebsiteSaleStockVariantController(WebsiteSaleVariantController):
+    @http.route()
+    def get_combination_info_website(self, product_template_id, product_id, combination, add_qty, **kw):
+        kw['context'] = {'website_sale_stock_get_quantity': True}
+        return super(WebsiteSaleStockVariantController, self).get_combination_info_website(product_template_id, product_id, combination, add_qty, **kw)
diff --git a/addons/website_sale_stock/static/src/js/product_configurator_mixin.js b/addons/website_sale_stock/static/src/js/variant_mixin.js
similarity index 86%
rename from addons/website_sale_stock/static/src/js/product_configurator_mixin.js
rename to addons/website_sale_stock/static/src/js/variant_mixin.js
index e844f90a64953..efb828d64d51f 100644
--- a/addons/website_sale_stock/static/src/js/product_configurator_mixin.js
+++ b/addons/website_sale_stock/static/src/js/variant_mixin.js
@@ -1,7 +1,7 @@
-odoo.define('website_sale_stock.ProductConfiguratorMixin', function (require) {
+odoo.define('website_sale_stock.VariantMixin', function (require) {
 'use strict';
 
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
+var VariantMixin = require('sale.VariantMixin');
 var publicWidget = require('web.public.widget');
 var ajax = require('web.ajax');
 var core = require('web.core');
@@ -12,7 +12,7 @@ var xml_load = ajax.loadXML(
 );
 
 /**
- * Addition to the product_configurator_mixin._onChangeCombination
+ * Addition to the variant_mixin._onChangeCombination
  *
  * This will prevent the user from selecting a quantity that is not available in the
  * stock for that product.
@@ -26,7 +26,7 @@ var xml_load = ajax.loadXML(
  * @param {$.Element} $parent
  * @param {Array} combination
  */
-ProductConfiguratorMixin._onChangeCombinationStock = function (ev, $parent, combination) {
+VariantMixin._onChangeCombinationStock = function (ev, $parent, combination) {
     var product_id = 0;
     // needed for list view of variants
     if ($parent.find('input.product_id:checked').length) {
@@ -82,10 +82,10 @@ publicWidget.registry.WebsiteSale.include({
      */
     _onChangeCombination: function (){
         this._super.apply(this, arguments);
-        ProductConfiguratorMixin._onChangeCombinationStock.apply(this, arguments);
+        VariantMixin._onChangeCombinationStock.apply(this, arguments);
     }
 });
 
-return ProductConfiguratorMixin;
+return VariantMixin;
 
 });
diff --git a/addons/website_sale_stock/views/website_sale_stock_templates.xml b/addons/website_sale_stock/views/website_sale_stock_templates.xml
index 9581154c616cf..bd215e905162f 100644
--- a/addons/website_sale_stock/views/website_sale_stock_templates.xml
+++ b/addons/website_sale_stock/views/website_sale_stock_templates.xml
@@ -2,7 +2,7 @@
 <odoo>
     <template id="assets_frontend" inherit_id="website.assets_frontend" name="Website Sale Stock">
         <xpath expr="." position="inside">
-            <script type="text/javascript" src="/website_sale_stock/static/src/js/product_configurator_mixin.js" />
+            <script type="text/javascript" src="/website_sale_stock/static/src/js/variant_mixin.js" />
         </xpath>
     </template>
 
@@ -57,7 +57,7 @@
     </xpath>
   </template>
 
-  <template id="website_sale_stock_modal" inherit_id="sale.product_configurator_configure_optional_products" name="Stocks Modal">
+  <template id="website_sale_stock_modal" inherit_id="sale_product_configurator.configure_optional_products" name="Stocks Modal">
         <xpath expr="//input[@type='text'][hasclass('quantity')]" position="attributes">
           <attribute name='t-att-data-max'>max(product.sudo().virtual_available - product.cart_qty, 1) if handle_stock and product.type == "product" and product.inventory_availability in ["always", "threshold"] else None</attribute>
         </xpath>
diff --git a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
index 53f821c28c1bb..49ab188b29411 100644
--- a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
+++ b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
@@ -3,12 +3,12 @@ odoo.define('website_sale_wishlist.wishlist', function (require) {
 
 var publicWidget = require('web.public.widget');
 var wSaleUtils = require('website_sale.utils');
-var ProductConfiguratorMixin = require('sale.ProductConfiguratorMixin');
+var VariantMixin = require('sale.VariantMixin');
 
-// ProductConfiguratorMixin events are overridden on purpose here
+// VariantMixin events are overridden on purpose here
 // to avoid registering them more than once since they are already registered
 // in website_sale.js
-publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(ProductConfiguratorMixin, {
+publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin, {
     selector: '.oe_website_sale',
     events: {
         'click #my_wish': '_onClickMyWish',
diff --git a/odoo/addons/test_main_flows/static/src/js/tour.js b/odoo/addons/test_main_flows/static/src/js/tour.js
index d3608018cf8e5..4b08c5b1b223c 100644
--- a/odoo/addons/test_main_flows/static/src/js/tour.js
+++ b/odoo/addons/test_main_flows/static/src/js/tour.js
@@ -325,44 +325,69 @@ tour.register('main_flow_tour', {
     content: _t("Click here to add some lines to your quotations."),
     position: "bottom",
 }, {
-    trigger: ".o_field_widget[name=product_id] input",
+    /**
+     * We need both triggers because the "sale_product_configurator" module replaces the
+     * "product_id" field with a "product_template_id" field.
+     * This selector will still only ever select one element.
+     */
+    trigger: ".o_field_widget[name=product_id] input, .o_field_widget[name=product_template_id] input",
     content: _t("Select a product, or create a new one on the fly. The product will define the default sales price (that you can change), taxes and description automatically."),
     position: "right",
-    run: "text the_flow.product",
-}, {
-    trigger: ".ui-menu-item > a:contains('the_flow.product')",
-    auto: true,
-    in_modal: false,
     run: function (actions) {
-        actions.auto();
-        // if the one2many isn't editable, we have to close the dialog
-        if ($(".modal-footer .btn-primary").length) {
-            actions.auto(".modal-footer .btn-primary");
-        }
+        actions.text("the_flow.product", this.$anchor);
+        // fake keydown to trigger search
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        this.$anchor.trigger(keyDownEvent);
+        var $descriptionElement = $('.o_form_editable textarea[name="name"]');
+        // when description changes, we know the product has been loaded
+        $descriptionElement.change(function () {
+            if ($(this).val().indexOf('the_flow.product') !== -1){
+                $(this).addClass('product_loading_success');
+            }
+        });
     },
+}, {
+    trigger: ".ui-menu-item > a:contains('the_flow.product')",
+}, {
+    trigger: '.o_form_editable textarea[name="name"].product_loading_success',
+    run: function () {} // wait for product loading
 }, {
     trigger: ".o_field_widget[name=order_line] .o_field_x2many_list_row_add > a",
     content: _t("Click here to add some lines to your quotations."),
     position: "bottom",
 }, {
-    trigger: ".o_field_widget[name=product_id] input",
-    // the one2many may be editable or not according to the modules installed, so
-    // we have to handle both cases
-    extra_trigger: '.o_field_widget[name=order_line] .o_data_row:nth(1).o_selected_row, .modal-dialog',
+    /**
+     * We need both triggers because the "sale_product_configurator" module replaces the
+     * "product_id" field with a "product_template_id" field.
+     * This selector will still only ever select one element.
+     */
+    trigger: ".o_field_widget[name=product_id] input, .o_field_widget[name=product_template_id] input",
+    extra_trigger: '.o_field_widget[name=order_line] .o_data_row:nth(1).o_selected_row',
     content: _t("Select a product"),
     position: "right",
-    run: "text the_flow.service",
-}, {
-    trigger: ".ui-menu-item > a:contains('the_flow.service')",
-    auto: true,
-    in_modal: false,
     run: function (actions) {
-        actions.auto();
-        // if the one2many isn't editable, we have to close the dialog
-        if ($(".modal-footer .btn-primary").length) {
-            actions.auto(".modal-footer .btn-primary");
-        }
+        actions.text("the_flow.service", this.$anchor);
+        // fake keydown to trigger search
+        var keyDownEvent = jQuery.Event("keydown");
+        keyDownEvent.which = 42;
+        this.$anchor.trigger(keyDownEvent);
+        var $descriptionElement = $('.o_form_editable textarea[name="name"]');
+        // when description changes, we know the product has been loaded
+        $descriptionElement.change(function () {
+            if ($(this).val().indexOf('the_flow.service') !== -1){
+                $(this).addClass('product_service_loading_success');
+            }
+        });
     },
+}, {
+    trigger: ".ui-menu-item > a:contains('the_flow.service')",
+}, {
+    trigger: '.o_form_editable textarea[name="name"].product_service_loading_success',
+    run: function () {} // wait for product loading
+}, {
+    trigger: 'label:contains("Untaxed Amount")',
+    // click somewhere else to exit cell focus
 }, {
     trigger: ".o_statusbar_buttons > button.o_sale_print:enabled",
     content: _t("<p><b>Print this quotation.</b></p>"),