How to customize the "My eSIMs" page colors in WooCommerce

If you're using the My eSIMs page in WooCommerce, you may want to adjust the colors to align with your brand. Follow these steps to update the page’s appearance using CSS variables.

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 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.

Modify the CSS variables

The My eSIMs page uses the following CSS variables to define colors. You can update them to match your brand:
: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 */
}

Apply the custom CSS

Once you've 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.

Save and preview changes

After adding the CSS, click Publish in the Customizer (if using Additional CSS).

Refresh the My eSIMs 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 eSIMs page with your brand’s design in WooCommerce.

How to customize the "My eSIMs" page colors in WooCommerce

Notes#

Notes