Use AutomateWoo’s email button classes to style links in a workflow’s HTML email. These classes apply to the WooCommerce Default email template and do not apply to the Send Email – Plain Text action.
Note:
This is a Developer level doc. If you are unfamiliar working with code and resolving potential conflicts, we recommend you work with a Woo Agency Partner for larger projects, or find a WooCommerce developer on Codeable for smaller customizations. We are unable to provide support for customizations under our Support Policy.
Add a button to an email
↑ Back to topIn a workflow’s Send Email action, select the Code tab in Email content. Add the base class to a link and use a destination appropriate for the workflow:
<a href="https://example.com/shop/" class="automatewoo-button">Explore experiences</a>The base class uses the WooCommerce email base color. Add one or more modifiers alongside it to change the button’s size or width:
automatewoo-button--smallreduces the text size and padding.automatewoo-button--largeincreases the text size and padding.automatewoo-button--widedisplays the link as a block across the available width.
<a href="https://example.com/shop/" class="automatewoo-button automatewoo-button--wide">Explore experiences</a>Customize and test
↑ Back to topFor a small change, add an inline style to the link. Email clients support CSS differently, so test your email in the clients and devices your customers use. Ensure button text has sufficient contrast with its background, and use descriptive link text.
<a href="https://example.com/shop/" class="automatewoo-button" style="background-color: #720eec;">Explore experiences</a>
Preview the workflow email and verify the link destination before enabling it. Replace the example URL with your own destination.
Questions and support
↑ Back to topSomething missing from this documentation? Still have questions and need assistance?
- If you have a question about a specific extension or theme you’d like to purchase, contact us to get answers.
- If you already purchased this product and need some assistance, get in touch with a Happiness Engineer via our support page and select this product’s name from the Product dropdown.
