Center Pagination

Hi Robert,

We can definitely take a closer look; Can you share the exact CSS that you’ve used along with a link to the page you’re having trouble with?

Thanks!

Hi @riaanknoetze

The site is https://minidesign.se

I also would like to fix so the pagination doesn’t show on top only at the buttom.
Would appreciate any help.

I have tried something like:
`.woocommerce nav.woocommerce-pagination ul li {
border-right: 1px solid #ffffff;
background: white !important;
}
.page-numbers {
background-color: #ffffff;
border: 1px solid #ffffff !important;
}
.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:visited {
display: block !important;
background: #77a464 !important;
color: #363636 !important;
padding: 10px 19px !important;
}
.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers li a:hover {
padding: 10px 19px !important;
}

This is just an example I found, haven’t got it to work.

• This reply was modified 3 years, 2 months ago by Robert.

Hi there,

Which page do you have a the pagination on?

Could you share your System Status Report, it would help us to understand your site setup a bit better. You can find it via WooCommerce > Status. Select Get system report and then Copy for support. Once you’ve done that, paste it here in your reply.

@thup90 Thank you for the reply.
I don’t want to share the system report for some couple of reasons, I hope you don’t mind.

I have pagination almost on every product pages, like this for an example:
https://minidesign.se/produkter/outlet/

I want to hide the pagination on top of the page and only have it showing at the bottom of the page, and also centered. I have tried plenty CSS variant but none of them have made any effect on the paginations. I have also tried to make them bigger and with another background color.

Any idea or suggestions?
Appreciate it.

Hi @roberthedlund

Removing Pagination

Since you are currently using the Storefront theme, you can remove the pagination at the top of the page by adding the following code to your site, either in a child theme functions.php file, or by using a plugin such as code snippets.

function my_custom_remove_storefront_pagination(){
	remove_action( 'woocommerce_before_shop_loop', 'storefront_woocommerce_pagination', 30 );
}
add_action('init', 'my_custom_remove_storefront_pagination', 999 );

This has been tested on the latest version of Storefront. Note the priority – the remove_action must take place after the Storefront add_action has already happened.

Centering pagination

There are a number of different strategies you could use here, and Google is probably your best friend for this, but centering the <ul> element that contains the pagination can be done like this

.woocommerce .storefront-sorting nav{
	clear:both;
	width:100%;
}
.woocommerce-pagination {
	text-align:centre
}

However, as with most CSS, there are almost as many different ways to do this as there are designers writing CSS.
`