How to get rid off Wish List and Compare Product from Category page in OpenCart
Opencart Version 2.3.0.2
Some online shops like restaurants may not require 'Add to wish List' and 'Compare the Product' buttons on the category view page.
Go to category.tpl which is the template file for category view and comment out the two lines of code.
Where is the template file located?
pbulic_html/catalog/view/theme/default/template/product/category.tpl
Where is the code?
Approximately at line no:130 you will see the following
<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
</div>
How to comment out the lines?
<!-- following lines are commented out <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button> -->
Both buttons are removed, but an empty space is left after the 'Add To Cart' Button.
To get rid of this empty space, you have to edit the style sheet. Change width of button-group button to 100% from 60%.
Style sheet is located at
pbulic_html/catalog/view/theme/default/stylesheet/stylesheet.css
.product-thumb .button-group button {
/*width: 60%; original */
width: 100%;
The result is
Now you have to comment out line 64 as shown below to hide 'Product Compre (0)' from the top of the page.
<!-- Comment out <div class="form-group">
<a href="<?php echo $compare; ?>" id="compare-total" class="btn btn-link"><?php echo $text_compare; ?></a>
</div> -->
Some online shops like restaurants may not require 'Add to wish List' and 'Compare the Product' buttons on the category view page.
Go to category.tpl which is the template file for category view and comment out the two lines of code.
Where is the template file located?
pbulic_html/catalog/view/theme/default/template/product/category.tpl
Where is the code?
Approximately at line no:130 you will see the following
<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
</div>
How to comment out the lines?
<!-- following lines are commented out <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button> -->
Both buttons are removed, but an empty space is left after the 'Add To Cart' Button.
To get rid of this empty space, you have to edit the style sheet. Change width of button-group button to 100% from 60%.
Style sheet is located at
pbulic_html/catalog/view/theme/default/stylesheet/stylesheet.css
.product-thumb .button-group button {
/*width: 60%; original */
width: 100%;
The result is
Now you have to comment out line 64 as shown below to hide 'Product Compre (0)' from the top of the page.
<!-- Comment out <div class="form-group">
<a href="<?php echo $compare; ?>" id="compare-total" class="btn btn-link"><?php echo $text_compare; ?></a>
</div> -->



Comments