WIP: Flex settings not work in product price element

Bugs
1

Browser: Chrome (new)
OS: macOS / Windows / Linux / etc.

Hello,

In the product price element > style tab, I want to display the product price as below using flex settings. But these options do not work at all. I can’t even create a gap between the prices using the Gap control.

product price

2

Consider that Flexbox would be working on the parent container holding both of the direct child elements (prices) and you may be targeting the wrong container.
By chance do you have a URL to share as that would allow for people to inspect the code output via the inspector and provide a workable solution.

3

Hi Jolia,
Thanks so much for your report!

As muz already mentioned, display: flex gets applied to the parent (which is the standard), but since the element contains a p.price which holds everything else, it doesn’t work. So it’s always advisable to check the markup, if something isn’t working as expected.

%root% .price {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

Keep in mind to check all different price setups (e.g. variable product) to see if you need to tweak it any further.

I’m honestly not sure if changing the selector to .price would cause problems. I have created an improvement task for this.

Best regards,
timmse

4

Hi @timmse, Thanks for the great css code.

Now I understand what the story is. Actually, I think this is not a bug and it should be a feature request. If you agree, it would be great if you could add alignment options for the product price element to target .price. Just like the similar options in the icon list element.

I hope it is possible🙏

price alignment

5

As far as I know, you are the first user to ask about this… so as of right now, I don’t see a need for it.

We’ll consider enhancing the settings if there is a real need for more users :+1:

1 Like