# How to Change WooCommerce Product Title Font in Avada
Avada, a popular WordPress theme, offers extensive customization options. However, changing the font of your WooCommerce product titles might seem tricky at first. This guide will walk you through several methods to modify the product title font within your Avada-powered WooCommerce store. We’ll explore both straightforward options and more advanced techniques for those comfortable with code.
Understanding Avada’s Theme Options
Before diving into the specifics, it’s crucial to understand that Avada uses a layered approach to styling. This means your changes might be overridden by child themes, Avada’s built-in styles, or even plugin conflicts. Let’s explore the most common methods, starting with the easiest.
Method 1: Using Avada’s Fusion Builder Options (Recommended)
This is the simplest and most recommended method if you’re not comfortable editing code. Avada’s Fusion Builder often allows for granular control over individual elements.
- Navigate to the WooCommerce product page: Open a specific product page in your website’s frontend.
- Access Fusion Builder: If Fusion Builder’s live editor is enabled, you should see an edit button or icon near the product title. Click it.
- Locate the title element: Within the Fusion Builder settings, find the options for the product title element. This will vary slightly depending on your Avada version and page layout. Look for settings related to typography, fonts, font size, and font family.
- Adjust the font: Choose your preferred font from the available options, set the size, and style it to your liking. Remember to save your changes!
- Create a child theme (if you don’t have one already): A child theme protects your customizations from being overwritten during Avada updates.
- Locate the relevant CSS file: In your child theme’s `style.css` file, add the following code, replacing `.product-title` with the actual class used by your Avada theme for product titles (Inspect the element in your browser’s developer tools to identify the correct class). You might need to add more specific selectors depending on the Avada version and your setup.
- Install and activate a relevant plugin.
- Configure the plugin: Most plugins will offer options to adjust fonts for various WooCommerce elements, including product titles.
Pros: This method is non-destructive, meaning you’re not altering core theme files and changes can easily be reversed.
Cons: Not all Avada themes provide this level of direct control over individual product title elements within Fusion Builder. You might need to adjust global typography settings, impacting other parts of your website.
Method 2: Customizing the Avada Child Theme (Advanced)
If Fusion Builder doesn’t give you the precise control you need, you can modify your Avada child theme’s CSS. This method requires a basic understanding of CSS and child themes. Always back up your files before making any code changes.
.product-title {
font-family: ‘Arial’, sans-serif; /* Replace with your desired font */
font-size: 1.5em; /* Adjust font size as needed */
font-weight: bold; /* Adjust font weight as needed */
}
Pros: Provides highly specific control over the product title’s appearance.
Cons: Requires some technical knowledge of CSS and child theme development. Incorrectly modifying CSS can break your website’s styling, so proceed with caution.
Method 3: Using a WooCommerce Plugin (Intermediate)
Several WooCommerce plugins offer advanced typography customization options. These plugins typically provide a user-friendly interface for adjusting fonts without needing to edit code directly. Search the WordPress plugin repository for “WooCommerce Typography” or similar keywords to find suitable options.
Pros: Provides a user-friendly interface for modifying typography.
Cons: Requires installing and configuring an additional plugin, which might impact site performance.
Conclusion
Changing the WooCommerce product title font in Avada can be accomplished through several methods, from simple Fusion Builder adjustments to more advanced CSS customizations. Choose the method that best suits your technical skills and comfort level. Remember to always back up your website before making any significant changes. If you’re unsure, start with the Fusion Builder approach; if it doesn’t provide enough control, then explore the CSS customization options in a child theme. Using a dedicated plugin can also be a good alternative.
