Jump to content

Select variations from product list ?

Recommended Posts



I have a question. 

I was testing the new PrestaShop 1.6 and I love the design and the dashboard. However, I have a big issue switching from my current shop cms to Prestashop and this is that from the list view, if I click on "Add to cart" button on a product with variations, the product is added to the cart with a random variation without any warning. 


Is there any plugin, any theme, any fix or any ETA until this "bug" will be fixed ?



Thank you.

Link to comment
Share on other sites

Yes, there is possibly a major upgrade problem, perhaps a bug (after upgrade from PRESTASHOP 1.5.xxxxx to


If a product has for example 3 variants / variations / features


with 3 different prices, then the following faulty software behavior occurs:


If clicking on the option for a variant which is not the default,

then the price display switches for approx. 1 second to the differing price, 

then returns to display the default price.


When ordering the item, the shopping cart ALWAYS gets the DEFAULT item with its price default.

This is also the case when the customer clicked on a diffring variant with a differing price. 


As far as I could find out by a rapid search, there is so far nobody else who communicated this problem, and I did not state any answer supplying a problem settlement.


When a new product is created in version


then it has the same faulty behavior.

When for a past product (inserted before the upgrade) the features / variants are confirmed / saved again, this does not alter the problem described here above.


Is this a known problem? Are there solutions?


Edited by Laura4 (see edit history)
Link to comment
Share on other sites

Edits after === 21 April 2014 === are marked this way dated. To make analysis easier, the problem description remains this way a coherent image of all aspects. 




demlasjr : "I tried to confirm what you said in your post but I can't confirm it. It doesn't happens in Prestashop Are you sure the problem isn't with your theme javascript "

Many thanks,
this is very helpful, to know that it cannot be reproduced in a general manner.

Now the information step of trouble shooting:
PRESTASHOP 1.5.xxxxx installed in 2013-05 = May or so.
- perhaps upgrades in the 1.5.xxx upgrading line; or perhaps not.
- Only used with the default layout. (3 column, black block titles)
- In 2013-09 or so: Approx. 5 minor modifications in the CSS style sheets (all marked, easily to retrieve with grep)
-    These brought the layout close to the current default of 1.6.0.xxxx

PRESTASHOP : upgrade in 2014-04
- several days later upgraded to -
- I Intentionally ordered to replace the past version of the default theme, to start with  clean sheet
.    (because we are still in the start period of the already running shop)
- So far it could be avoided to do any modification of the style sheets.
.    (will be done soon: Downsizing the horizontal menu bar, the cart symbol, the search field, increase the logo size)

Problem settlement for the upgrade: So far:
- coherent list of required reconfiguration after upgrading when using the default  layout
- there are, I think,  hundreds of forum messages about this -
- at the noted link is a coherent list how close to all can be  settled -

a minor problem ... just to be complete:


=== 2014-04-23 addd: === The only more basic modification:

As described in the linked page above "LAYOUT":

2 data base tables (MySQL) reqquired to be rewritten. Otherwise module positioning or something similar did not work. The automatic upgrade perhaps missed to align the content of these 2 very small tables. Both probably should have the same number of rows - but initially after the upgrade it was different.

This modification has been kept in mind. I hesitated much to follow some recommendation (of an external specialist related to PRESTASHOP site management) because this manual intervention might cause future unexpected side effects.



After the upgrade, so far I never touched the source code.  
Before the upgrade the product variations worked properly for orders. After the upgrade this shows the faulty behavior like described yesterday, see here above.
I agree: It might be a JAVASCRIPT problem of the theme. But given the fact of lacking source code modifications, it probably should affect all shops using the current new version of the default theme.

This sounds possible even if there is so far close to no other similar complaint in the forum.
Most shop owners do not use product variants. (We have ~5000, the total  for ~300 products...)
Most shop owners with running advanced shop concepts did not yet update.
Most do not use the new default layout.


=== 2014-04-23 addd: === Javascript variable name conflicts?

As many software developers have become lazy when naming variables - past naming discipline has gone since many years - , the various Javascript modules are always good for unexpected bugs. Disabling modules in 50 % chunks helped me in the past to find out some conflicting modules and ban them from any use - 5 or so from the official list - , done without checking the conflict reason. After the upgrade to I did not yet repeat this control.


The question If the duplicate differing use of a same Javascript variable name is causing the problem, I could find this out by enabling / disabling all used modules with the 50% method. Would take half a day... and it is not sure that it will really settle the problem.



Hopeful that all has been clarified for the next investigation step...
For example:
Who with a similar version environment can reproduce or not reproduce the described faulty behavior?

Edited by Laura4 (see edit history)
Link to comment
Share on other sites

  • 5 months later...

open products-list.tpl file

got line no.139

you will see below code

<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
                                            <span>{l s='Add to cart'}</span>



replace it with



{if empty($product.features)}
                                        <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
                                            <span>{l s='Add to cart'}</span>
                                        <a class="button view_more_options btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='Add to cart'}">
                                            <span>{l s='Add to cart'}</span>



then you will need to apply css to the new "add to cart button"


add below css to global.css in the themes/default-bootstrap/css


.button.view_more_options span {
    border: 1px solid;
    border-color: #06b2e6;
    padding: 10px 14px;
    display: block;
    background: #009ad0;
    background: -moz-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009ad0), color-stop(100%, #007ab7));
    background: -webkit-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: -o-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: -ms-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: linear-gradient(to bottom, #009ad0 0%, #007ab7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ad0', endColorstr='#007ab7',GradientType=0); }
.button.view_more_options:hover {
    border-color: #01314e #004b74 #0079b6 #004b74; }
.button.view_more_options:hover span {
    filter: none;
    background: #0084bf; }
.button.view_more_options {
    font: 700 17px/21px Arial, Helvetica, sans-serif;
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    padding: 0;
    border: 1px solid;
    border-color: #0079b6 #006fa8 #012740 #006fa8; }
.button.view_more_options.btn.btn-default {
    margin: 0 6px 10px;

VOILA its done.

Edited by ranjankumar sahoo (see edit history)
  • Like 1
Link to comment
Share on other sites

  • Create New...