Order Layers Appear on Frontend

Hi there,

I’m wondering is it possible to change just the order in which layers are displayed on the front

So I’m planning to add the possibility to order both things, but for now you’ll have to use a different method.

Here’s what I recommend:
– Add a unique CSS class to each layer. e.g. top, shadow, bottom…
– Then order your layers as you want them to appear in the menu
– Using CSS, you can now order the images how you want, using the z-index property. Example:

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.top {
    z-index: 3;
}
.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.middle {
    z-index: 2;
}
.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.bottom {
    z-index: 1;
}

Marc

• This reply was modified 3 years, 11 months ago by Marc Lacroix.

Hi sorry I’m late to reply.
Thank you so much!

It nearly works perfectly.. it seems that if the layer doesn’t have choices, the code doesn’t pick it up. I have three layers, and one is a shadow. If I make the shadow have choices, I can see the shadow on the product, but once the ‘doesn’t have choices’ box is checked the shadow disappears from the image..
If you happen to find a way to correct this I’d really appreciate it.
If not I will look forward to your future updates. ??
Thank you again for all your help!

Hi,

Ah you’re right, the class isn’t applied to the not-a-choice layers, I need to fix that.
What you can do in the mean time, is use the class static instead of shadow, as it is a default class on the not-a-choice layers, which should work as you only have one layer to position (I think?).

Marc.

Oh it works well!
Thank you very much ??

Hi Marc

Sorry to bother you again.
I noticed that with this override, while everything is fine on the main product page, after adding the customisation to the cart, the layers are not displayed in the correct order in the thumbnail that shows in the woocommerce shopping cart..
I tried to put the code you gave me in to the woocommerce shopping cart page but I’m guessing it is not that simple..
Could there be a fix for this too?
Thank you for your support!

Hi there,

AH that’s true, I didn’t think of this consequence.
Ok here’s what I suggest instead.

– Remove the code I previously gave you,
– set your layer order back to where it previously was, for the images to be correctly displayed.
– Add the following CSS on the configurator’s page:

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul {
    display: flex;
    flex-direction: column-reverse;
}

What this will do, is reverse the order of the menu.
So If you want to reorder more than 2 items, and not in just the reverse order, you’ll need a bit more complicated code, but that’s also possible.

Hope this helps!
Marc.

Hi Marc

Thank you!

It didn’t work at first, but I added ‘important!’ after direction:flex,
and it started to work.. I don’ really know about CSS but maybe something was overriding it?

Thank you so much again!

So If you want to reorder more than 2 items, and not in just the reverse order, you’ll need a bit more complicated code, but that’s also possibl

Hi Marc

Thank you for your help before with the layer orders!
I was wondering, as you mentioned it was possible, if you could tell me how I can change the middle layer (ロゴ、名入れ) to the bottom.

Thank you always for your help!

https://sukiya.style/product/hakata-passcase/?v=55cabb5a7e5f

Hi there,

if you add the CSS class custom-text-color to the middle layer layer, then you can use the following CSS to move that layer dowm:

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.custom-text-color {
    order: -1;
}

It should give you this:

Marc

Yes that’s done it!
I cannot thank you enough for your support!