engram-design
commented
4 months ago I don't believe you can do that, as that's all an offsite hosted checked, so we can't really inject classes into that. I believe Snipcart recommends you to use CSS to override the visuals of checkout.
Although having just looked at their v3 docs, this has gotten fancier. You can now provide a snipcart-templates.html with your overrides as HTML.
Follow their guide for the most part, and the bits you need to know for this plugin are to point it to a static (not a Twig template) HTML file:
{{ craft.snipcart.cartJs({
templatesUrl: url('snipcart-templates.html'),
}) }}So that would be in your @webroot/snipcart-templates.html file:
<!DOCTYPE html>
<html>
<head><title>Templates</title></head>
<body>
<div id="snipcart-templates">
<button-primary>
<base-button
class="snipcart-button-primary my-custom-class"
v-bind="{ ...$props, ...$attrs }"
v-on="$listeners"
>
<template v-for="(value, name) in $slots" v-slot:[name]>
<slot :name="name"></slot>
</template>
</base-button>
</button-primary>
</div>
</body>
</html>To add a class to your own button. It would be neat to use Twig, but I don't think that's possible.
But honestly, if it's just visual changes, simple CSS overrides might be easier. There's not much we can do on our end from the looks of things!
Question
With the
getBuyNowButtonbutton we can pass a list of classes into it but it doesn't appear to possible to do that for the Cart Checkout button.Is there a way to do that in a way that doesn't require updating/overriding the button in CSS?
Additional context
This is also happening on other Steps', within the checkout process, buttons. It would be nice to set this within the markup if possible.