How to remove Add To Compare feature from Magewnto 2

Hi all,

I’m building a site which won’t require product comparison feature.
As you may know you won’t be able to turn it on/off from the M admin panel (or I’m not aware of it).
I did a bit of digging online to find out how to do it.

The best source I found.

I know that the post refers to M2.2.0 but the solution discussed on the site worked fine for my M2.3.4

Step 1.

To remove the “Add to Compare” link from a product page.

I created a catalog_product_view.xml file and placed it in the following directory:

app/design/frontend/MyVendorName/my_theme/Magento_Catalog/layout

There are quite a few methods of creating directories and files. (FileZilla or IDE like PhpStorm right click and add new directory/file or Linux commands)
Recently I decided to learn some of Linux’s commands and did the following:

I logged in to my Magento root directory with my magento user.
(I’m guessing that you watched Craig’s tutorial how to install Mag. 2.3 )
How to install Magento 2.3 and build a web server so you should be familiar with the processes and what magento user and superuser is.

Once you in /var/www/html directory navigate to your app/design/fronted/YourVendor/your_theme directory.
I’m assuming that you already have your own Theme registered. If not hmm :thinking: I’ll try to find a good source on how to do it.

Then I created the following directories Magento_Catalog/layout with the following command

mkdir -p Magento_Catalog/layout

(mkdir stands for make directory and the -p flag allows to create multiple categories with parent directories :slight_smile: )

Navigate into the newly created layout category ((I’m assuming that at this point you are still in your theme directory) so run the following command:

cd Magento_Catalog/layout

Once there we are going to create a catalog_product_view.xml file. (The original file could be found in vendor/magento/module_catalog/view/frontend/layout)

You can create a file using “touch” command i.e
touch catalog_product_view.xml
and next edit the file but I noticed that I can create a file using a text editor which I’m guessing you are familiar with.
So I typed:
nano catalog_product_view.xml

and added the following content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="view.addto.compare" remove="true" />
    </body>
</page>

An additional tip on - How to hide SKU from a product page.

In my case, I don’t want SKUs to be visible on product pages so I decided to hide them.
To do so simply add to your catalog_product_view.xml file so it looks like:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.sku" remove="true" />
        <referenceBlock name="view.addto.compare" remove="true" />
    </body>
</page>

Then Ctrl + “X” and “Y”

Step 2.
Removing “Add to compare” link from category pages.

I created default.xml file within app/design/frontend/MyVendorName/my_theme/Magento_Catalog/layout (The original file could also be found in vendor/magento/module_catalog/view/frontend/layout)

Simply run the following command

nano default.xml

and add the following content

<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.link" remove="true"/>
        <referenceBlock name="catalog.compare.sidebar" remove="true"/>
    </body>
</page>

Then Ctrl + “X” and “Y” (You should know this well if you follow Craig’s tutorials.)

Step 3.

Deploy your static content with

bin/magento setup:static-content:deploy en_US -f

(remember to add more languages if you have some i.e bin/magento setup:static-content:deploy en_US en_GB de_DE fr_FR -f)

Remove any processed files that have already been generated with:

rm -rf pub/static/frontend/ var/view_preprocessed/

Clean your cache

bin/magento c:c

Enjoy. :slight_smile:
I hope it will be useful for some of you.

Craig please check the post and feel free to amend it if needed.
Thank you.

Hmmm :thinking: I’ve just noticed that my code has been stripped from the post.
I’ll try to do some screenshots.

I’ve just noticed that there is one more place where the “Add to compare” feature is shown.

Do you guys know how to remove/hide this one?

Did you check the Porto Settings, I’m sure there’s something in there

Adding Code Snippets to posts

When you submit a block of code in a post, add the 3 of these (```) before and after the code. It’s the same format when using sites like Stack Exchange.

code key

(screenshot of my post)
ExB


Example (Bad)

<?php echo 'I am unformatted code'; ?>

Example (Good)

<?php echo 'I am formatted code'; ?>

Hi Craig,

I gave up Porto for now and trying to understand and modify Luma theme.

Thanks for the tip on how to add code snippets. I need to play with it. I looks better now.

Formatting looks :+1:

As for removing that icon. I don’t know the answer exactly, but these are the steps I would take…

Find reference references in vendor/magento/magento-catalog

I chose to look at the HTML Source in Chrome and find a reference to search for. I chose “add-to-links”. Then in SSH I ran the below command to find files with that line in it (not it’s case sensitive):

grep -Rl 'add-to-links' vendor/magento/module-catalog

And the results were:

vendor/magento/module-catalog/view/base/web/template/product/list/listing.html
vendor/magento/module-catalog/view/frontend/templates/product/listing.phtml
vendor/magento/module-catalog/view/frontend/templates/product/compare/list.phtml
vendor/magento/module-catalog/view/frontend/templates/product/view/addto.phtml
vendor/magento/module-catalog/view/frontend/templates/product/view/addto/compare.phtml
vendor/magento/module-catalog/view/frontend/templates/product/widget/new/content/new_grid.phtml
vendor/magento/module-catalog/view/frontend/templates/product/widget/new/content/new_list.phtml
vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml
vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Viewing the files

I think the most obvious file is new_list.phtml as the HTML appears to line up with what’s in the page source. Plus the name appears to be related. I think you’d want to override this file by putting it in your child theme. Experiment with stuff such as:

  • Line 27: Change $showCompare from true to false
  • Line 117-121: Comment out or delete

Note: Line 115 looks like the Compare Icon is shown based on some sort of logic. It seems to imply that there’s a setting somewhere (if ($block->getAddToCompareUrl() && $showCompare)). Or maybe it’s simply referencing Line 27.

I’m sure you can work the rest out yourself.