How To Completely Disable “Compare Products” In Magento 2

Magento's built-in "Compare Products" feature allows customers to easily compare different products on your e-commerce store. However, this feature might not be beneficial for all types of online stores. Many merchants prefer disabling this feature to simplify their site's interface, improve user experience, and guide customers directly to the checkout process without unnecessary distractions. Removing this feature can also help to improve your store's page load speeds, which is an important factor for SEO and user satisfaction.

Why You Might Want to Disable "Compare Products"?

Simplify the User Interface: Remove unnecessary clutter from your product and category pages.
Improve User Experience: Guide your customers towards quicker purchasing decisions without distractions.
Better Performance: Reduce page loading time by eliminating unused scripts and UI elements.

Step-by-Step Guide to Completely Disable "Compare Products"

Step 1: Disable Default Compare Blocks Using XML

Magento renders its UI elements through layout XML files. To remove the compare blocks, modify or create a layout XML file in your child theme directory as follows:

File location:

app/design/frontend/<Your_Theme>/Magento_Catalog/layout/default.xml

Add the following XML content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true"/>
        <referenceBlock name="category.product.addto.compare" remove="true"/>
        <referenceBlock name="catalog.product.link.compare" remove="true"/>
        <referenceBlock name="catalogsearch.product.addto.compare" remove="true"/>
        <referenceBlock name="view.addto.compare" remove="true"/>
        <referenceBlock name="related.product.addto.compare" remove="true"/>
        <referenceBlock name="upsell.product.addto.compare" remove="true"/>
        <referenceBlock name="product.info.addto.compare" remove="true"/>
        <referenceBlock name="product.compare.link" remove="true"/>
    </body>
</page>

Step 2: Completely Hide "Compare" Buttons Using CSS/Less

Occasionally, themes might still show compare buttons due to custom JavaScript or templates. Completely hide these buttons using CSS:

File location:

app/design/frontend/<Your_Theme>/web/css/source/_extend.less

Add the following styles:

.action.tocompare,
.compare,
a[href*="product_compare"],
li[class*="compare"] {
    display: none !important;
}

Step 3: Deploy and Apply Your Changes

After modifying XML and CSS files, apply the changes through Magento's CLI by running the following commands from your store's root directory:

bin/magento setup:upgrade bin/magento setup:static-content:deploy -f bin/magento cache:clean

Verifying Your Changes

To ensure "Compare Products" has been fully disabled, perform these verification checks:

Category pages: Confirm the absence of compare buttons or links.
Product detail pages: Check that no compare option is visible.
Search results pages: Verify the compare buttons are removed entirely.

Tip: Always clear your browser's cache or test in incognito mode to ensure the latest changes are accurately reflected.

Enhancing Your Magento Store

Disabling Magento's "Compare Products" functionality can significantly enhance user experience and simplify your store's interface, particularly beneficial for specialized or single-product stores. While this guide is specifically tailored and tested on Magento 2.4.7, the instructions are generally applicable to most Magento 2.x installations and themes.

If you encounter any issues or require further assistance with Magento optimization, customization, or troubleshooting, feel free to reach out to our experienced Magento developers for professional support.

How to Completely Disable “Compare Products” in Magento 2