Prestashop Product Combinations Table/List View with Add to Cart {User Guide}

Prestashop Product Combinations Table/List View with Add to Cart:

Offer your customers a faster way of shopping by displaying all combinations with add to cart button on the product and listing pages.

Customers can add desired product combinations to the cart directly from the collection pages. Show the product combinations in a table or list view on the product and listing pages.

• Show all the combinations of a product in a table.
• Choose to show it at three positions viz. on the footer, at additional info section of the product page, or in a product tab.
• Show or hide the image of the product combinations in the table.
• Choose to show or hide the reference of the combinations of the product in the table.
• Show or hide the filter option on the product page to the customer.
• Show or hide the option to sort the combinations to the customer.
• Choose to show or hide the final price of the product after applying a discount.
• Choose to show attributes of combinations in separate columns in a table.
• Show or hide the per-unit price of the particular combination in the table.
• Display the product combinations on home, product, category, search, price drop, new products, best sales, manufacturer, and supplier pages.
• Three view types to show combinations on product listing pages viz. default, tabular, and listing.
• Choose to show add to cart button on category page.
• Show or hide the bulk add to cart button in the product combinations table.
• Choose to show or hide the default combination selection option.
• Show or hide the quantity input box & default add to cart button on the product page.
• View price for each combination separately in the table.
• Select categories of product for which combination table will display.
• Select individual products for which combination table will not display.
• Choose to display/hide out of stock combination.
• Display combination table only when customer applies filter.
• The module is multi-store compatible.

The module translations are available in these languages – Arabic(ar), Bulgarian (bg), German(de), Spanish(es), French(fr), Italian(it), Japanese(ja), Dutch(nl), Portuguese (pt), Russian(ru)

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• Now, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

After the successful installation of the Prestashop Product Combinations Table/List View with Add to Cart module, the admin needs to configure it. The configuration consists of four sections:

1. Product Page
2. Listing Pages
3. Combination Table structure
4. Restrictions

Product Page

Under the Product Page section, the admin can configure:

• Display product combination table on product page: The admin can choose to show the module on product page footer, additional info section, or in a separate product description tab.
• Enable filter options on product page: Show or hide the filter option on the product page. It helps customers to filter search results on the basis of various attributes of the product.
• Enable sort options on product page: Show or hide the option to sort the combinations adjacent to the combination table.
• Enable bulk add to cart on product page: Show or hide the bulk add to cart button. This will help customers to add multiple combinations to the cart in one go.
• Display table only when filter is applied: Show combination table only when customer applies filter.

Display product combination table on product page

Using this configuration, the admin can choose to show the module on two other sections:

Product page additional info

• Display default combination, quantity and add to cart on product page : The admin can choose to show default combination, quantity and add to cart button in the table.

Product tab

Listing Pages

Under the Listing Pages section, the admin can configure:

• Display combination and add-to-cart on product listing pages: Choose to show combination and add to cart button on the product listing pages.
• Display combination type on product listing page: The option lets you select the view type to show the product combinations on the front end. You can choose to show combinations in default, tabular, or listing view.
• Product listing pages: Select the pages where you want to show the product combinations.
• Enable filter options on product listing page: Show or hide the filter option on the product listing page.
• Enable sort options on product listing page: Show or hide sort options on product listing pages.
• Enable bulk add to cart on product listing page: Show or hide the bulk add to cart button on product listing page.

Display combination type on product listing page

Using this configuration, the admin can select the view type to show combinations on product listing pages:

Default view

Listing view

Combination table structure

Under the Combination table structure section, the admin can configure:

• Display combination attributes separately: If enabled, then each combination attribute will be displayed in a separate column.
• Display out-of-stock combinations: Choose to show out-of-stock combinations in the product combination table.
• Display Combination Image: Show or hide the image of the product combinations in the table.
• Display Combination Reference: Choose to show or hide the reference of the combinations of the product in the table.
• Display Combination Quantity: Show or hide the quantity of each combination in the table.
• Display Combination Final Price: Choose to show or hide the final price of the product after applying a discount.
• Display Combination Final Unit Price: Show or hide the per-unit price of the particular combination in the table.

