Customizing "My eSIM" page colors in WooCommerce

Introduction

If you're using the "My eSIM" page in WooCommerce, you may want to adjust the colors to align with your brand's design. This guide explains how to update the page’s appearance using CSS variables.

Steps to update colors

1. Locate your theme’s custom CSS section

To apply the changes, you need to add custom CSS to your WooCommerce theme. You can do this via:

WordPress Customizer

Navigate to Appearance > Customize in your WordPress dashboard.

Click on Additional CSS.

Add the custom CSS code provided below.

Child Theme Stylesheet (recommended for advanced users)

If you're using a child theme, you can update the style.css file.

2. Modify the CSS variables

The "My eSIM" page uses the following CSS variables to define colors. You can update them to match your brand’s colors:

:root {
--wp--airalo--my--esim--card--background: #CECECE; /* Card Background /
--wp--airalo--my--esim--title--color: #000; / Page Title Color /
--wp--airalo--my--esim--left-menu-active--color: #fff; / Active Menu Item Text Color /
--wp--airalo--my--esim--left-menu-active--background: #EE434E; / Active Menu Background /
--wp--airalo--my--esim--carousel--background: #B1B1B1; / Carousel Background /
--wp--airalo--my--esim--text--title--negative: #C81E1E; / Negative Status Title /
--wp--airalo--my--esim--text--body--normal: #374151; / Normal Body Text /
--wp--airalo--my--esim--text--title--highlight: #1A56DB; / Highlighted Titles /
--wp--airalo--my--esim--border-color--normal: #D1D5DB; / Normal Borders /
--wp--airalo--my--esim--text--title--normal: #111928; / Regular Titles */
}

3. Apply the custom CSS

Once you have customized the colors, copy the updated CSS and paste it into the "Additional CSS" section of your WordPress theme or inside your child theme's stylesheet.

4. Save and preview changes

After adding the CSS: Click Publish in the Customizer (if using Additional CSS).

Refresh the "My eSIM" page to see the changes.

Adjust further if needed.

Notes

Ensure your theme supports custom CSS variables.

If changes don’t appear, try clearing the cache or using a browser’s Inspect Element tool to verify styles are applied correctly.

If using a caching plugin, purge the cache to see updates immediately.

Please note that the variable names must include the "wp--airalo" prefix, as this is a mandatory requirement from WordPress.

By following these steps, you can effectively align the My eSIM page with your brand’s design in WooCommerce.

Customizing "My eSIM" page colors in WooCommerce

Introduction#

Steps to update colors#

1. Locate your theme’s custom CSS section#

2. Modify the CSS variables#

3. Apply the custom CSS#

4. Save and preview changes#