How to Remove Bottom Toolbar Using CSS in Mobile View

category-viewmagento2.1.5pagertoolbar

In product listing page there are two toolbars one at the top of list as shown below:

another toolbar at bottom of list as shown below:

Both of them are has outer div as: <div class="toolbar toolbar-products">

I need to hide the lower one when in mobile devices. For that I'm planning to write css which hides the lower one. I need to add a class to any one of the div so that those two can be distinguished and apply different css for those two. How may I accomplish this?

Best Answer

I don't like Vikas' method as if the element order is changed or .products is removed from the element you lose your styling.

A cleaner method:

Copy vendor/magento/module-catalog/view/frontend/templates/product/list.phtml into your theme.

On line 119 wrap <?php echo $block->getToolbarHtml() ?> in your own div like this:

<div class="bottom-toolbar">
    <?php echo $block->getToolbarHtml() ?>
</div>

And then you can write your CSS targeting that class.

.bottom-toolbar {
    display: none;
}

Even cleaner method

If you want to fully remove it just delete line 119 (<?php echo $block->getToolbarHtml() ?>).

Related Solutions

Toolbar Product Grid – How to Disable or Remove Pager in Toolbar Above Product Grid

You can do this by modifying catalog/product/list.phtml and catalog/prodct/list/toolbar.phtml from your theme.

First, the changes in catalog/product/list/toolbar.phtml.
Wrap the div with class pager in this if statement (the full div element not just the tag opening line):

<?php if (!$this->getHidePager()) : ?>
   <!-- <div class="pager"> here -->
<?php endif;?>

now in catalog/product/list.phtml replace this line at the top of the file:

<?php echo $this->getToolbarHtml() ?>

with this one:

<?php echo $this->getToolbarBlock()->setHidePager(true)->toHtml();?>

and the same line at the bottom of the file with this one:

<?php echo $this->getToolbarBlock()->setHidePager(false)->toHtml();?>

Magento – PAGINATION : Show First and Last Page at pager / toolbar grid view

For me the solution was to dig in the code and find where and why the canShowFirst() and canShowLast() logic was failing

Mage_Catalog_Block_Product_List_Toolbar on line 815:

    $pagerBlock->setUseContainer(false)
        ->setShowPerPage(false)
        ->setShowAmounts(false)
        ->setLimitVarName($this->getLimitVarName())
        ->setPageVarName($this->getPageVarName())
        ->setLimit($this->getLimit())
        ->setFrameLength(Mage::getStoreConfig('design/pagination/pagination_frame'))
        ->setJump(Mage::getStoreConfig('design/pagination/pagination_frame_skip'))
        ->setCollection($this->getCollection());

setJump() was using an admin setting in System > Config > General > Design > Pagination. 'pagination_frame_skip' was empty, but when i echoed it in pager.phtml it gave a value of 0. Seems like the core code should check the value of the store config before setting the jump, but that neither here nor there. I set the value in the admin to 5(which is the default setting in Mage_Page_Block_Html_Pager, but Mage_Catalog_Block_Product_List_Toolbar was overriding it) and all the canShow logic was now working as expected.