0

Currently, toolbar amount is showing at the top in the product listing page. And I want to show this at the bottom in the product listing page.

Items 1-8 of 32

Is there any way to do this without using CSS ?

0

3 Answers 3

1

bottom toolbar amount is hiding from style-m.css

if you want to quickly check the toolbar amount in the bottom then you can do this in same file (list.phtml) by style tag.

<style>
.products.wrapper ~ .toolbar .toolbar-amount {
    display:block;
}

.toolbar-amount {
    display: none;
}
</style>

but include css in phtml file is not a good practice.

For this, you can create _extend.less file in your custom theme & put the below css.

//display toolbar at bottom
.products.wrapper ~ .toolbar .toolbar-amount {
    display:block;
}

//hide toolbar at top
.toolbar-amount {
    display: none;
}
1
2

The tool-bar is already available at the bottom of products.

it is hide using CSS. You can remove display:none and it will start showing.

please see attached screen shot.

enter image description here

If you want to hide top toolbar-amount you can use:

.toolbar-amount {
    display: none;
}
.products.wrapper~.toolbar .toolbar-amount {
    display: block;
}
5
  • wait let me check.. Feb 21, 2020 at 12:50
  • Yes, Now I want to remove the top tool amount. Can I do that with CSS? Feb 21, 2020 at 12:52
  • See my updates in answer
    – Pawan
    Feb 21, 2020 at 13:01
  • thanks you so much Feb 21, 2020 at 13:24
  • welcome @abhishek
    – Pawan
    Feb 21, 2020 at 13:27
0

Override template Magento_Catalog:product/list.phtml in your theme (app/design/frontend/[vendor]/[your-theme]/Magento_Catalog/templates/product/list.phtml).

From here you can move toolbar block wherever you want.

<?= $block->getToolbarHtml() ?>

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.