How to remove the bottom toolbar using css in mobile view?
-
10-10-2020 - |
Вопрос
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?
Решение
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() ?>
).
Другие советы
You can use below code in css.
.products + .toolbar.toolbar-products { display: none; }