Variants - replace "add to cart" with "choose variant" in product list

[fightgear]

Hello,

 

I have a lot of products that has variants (different colors, etc.)

 

In the product list, I want to replace the "add to cart" button with "choose color" button that takes you to the product, because right now, if you add to cart from the product list, it automatically chooses the default variant. The customer doesn't necessarily know this.

 

Therefore I would like a "choose color" button instead of the "add to cart" button, whenever a product has variants, so that the customer is sent to the product itself where they can choose the variant before adding to cart.

 

It is not a solution for me to simply hide the "add to cart" button, when there are variants, as it is confusing for the customers, and it looks like the procuct is not in stock that way.

 

Do any of you have a solution?

 

Thanks in advance

[fightgear]

No one who can help?

[fightgear]

There must be someone who have been in a similar situation?

[PhpMadman]

Settings > Products > Display the "add to cart" button when a product has attributes -> NO

That does what you want

[fightgear]

Settings > Products > Display the "add to cart" button when a product has attributes -> NO

That does what you want

 

Thank you for your suggestion. But as I mentioned in the first post, that is not a solution for me, because when the "add to cart" button is hidden, it looks as if the product is out of stock, which is not what I want.

[PhpMadman]

I see, missed that in first post.

 

Then it should be enough to edit product-list.tpl

Do you use the default theme from prestashop?

If not, please attach the product-list.tpl from your theme

[fightgear]

I see, missed that in first post.

 

Then it should be enough to edit product-list.tpl

Do you use the default theme from prestashop?

If not, please attach the product-list.tpl from your theme

 

I do not use the default theme.

 

Here is the file:

https://www.dropbox.com/s/pncfdieqsblkebm/product-list.tpl?dl=0

Edited September 16, 2014 by fightgear (see edit history)

[PhpMadman]

https://www.dropbox.com/s/71b3cvx9h28qpww/product-list.tpl?dl=0

 

If product has attributes a Choose variation button is shown.

But only if the option i wrote about earlier is set to YES

 

One more thing. The button might break theme colors / format. This is beacuse I had to remove the ajax_add_to_cart class from the button. In the default theme, all of the pretty button code is in there.

 

So it's breaks, we need to copy that class and rename it, and add it to the file.

 

[fightgear]

https://www.dropbox.com/s/71b3cvx9h28qpww/product-list.tpl?dl=0

 

If product has attributes a Choose variation button is shown.

But only if the option i wrote about earlier is set to YES

 

One more thing. The button might break theme colors / format. This is beacuse I had to remove the ajax_add_to_cart class from the button. In the default theme, all of the pretty button code is in there.

 

So it's breaks, we need to copy that class and rename it, and add it to the file.

 

I have just tried to add the new file, but the "Choose variation" button then appears on every product - both the products that have attributes, but also the ones that don't.

The "Display the "add to cart" button when a product has attributes" is set to YES.

Edited September 17, 2014 by fightgear (see edit history)

[PhpMadman]

Yes you are right.

It's a good idea to actually enable the function I'm devoleping for...

File in dropbox updated.

[fightgear]

Yes you are right.

It's a good idea to actually enable the function I'm devoleping for...

File in dropbox updated.

 

Works perfectly! Thank you very much!

 

Is it possible to style/change css for the "Choose variation" button without affecting the "Add to cart" button?

 

When I try to change it, it changes both buttons.

[PhpMadman]

Yes. Just add a choose-variation class to the button, and then in global.css add .choose-variation { background: pink; }

 

Then you should have a nice pink button, and maybe some green borders depending on your themes css...

[fightgear]

Yes. Just add a choose-variation class to the button, and then in global.css add .choose-variation { background: pink; }

 

Then you should have a nice pink button, and maybe some green borders depending on your themes css...

Very nice, thank you!

It works perfectly now.

 

I was wondering if it is possible to also have a button for when products are out of stock? Both products without attributes/variants, and with. So If all the variants are out of stock for example, it's a red button with "out of stock" text?

Edited September 30, 2014 by fightgear (see edit history)

[PhpMadman]

Hi.

 

I assume you allow back-ordering then?

So, when a product is out of stock they can still order the product, the Add to cart button will instead say Out of stock?

 

I think it should be possible. I'll try to look in to it tonight.

[fightgear]

Hi.

 

I assume you allow back-ordering then?

So, when a product is out of stock they can still order the product, the Add to cart button will instead say Out of stock?

 

I think it should be possible. I'll try to look in to it tonight.

 

No, out of stock products cannot be ordered.

But as it works now, a product that has variants, has the "Choose variant" button, even if alle the variants are out of stock. So you click on the "Choose variant" button, and get to the product, but then can't choose or order, because alle the variants are sold out.

[PhpMadman]

I see.

 

So if all variation is out of stock, the button should change to red and say Out of stock, but still redirect to product page.

 

And you want the same for normal products?

[fightgear]

I see.

 

So if all variation is out of stock, the button should change to red and say Out of stock, but still redirect to product page.

 

And you want the same for normal products?

Yes, that is excactly what I mean!

[PhpMadman]

Hello.

 

I updated the dropbox file.

It should now change to Out of Stock if a product with combinations is out of stock.

 

To change its color. Adding the following code to the end of product_list.css should be enough

.red_out_stock {
	background-color: #ff0000;
}

Give it a test, and we will do the same  for normal products after that.

[fightgear]

Hello.

 

I updated the dropbox file.

It should now change to Out of Stock if a product with combinations is out of stock.

 

To change its color. Adding the following code to the end of product_list.css should be enough

.red_out_stock {
	background-color: #ff0000;
}

Give it a test, and we will do the same  for normal products after that.

Done - works perfectly

[PhpMadman]

And once again file updated. Completely untested, but should work.

[fightgear]

Works perfectly - thank you very much for your help!!

[fightgear]

I was a bit quick to say it worked, as I have just found an error.

 

If you see this category for example: http://fightgear.dk/49-bjj-gi-kimono

 

On the second row on the right is a product called "Nova Basic Gi, hvid, inkl. hvidt bælte" - it has the grey button (not in stock). But if you click to the product page, it is actually in stock in to variations. I think it's because the default variant (A2) is out of stock.

 

From the product list, the button "Choose variation" should be there if any of the variants are in stock, regardless of the default variation being out of stock. As long as any variation is in stock, it should display the "Choose variation" button.

[PhpMadman]

Hi.

 

Should be fixed now. Changed one word.. ;p

[PhpMadman]

I cleaned out my Dropbox, so I attached a zip file with the tpl file so more people can use the code.

 

product-list.tpl.zip

[heyho]

An other solution is to update the default product variant if a variant is sold out.

 

Heres an addon that changes the default variant manually in Backend or every time a customer finished an order.

 

http://addons.prestashop.com/de/front-office-features-prestashop-module/19020-default-product-variant.html