关于WooCommerce商品页新增标签小屏文本排版异常及文本颜色修改的技术咨询

Hey there! Let's work through your WooCommerce custom tab problems—both the responsive layout mess on small screens and the text color changes you need. Here's how to fix both issues cleanly:

Most tab layout breaks on mobile happen because the tab headers or content don’t adapt to limited screen space. Try adding this custom CSS to your site:

/* Adjust custom tabs for screens under 768px (mobile/tablet) */
@media (max-width: 768px) {
  /* Make tab headers wrap text instead of overflowing */
  .woocommerce-tabs ul.tabs li a {
    white-space: normal;
    padding: 10px 7px; /* Trim padding to fit more text */
    font-size: 14px; /* Slightly smaller font for tighter spaces */
  }

  /* Tidy up tab content padding and font size for readability */
  .woocommerce-tabs .panel {
    padding: 12px 8px;
    font-size: 15px;
  }
}

How to add this CSS: #

• Go to your WordPress dashboard → Appearance → Customize → Additional CSS
• Paste the code in the text box and click "Publish"
• If you’re using a child theme, you can also add it to your style.css file (this avoids losing changes when your parent theme updates)

If the problem persists, use your browser’s Dev Tools to check if your custom tabs have unique classes/IDs. You can target those specifically instead of the general .woocommerce-tabs selector for more precision.

To tweak the text colors for your custom tabs (both the tab headers and the content inside), use this CSS:

/* Change default tab header text color */
.woocommerce-tabs ul.tabs li a {
  color: #2d3748; /* Replace with your preferred hex/rgb color code */
}

/* Change active tab header text color (so users know which tab is open) */
.woocommerce-tabs ul.tabs li.active a {
  color: #e53e3e; /* Different color for active state */
}

/* Change text color inside the tab content */
.woocommerce-tabs .panel {
  color: #4a5568; /* Adjust content text color here */
}

Pro tip: #

If you only want to change colors for your custom tabs (not default WooCommerce tabs like Description/Reviews), find your custom tab’s unique ID (e.g., #tab-custom_delivery or similar) and target it directly:

/* Example: Target a specific custom tab header */
#tab-custom_delivery a {
  color: #2b6cb0;
}

/* Example: Target content of that specific tab */
#tab-custom_delivery .panel {
  color: #2d3748;
}

Test these changes on mobile and desktop to make sure everything looks right—you can adjust the pixel values or color codes to match your site’s design.

Let me know if you need help refining any part of this!

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