Hey Sean,

Okay, you want to change the text color of the discounted price displayed on your Odoo website. You've correctly identified that the styling is likely tied to the "with_discount" and "without_discount" price list values. Here's how to find and modify the CSS that controls the color:

1. Inspect the Element in Your Browser:

• Go to your website: Navigate to a product page where the discounted price is displayed.
• Open Developer Tools: Right-click on the discounted price text and select "Inspect" (or "Inspect Element"). This will open your browser's developer tools.
• Identify the CSS Class: In the developer tools, look at the HTML code surrounding the discounted price. You should see a CSS class applied to the element (e.g., <span class="oe_price_discount">...</span> or something similar). Write down this CSS class name.

2. Find the CSS Definition in Odoo:

There are a few places where the CSS might be defined:

• Website Theme (Most Likely):
  • Activate Developer Mode: Make sure you're in developer mode in Odoo.
  • Go to Website: Go to your website in Odoo.
  • Edit Theme: Click "Edit" in the top right corner to enter edit mode. Then, click "Theme" in the top right corner.
  • Customize > CSS: Look for a "Customize" or "CSS" option in the theme editor. This will allow you to add custom CSS rules.
• QWeb Template (Less Likely, but Possible):
  • The styling might be directly embedded in the QWeb template that renders the product price. This is less common, but it's worth checking.
  • Go to Technical > User Interface > Views: In Odoo, go to Settings > Technical > User Interface > Views.
  • Search for Product Template: Search for views related to "product template" or "website product".
  • Examine the Code: Look for the QWeb template that renders the price. See if there's any inline styling that sets the color.
• Base CSS Files (Least Likely):
  • The styling could be defined in one of Odoo's base CSS files, but this is less likely because it would affect all discounted prices throughout the system.

3. Modify the CSS:

• If the CSS is in the Theme:
  • Add a new CSS rule to your theme's custom CSS section. Use the CSS class name you identified in Step 1. For example:

    .oe_price_discount {  /* Replace with the actual class name */
        color: red !important; /* Change "red" to your desired color */
    }
    

    • !important: The !important flag is often necessary to override existing CSS rules.
• If the CSS is in a QWeb Template:
  • Modify the QWeb template directly. Add a style attribute to the element containing the discounted price. For example:

    <span t-esc="product.price" style="color: red;"></span>  <!-- Change "red" to your desired color -->
    

Important Notes:

• Clear Cache: After making any CSS changes, you must clear Odoo's cache. Go to Settings > Technical > Actions > Reload Server Registry. Or, restart the Odoo service.
• Specificity: CSS rules are applied based on their specificity. If your changes aren't taking effect, it might be because another CSS rule is more specific. Use the developer tools to inspect the element and see which CSS rules are being applied.
• Theme Updates: If you're modifying a theme directly, be aware that your changes might be overwritten when you update the theme. It's best to create a custom theme or use the theme's custom CSS section to avoid this.

Example Scenario:

Let's say you inspect the element and find that the discounted price has the CSS class product_discounted_price. You would then add the following CSS to your theme's custom CSS section:

.product_discounted_price {
    color: green !important;
}

This would change the text color of all discounted prices on your website to green.

🚀 Did This Solve Your Problem?

If this answer helped you save time, money, or frustration, consider:

✅ Upvoting (👍) to help others find it faster

✅ Marking as "Best Answer" if it resolved your issue

Your feedback keeps the Odoo community strong! 💪

(Need further customization? Drop a comment—I’m happy to refine the solution!)