Change Product Variant in Cart for PrestaShop: installation and setup

Overview

The module lets customers change the combination of a product (size, color or any other attribute) directly from the cart page, without removing the line. The new combination keeps the quantity, delivery address and position of the line. Stock and minimum quantity are checked by the server before the swap.

Installation

1. In Modules > Module Manager, click Upload a module and send dfcartcombination-1.0.0.zip.
2. The module registers the displayCartExtraProductActions and actionFrontControllerSetMedia hooks, and creates the ps_dfcartcombination_log table for the history.
3. Open the module configuration. Everything is on by default, in button with window mode.
4. Add a product with at least two combinations to the cart and open the cart page to check the display. If nothing shows, clear the cache in Advanced Parameters > Performance.

Settings

• Enable the module: when off, nothing is loaded on the cart page.
• Display mode: Button with selection window (one “Change” link per line) or Dropdown lists in the cart line (one list per attribute group, applied as soon as a value is picked).
• Place under product attributes: moves the selector under the line attributes. Turn it off to keep it where your theme calls the hook, usually in the action column next to the trash icon.
• Show price per combination: price of the selected combination, strikethrough price on discounts and difference from the current line. The price follows the tax display of the customer group.
• Show stock status: In stock, Only X left, Available on backorder or Out of stock. “Only X left” uses the remaining quantity threshold set in PrestaShop. Nothing is shown when stock management is off.
• Show combination image: first image linked to the combination, otherwise the product cover image.
• Unavailable combinations: Show as disabled or Hide. The value of the current line always stays visible.
• Excluded products: product IDs separated by commas. The selector does not show for these products and the server refuses any change on them.
• Accent color: color of the main button and of selected values.
• Record change history: feeds the statistics shown under the form.

Customer side

Window mode

The Change button opens a window with the combination image, the product name and the line quantity. Attribute groups follow the catalog order:

• color groups: swatches, with the attribute texture when there is one;
• radio or select groups: buttons, or a dropdown list beyond 8 values.

At the bottom, the price, price difference and stock status of the selection update on each click. The Update cart button stays disabled while the selection matches the line or is unavailable. The window closes with Escape, the cross or a click outside, and can be used with the keyboard (arrow keys between the values of a group). On mobile, it slides up from the bottom of the screen.

Dropdown mode

Each attribute group becomes a list in the line. The change is sent as soon as a value is picked. The attribute rows the theme already shows (for example “Size: S”) are hidden to avoid showing them twice. A message under the lists shows the update in progress or any error.

Combination that does not exist

If the chosen value does not exist with the other selected attributes (M Blue missing from the catalog for example), the module switches to the existing combination that contains this value and keeps the most current attributes, preferring an orderable one.

Checks before the swap

The browser sends the product, the current combination and the chosen one. The server then checks:

• the session token;
• that the product is active and available for order, and that catalog mode is off;
• that the chosen combination belongs to the product and the shop;
• that the original line is still in the cart, without customization;
• that the product is not tied to a gift cart rule of the cart;
• that the final quantity reaches the combination minimum quantity;
• that stock covers the final quantity, unless out of stock ordering is allowed for the product.

The new combination is added with the native updateQty method, then the old one is removed with deleteProduct. If the removal fails, the addition is reverted. If the chosen combination is already in the cart, quantities are added up on a single line. Otherwise, the new line takes over the date added of the old one to keep its place in the cart.

After the swap, the module fires the PrestaShop updateCart event. The theme then reloads the list, totals and mini cart. If the theme does not react within 3 seconds, the page reloads.

Lines not concerned

• products without combinations or with a single combination;
• lines with a customization (text, file);
• products given by a cart rule;
• products excluded in the configuration.

History and statistics

Under the configuration form, the Change history block shows:

• the number of changes and carts concerned over 30 days;
• the number of edited carts that became orders, with the rate;
• the 10 most changed products;
• the last 20 changes, with the starting combination and the chosen one.

The Clear history button deletes the data of the current shop. A product often changed to the next size up points to a size guide or product page worth reviewing.

Themes and customization

The Classic theme and most themes built on it call displayCartExtraProductActions in each cart line. If your theme does not call it, the script builds the selector from the remove links of the lines (data-id-product and data-id-product-attribute). The JavaScript file is loaded on the cart page only.

To adjust the style, override in your theme CSS the --dfcc-accent, --dfcc-text and --dfcc-border variables, or the .dfcc-edit, .dfcc-modal__dialog and .dfcc-option classes.

For developers

After each successful change, the module runs the actionDfCartCombinationChange hook with the cart, id_product, id_product_attribute_from, id_product_attribute_to and quantity parameters. A third party module can hook into it to sync a CRM or an analytics tool.

Known limits

• Customized lines keep their combination in version 1.0.0.
• The change is made from the cart page, not from the checkout summary or the mini cart.
• A side cart module that does not use the updateCart event only updates when the page reloads.