How to Hide WooCommerce and Elementor Class Names in WordPress

Hide WordPress-exclusive plugin identifiers like “woocommerce” and “elementor” from your page source using WP Ghost’s Text Mapping. Replace class names in HTML, CSS, and JS files so theme detectors can not identify your plugins. This is an advanced feature with performance trade-offs.

Before you proceed: Hiding plugin class names is an advanced step that requires dynamic CSS/JS rewriting and can affect performance. For most sites, changing plugin paths and hiding element IDs is sufficient to block the majority of detection tools. Read the caveats below before enabling. For the full context on what matters for security vs. detection, see Hide WordPress From Theme Detectors or From Hacker Bots?

Why Plugin Class Names Reveal WordPress

Plugins like WooCommerce and Elementor are WordPress-exclusive. They do not exist on any other CMS. When theme detectors see class names like woocommerce-product-gallery or elementor-widget-container in your HTML, they identify WordPress immediately, even if every path has been changed and every other fingerprint removed.

WooCommerce uses hundreds of distinctive class names. Every product page contains classes like woocommerce-product-gallery, woocommerce-loop-product, wc-block-grid, and woocommerce-tabs. Elementor embeds its name throughout the page structure with classes like elementor-widget-container, elementor-section, and elementor-column on every element it renders.

Theme detection tools like Wappalyzer and BuiltWith maintain databases of class name patterns mapped to specific plugins. A single woocommerce- class confirms your CMS. Text Mapping is the only way to address this specific detection vector.

Step 1 – Replace Plugin Class Names in HTML

1. Go to WP Ghost > Mapping > Text Mapping.

2. In the left field, enter the plugin class name you want to replace (for example, woocommerce).

3. In the right field, enter the replacement name (for example, ecommerce).

4. Repeat for other plugins. For example, change elementor to landingpage.

5. Click Save.

After saving, every occurrence of “woocommerce” in your HTML output becomes “ecommerce”, and every “elementor” becomes “landingpage”. This covers class names, IDs, data attributes, and any text that contains the mapped string.

WP Ghost also offers two special replacement patterns: {blank} removes the class name entirely, and {rand} replaces it with a random string that changes on every page load. For more options, see the Text Mapping tutorial.

Step 2 – Extend Replacements to CSS and JS Files

Replacing class names in HTML alone is not enough. If the CSS and JS files still reference the original class names, your styles and scripts will break. The CSS will target “woocommerce-product-gallery” but the HTML element now has the class “ecommerce-product-gallery”, so the styles will not apply.

6. In WP Ghost > Mapping > Text Mapping, switch on Text Mapping in CSS and JS files.

7. Click Save.

With this enabled, WP Ghost dynamically processes every CSS and JS file, replacing the original class names with your custom ones. Styles and scripts continue targeting the correct elements because the names match across HTML, CSS, and JavaScript.

Important – Performance and Caching Caveats

Dynamic CSS/JS creates a performance cost. When Text Mapping in CSS and JS files is enabled, WP Ghost dynamically processes every CSS and JS file on every uncached page load. This adds server processing time and can significantly slow down your site if you do not use a caching plugin.

Use a caching plugin. Install a cache plugin like WP Rocket, Autoptimize, or LiteSpeed Cache. Once the processed files are cached, the performance impact disappears. Set the cache to refresh weekly or monthly.

Avoid inline defer JS in your caching plugin. Inline defer JS loads JavaScript content as Base64 data URLs. WP Ghost can not process Base64-encoded content. Use delayed JS instead of inline defer JS in your caching plugin’s settings.

Multiple cache layers can cause inconsistencies. Browser cache, server cache, CDN cache, and WordPress caching plugin cache can all serve old files with original class names. After enabling Text Mapping in CSS/JS files, clear all cache layers and test in a private browser window. Because of caching, the class name may appear changed in some files and unchanged in others until all caches refresh. This creates temporary style and script errors.

Test thoroughly. WooCommerce and Elementor use their class names extensively in JavaScript for DOM manipulation, event handling, and AJAX interactions. Replacing these names requires that every reference in HTML, CSS, and JS is updated consistently. Test product pages, cart, checkout, form submissions, and any interactive elements after enabling.

Is This Necessary for Security?

For hack prevention, no. Hacker bots target known paths and vulnerabilities, not CSS class names. Changing your WordPress paths, enabling the 8G Firewall, and activating Brute Force Protection are what actually prevent attacks. These features block bots before they can reach your plugins or database.

For detection concealment, yes. If your goal is to make it impossible for theme detectors, competitors, or curious visitors to identify your CMS and plugins, hiding class names is the final layer after paths, meta tags, and element IDs are all hidden. This is an aesthetic and competitive concern, not a security one.

Focus on WordPress-exclusive plugins when deciding what to hide. Plugins like WooCommerce, Elementor, Contact Form 7, Gravity Forms, and Yoast SEO only exist for WordPress. Plugins that exist on multiple platforms (like generic analytics tools) do not reveal your CMS specifically.

Frequently Asked Questions

Is this necessary for every site?

No. This is advanced. For most sites, changing plugin paths, hiding element IDs, and removing version numbers provides excellent protection against both bots and detection tools. Class name hiding adds the final layer for maximum CMS concealment, but it comes with performance trade-offs and requires a caching plugin to work well.

Will WooCommerce still work correctly?

Yes, when properly configured with Text Mapping in CSS and JS files enabled and a caching plugin active. WooCommerce functions normally including product pages, cart, checkout, and account pages. Test thoroughly after enabling, especially checkout and payment flows.

What about the impact on page load speed?

Without a caching plugin, enabling Text Mapping in CSS and JS files will noticeably slow down your site because every CSS and JS file is processed dynamically. With a caching plugin that combines and caches these files, the performance impact is eliminated after the first page load. We strongly recommend using a cache plugin if you enable this feature.

Can I hide class names without affecting CSS and JS files?

You can replace class names in HTML only (without enabling the CSS/JS option), but this will break your styles and scripts. The CSS will target the original class name while the HTML uses the new name, so styles will not apply. If you want class name replacement to work correctly, you must enable Text Mapping in CSS and JS files.

Does WP Ghost modify WordPress core files?

No. Text Mapping replaces class names in the HTML output and in dynamically generated copies of CSS/JS files. The original plugin files, theme files, and WordPress core remain untouched. Disabling Text Mapping restores all original class names instantly.