Want to style the pagination links in Woocommerce?

The Problem

An unordered list with the class “page-numbers” is generated by Woocommerce by calling a WordPress function paginate_comments_links .

You can’t append css classes to that list, without getting your hands dirty.

The solution

Here’s a quick solution I hacked in for styling the Woocommerce pagination links.

 

  1. Locate, in your theme, the file that’s responsible for rendering comments; it should be single-product-reviews.php
  2. Locate the line that shows: if ( get_comment_pages_count() > 1 && get_option( ‘page_comments’ ) ) :
  3. Locate the end of the if statement. It should be a few lines down, “endif;”

 

Replace the entire if statement with the following code:

			if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
				echo '<nav class="woocommerce-pagination">';
				$pagination = paginate_comments_links(
					apply_filters(
						'woocommerce_comment_pagination_args',
						array(
							'prev_text' => '&larr;',
							'next_text' => '&rarr;',
							'type'      => 'list',
							'echo'      => false,
						)
					)
				);
				$pagination = str_replace( 'page-numbers', 'page-number', $pagination );
				$pagination = str_replace( "<ul class='page-number'>", '<ul class="page-numbers YOURCLASS YOURCLASS YOURCLASS">', $pagination );
				echo $pagination;
				echo '</nav>';
			endif;

What this does?

As you can see there’s a str_replace function that replaces, well, your string with something else. Check str_replace on PHP, if you want more info on that.

Be sure to replace “YOURCLASS” with an actual CSS class you want to use.

Also, be sure to edit the file in a child team, so your changes are safe in case of a theme update.

To edit the file in a child theme, copy the single-product-reviews.php file to your child theme, keeping the same directory structure.