I’m building my second website with Commerce and for the second time, I have difficulties to integrate CSS on specific checkout steps. For example, the Address step as exactly the same html layout than the shipping method one’s until the <div class="c-step-wrapper">… and I want to interact with this div (to insert CSS grid layout for example) !
IMHO, it’s missing a step specific class on the line 25 of the core/components/commerce/templates/default/frontend/checkout/wrapper.twig file :
<div class="c-step-wrapper">
How to insert the correct stepKey on a new class name such as c-step-wrapper-stepKey ?
Maybe the best place to insert this new class should be on the first line, I don’t know…
If you would like to reference the current step you’re on in the checkout, you can use the {{ currentKey }} value.
So if you were to change the class name of that div in your custom wrapper.twig template, it might look like this:
<div class="c-step-wrapper-{{ currentKey }}">
Hope that helps!
Oh and this probably doesn’t need saying, but just in case anyone reading this is unaware, try to avoid editing the default template files, instead create your own custom theme folder and copy the relevant files over to it. The default files get overwritten on upgrades.
