How to style woocommerce pagination

Sparkling
1

Hi

How to style woocommerce pagination similar way like blog post pagination?

Woocommerce pagination even does not work, page not found.

You can check blog pagination, it works well and it looks pretty.

Please help to fix it, thank you.

Best regards,
Marko Veide

2

Woocommerce pagination url started to work after i disabled this old plugin, but pagination url translation was gone.

Added this to my child theme functions.php file.

add_action( ‘init’, ‘my_custom_page_word’ );
function my_custom_page_word() {
global $wp_rewrite;
$wp_rewrite->pagination_base = “leht”;
unset($wp_rewrite->extra_rules_top[“tooted-teenused/page/([0-9]{1,})/?$”]);
$wp_rewrite->extra_rules_top[‘tooted-teenused/leht/([0-9]{1,})/?$’] = ‘index.php?post_type=product&paged=$matches[1]’;
}

Now both, blog and woocommerce pagination works with changed url (pagination page url changed to leht url)

Please help to style woocommerce pagination similarly to blog pagination.

3

Good morning

Ok, please try this code:

.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;
}

4

Hi Noda,

Thank you Noda! Small changes and now it seems similar to blog.

.woocommerce nav.woocommerce-pagination ul li {
border-right: 4px solid #fff;
background: white !important;
}
.page-numbers {
border: none !important;
}
.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:visited {
display: block !important;
background: #77a464 !important;
color: #363636 !important;
padding: 10px 14px !important;
}
.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:hover {
display: block !important;
background: #fff !important;
color: #363636 !important;
}
.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers li a:hover {
padding: 10px 14px !important;
background: #77A464 !important;
color: #fff !important;
}

Good to close topic :slight_smile:

With gratitude and love,
Marko Veide

5

Final and bit smaller style:

.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers li a:hover {
padding: 10px 14px !important;
background: #77A464 !important;
color: #fff !important;
}
.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:visited {
padding: 10px 14px !important;
background: #fff !important;
color: #363636 !important;
}
.page-numbers {
border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
border-right: 4px solid #fff;
background: #fff !important;
}

6

Good evening

Yeah, looks much better now :slight_smile: can we mark this question as a resolved now?

7

Of course, this is solved :slight_smile:

Thank you,
Marko

8

Ok, I will close this case now, Feel free to contact us again if you have other questions

Thanks!