如何修改WordPress中产品变体下拉菜单及相关文本的字体颜色？

Hey Eric, I’ve dealt with similar readability headaches on WooCommerce sites using the Catch Responsive theme before. Let’s get those text colors sorted out with some simple custom CSS—no messy plugin hacks required.

1. Adjust Product Variation Dropdown Text Color #

That light gray text on a white dropdown is definitely tough to read. Add this CSS to target those variation selects specifically:

/* Variation dropdown default text color */
.woocommerce div.product form.cart .variations select {
    color: #333333; /* Swap this hex code for your preferred dark color */
}

/* Optional: Improve hover/focus visibility */
.woocommerce div.product form.cart .variations select:hover,
.woocommerce div.product form.cart .variations select:focus {
    color: #1a1a1a; /* Darker shade for better interaction feedback */
}

This targets the exact select elements in WooCommerce’s variation forms. Tweak the hex values to match your site’s color scheme perfectly.

2. Modify "Description" & "Additional Information" Text Colors #

You’ll want to update both the clickable tab labels and the content inside those sections. Here’s the CSS for both:

Tab Labels (Clickable Navigation) #

/* Default tab label text color */
.woocommerce-tabs .tabs li a {
    color: #333333; /* Darken the tab text for better visibility */
}

/* Active tab highlight */
.woocommerce-tabs .tabs li.active a {
    color: #0066cc; /* Use your brand color to make the active tab stand out */
}

Tab Content Text #

If the actual text inside the Description/Additional Information panels is also too light:

/* Tab content body text color */
.woocommerce-tabs .panel {
    color: #444444; /* Adjust to your desired content text shade */
}

How to Apply This CSS #

1. Head to your WordPress Dashboard → Appearance → Customize
2. Find the Additional CSS section in the customizer menu
3. Paste the code snippets (or just the parts you need) into the text box
4. Click Publish to save your changes

This method keeps your customizations safe even when you update the Catch Responsive theme—no need to edit core theme files that might get overwritten.

内容的提问来源于stack exchange，提问作者Eric