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.
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 */ }
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.
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.