Hi

I'm working on a catering module where people have to select a dish and have an extra option.
For example:

Dish: Steak XXL
Option: With fries | With potatoes | With a salad

This can be achieved with the variants like described in the documentation.
But I was wondering if there is a way you can work with the variant variables without putting them in a dropdown or radiobutton structure.

For example I want a list a with the three options, with a picture and a little bit of text.
These are clickable area's and only one option can be chosen.

I hope I made myself clear?
Would be great if there's already something that goes the way I described above.

Thanks!

Hello!
Why not use radio buttons?
You can hide radios with CSS and insert in label your image and text, like

Code: Select all

<input type="radio" id="radio1">
<label for="radio1">{{img}}{{text}}</label>

So, in CSS smth like

Code: Select all

input[type="radio"] {position: absolute; left: -9999px;}
input[type="radio"]:checked + label {border: 1px solid #ccc}

[cheesypoof]

You can completely customize the default markup output by the pp_option_values tag for the product variants. See docs/concepts/shopping-cart-1.html#list. Let us know if you can get this to work as desired.

Thanks for the answers, I will look into them.

I want to go a step further with the variants.
I have this situation: a shop where you can order dishes separately via a clonable template, works fine.

Now I want to create "Menu's", where the visitor can put together different dishes with fixed parameters.
For example: in Menu 1 you can choose 1 main dish, 2 starters and 1 dessert. In Menu 2 you can only choose 1 main dish and a drink.

The menu's have a fixed price and I see this way of working possible with variants.

BUT
Is it possible to somehow load the dishes from the clonable template into the variants of the menu section, so I don't have to manage/create new variants for each menu.
The menu's would also be immediately up to date with what is available in the dishes.

Currently I don't have a clue how to start achieving this.
Would be great if someone has some tips or advice!

Thanks.

Anyone experience or tips for my question above?
If more info is needed, please ask for it.

Thanks!

[KK]

Sam, speaking for myself I don't think I understood the problem.

Could you please post some mockups of how things are supposed to work or direct us to some other site that works in a similar manner?

Thanks.

Hi KK
Thanks for your answer.
It's hard to find some concrete examples but I'm gonna explain the situation and needs with a more common example.

Part 1 of the shop

Suppose I have a Pizza order website, where you can buy products in different categories:
[list=]
Pizza's: Margaritha, Pepperoni,..
Desserts: Ice Cream, Pie
Drinks: Coca Cola, Fanta,...
Extra: Bread, cutlery,...
[/list]

See picture as an example.

You add the items you want one by one in the shopping cart and do the checkout.
I made a variant of this concept that works, this part is already active online.


Part 2 of the shop

Now on an other section of the website I want to create a module where a customer can compose his own menu.

There are 3 fixed menu types, with a fixed price:
[list=]
Menu 1: 2 pizza's, 2 desserts, 1 drink, no extra ($15)
Menu 2: 4 pizza's, 3 desserts, 4 drinks, 2 extra's ($25)
Menu 3: 2 pizza's, 2 drinks ($10)
[/list]

The customer choose the menu type they want and can then choose a product per parameter.
For example:
A customer choose menu 1 and get a list of all the pizza's, where he can choose 2 from.
Then he choose out of a list 2 desserts and from another list 1 drink. The extra's are not available in this type, so they are visible or clickable.

I thought about this and realised I can do this to make actual products of the menu's and then add the categories and products like Variants via pp_product_options.
I can then add for each menu the specific parameters. (amount of products allowed per categorie)
I made something alike for a lunch composer. (see image, it is for a Indonesion food restaurant)

The downside of this workflow is that the products described as options in the menu are ofcourse not related to the products from the shop in part 1.
If for example a pizza is out of stock, I can do the necessary thing in the productlist of part 1, but I also have to re-arrange the variants in the menu types.

So I was wondering if it possible to make the products of part 1 the actual variants of the menu types.
So that everything is related to each other and for example I also can use the images and descriptions of the original products (part 1) in the menu types.

I want to achieve something something like the screenshot named 'Goal'. Where the different blocks display the different categories and where you can click the amount of products that is allowed per menu type.

Maybe my way of thinking is not possible or better achieved via an other way, but I'm currently have no clue to actually make this work.

Hope this made my question more clear?

Thanks!

@Musman

How exactly do you link an image to a variant value?