Member Avatar for richardelectrix

Hi there,

I am currently building a website using Wordpress, Woocommerce, and Woocommerce's Tab Manager plugin.

On the product pages, you can see a tab called "IP Ratings..." which should have a little symbol next to it (which we creat using the sup html tags). However, the tags themselves are getting output rather than the result of the tag. See here:

Any idea how I can manipulate it so that it outputs the result of the tag rather than the tag itself?

Sadly my theme developer (Enfold) and Woocommerce have not been helpful.

Thanks,

R

  • 3 Contributors
  • 4 Replies
  • 214 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Short diagnosis: the tab titles are being HTML-encoded before they’re printed, so the browser shows the markup instead of rendering it. As observed, something (theme or plugin) is sanitizing/escaping the title. That’s the root issue — not a browser bug.

Three practical, safe approaches (in order of preference):

  • Fix the output point: override the template that prints the tab title (copy into a child theme rather than editing the plugin). Replace the strict escaping with a safer output that allows the minimal HTML you need (for example, use a kses call that permits only <sup>). This keeps the change local to your theme and survives plugin updates.

  • Use a filter to decode the titles at runtime and allow only the tag(s) you need. Example (put in a child theme’s functions.php):

// decode stored entities and allow only <sup> in tab titles
add_filter( 'woocommerce_product_tabs', 'dw_allow_sup_in_tab_titles' );
function dw_allow_sup_in_tab_titles( $tabs ) {
    $allowed = array( 'sup' => array() );
    foreach ( $tabs as $key => $tab ) {
        if ( ! empty( $tab['title'] ) ) {
            $tabs[ $key ]['title'] = wp_kses( html_entity_decode( wp_unslash( $tab['title'] ), ENT_QUOTES, 'UTF-8' ), $allowed );
        }
    }
    return $tabs;
}
  • If you can’t edit templates or add a filter, use a CSS fallback (as suggested) to insert the symbol visually, but that’s a presentation hack — less robust and possibly inaccessible.

Troubleshooting tips: search the theme/plugin for uses of esc_html, esc_attr, htmlspecialchars or wp_kses around tab rendering; check how the Tab Manager stores titles in the DB (are entities saved there?); always test on a staging site and restrict allowed tags to the minimum for security.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

Looks like you're outputting encoded html (like &lt;sup&gt; instead of <sup>, etc).

Member Avatar for richardelectrix

How can I fix that? In the backend all the titles of the tabs are written like this: "IP Rating & UL Information <sup>†</sup>"

Member Avatar for Member #120589

No idea sorry. I don't have the code to check. Looks like the contents are being htmlencoded prior to passing on to the view.

Member Avatar for Taywin

It might be the way it render text by sanitizing all output. You may be able to work around using a span tag with CSS.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.