# How to Change Font Size in Your WooCommerce Footer: A Beginner’s Guide
Want to tweak the font size in your WooCommerce footer? It’s a surprisingly common request, impacting both readability and the overall aesthetic appeal of your online store. A tiny footer font can be hard to read on smaller screens, while an overly large one might look clunky. This guide shows you how to adjust it, whether you’re comfortable with code or prefer a simpler approach.
Understanding Your WooCommerce Footer
Before we dive into the how-to, let’s understand *what* we’re changing. Your WooCommerce footer is the bottom section of your website, typically containing copyright information, payment logos, and links to your privacy policy and terms of service. Think of it as the finishing touch – a small but important detail that can significantly impact the user experience. A poorly sized font here can make this crucial information difficult to find or read.
Imagine a customer trying to find your return policy on a mobile phone. If the footer text is microscopic, they’ll likely give up, leading to frustration and potentially lost sales. Clear, readable text is key.
Method 1: Using the Customizer (Easiest Method)
This method is ideal if you’re not comfortable with code. Most WooCommerce themes offer a customizer which allows for basic styling changes without touching any code.
- Step 1: Access the Customizer: In your WordPress admin dashboard, navigate to Appearance > Customize.
- Step 2: Find Footer Settings: Look for a section related to “Footer,” “Widgets,” or “Footers.” The exact location depends on your theme.
- Step 3: Adjust Font Size: Some themes will allow you to directly adjust font size. Look for options like “Font Size,” “Footer Font Size,” or similar. You’ll usually be able to enter a value in pixels (e.g., 14px) or choose from pre-set sizes.
- Step 4: Save Changes: Click “Publish” or “Save & Publish” to apply your changes.
- Step 1: Create a Child Theme: If you don’t already have one, create a child theme for your WooCommerce theme. This is crucial to prevent your customizations from being overwritten during theme updates.
- Step 2: Add Custom CSS: Add a custom CSS file (`style.css`) to your child theme.
- Step 3: Add the CSS Code: Paste the following code into your `style.css` file, adjusting the selector and font size as needed. This example targets the footer’s `p` tags:
- Step 4: Save Changes: Save your `style.css` file. Your changes should now be reflected on your website. The `!important` flag overrides any conflicting styles. Use cautiously!
Real-life example: Let’s say you’re using the Astra theme. Within the customizer, you might find a “Footer” section with options to control the font size of the copyright text. You could change this from the default 12px to a more readable 14px or 16px.
Method 2: Using Child Themes and CSS (For More Control)
For more precise control or if your theme doesn’t offer direct font size customization, you’ll need to use CSS. This method is strongly recommended over directly editing your theme’s files. Directly editing theme files can lead to lost changes when the theme updates. Always use a child theme to avoid this.
/* Adjust footer paragraph text size */
footer p {
font-size: 16px !important;
}
Replace `footer p` with the appropriate CSS selector if your footer text isn’t within `
` tags. Inspect your footer using your browser’s developer tools (usually right-click and select “Inspect” or “Inspect Element”) to find the correct selector.
Example with a different selector: If the copyright text is wrapped in a div with the class “copyright,” you’d use:
/* Adjust footer copyright text size */
.copyright {
font-size: 14px !important;
}
Understanding CSS Selectors
CSS selectors are how you tell the browser which elements to style. `footer p` targets all paragraph elements (`
`) within the `
