0

In product listing page there are two toolbars one at the top of list as shown below: enter image description here another toolbar at bottom of list as shown below:

enter image description here

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?

  • You can add your custom class in the list.phtml file then add css @Purushotam – Learing_Coder Jul 18 '17 at 10:31
  • I did not find that in list.phtml . can you show me in answer? @Pranay K – Purushotam Sangroula Jul 18 '17 at 10:39
1

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() ?>).

1

You can use below code in css.

.products + .toolbar.toolbar-products { display: none; }
  • you did not read question properly. I want to add a class to that second toolbar div. – Purushotam Sangroula Jul 18 '17 at 11:10
  • bro check your question "How to remove the bottom toolbar using css in mobile view?" . you can use above code for this in media tag. – Vikas Verma Jul 18 '17 at 11:14
  • I did that. But it is hiding both of the toolbars. Please check the description. – Purushotam Sangroula Jul 18 '17 at 11:22
  • Did use + sign ? – Vikas Verma Jul 18 '17 at 11:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.