Restrictions

Under the Restrictions section, the admin can configure:

• Select categories to show combination view on category products: Select multiple categories for which you want to show the combination view.
• Select products to hide combination view: Choose individual products on which combination table will not display.

On the Footer of Product Page

After configuring the above settings, you will see a new table below the description box on the product page. This table will consist of all the combinations of the product.

You can choose to filter the list or sort it on various grounds.

On tapping the given link, you will be scrolled down.

Here, since the configuration “Display table only when filter is applied” is ON, therefore, you can see that the combination table is not shown.

However, if you will apply the filters, the combination table will get displayed.

If you Turn OFF the setting “Display table only when filter is applied“, the combination table will get displayed even if no filter is applied as shown in the screenshot below.

No filter is applied, still the combination table is displayed.

As admin has enabled the display of all information like combination image, reference, quantity, final price, final unit price, sort option, filter option and Bulk add to cart.

Therefore, all the enabled settings will be shown in the combination table.

Display combination attributes Separately

If the field is enabled, then combination attributes will display in separate columns.

Show unit price of the product combination in the table

In order to show the unit price of the product, firstly enable the relevant option from the configuration settings. Please refer the below screenshot.

But, wait, firstly you need to define the per-unit price of the product. In case, if you do not set this price then no information about it will be available to the customer.

Therefore, to add the price per unit, go to the “Pricing” section. After that, define the per-unit price of the product.

Bulk Add to Cart feature

Suppose you filter the combination list on the basis of an attribute, say “Size-M”. After filtering the list, you get 2 results. And, now you are planning to buy both combinations of product.

With the “bulk add to cart” button, now it will be even much easier to add both the products simultaneously to the cart.

A customer just needs to check the boxes & click on the ‘Add to cart’ button available below the table.

After clicking the button, a customer can find both the products in the cart now.

Now, easily checkout with both the products in one go.

Display combination on other pages

The admin can select various store pages where he wants to show the product combinations.

The admin can choose to show combinations on home, product, category, search, price drop, new products, best sales, manufacturer, and supplier pages.

Home Page

Search Results Page

Price drop page

Show combination on category page

As enabled by the admin from the back office, the combinations will show on the category page.

Show add to cart on category page

As enabled by admin, the add to cart button will show on the category page to let customers add the desired combination to the cart directly from the category page.

View combination type

The extension allows you to show product combinations in default, tabular, or listing view.

Default view

Tabular view

When a customer scrolls over a product article on listing page, a hamburger icon will appear.

On clicking this icon, a popup will display on the page where customer can view product combinations in tabular form.

Listing View

This option lets customer view all the combinations of a product in a list.

A setting – Select products to hide combination table

As Admin has selected “Hummingbird Printed T-shirt” product under this, therefore, the combination table will not be shown on this product.

At the additional info section

There is additional functionality for the position of the combination table. Apart from the footer, you can also choose to display it at the additional info section.

This option lets you display the table just above the product description tab on the product page. You can also choose whether you want to display following default option or not.

• Display default combination, quantity, and add to cart button

Apart from the above setting, all other options are same.

As “Display default combination, quantity and add to cart button” is ON, therefore on the product page you will see the default combination, quantity and add to cart button.

Upon configuring the table for additional info section, you can find the combination table at additional info section on the product page.

If you apply filter, then the results will display based on the selected filter.

At Product Tab

On selecting this option, a Combination Table will display in a separate tab.

This was all about the Prestashop Product Combinations Table/List View with Add to Cart Module.

I hope this document will help you in checking the functionality of the module in a better way. Also, do let us know about your views in the comments.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

Also, please explore our Prestashop development services and a vast range of quality Prestashop addons.