Annasta + Blocksy

Dear Mandimagc,

We looked into the pagination issue that you reported for Blocksy theme, and have found a workaround solution.

Starting with the next release, the Default WooCommerce pagination option will be added in annasta Filters > Product lists > Add to product list template admin section. This option will allow the addition of the native WooCommerce pagination block to products listings, which should resolve pagination issues that arise in themes that overwrite the standard WooCommerce pagination.

If you have a child theme installed on your site and would like to test adding the native WooCommerce pagination before the next plugin release, please let us know and we will provide you with instructions.

Hello Alex,

1. Here is the function that can be used to display the standard Woocommerce pagination:

function awf_display_standard_woocommerce_pagination() {
	if( ! wc_get_loop_prop( 'is_paginated' ) || ! woocommerce_products_will_display() ) {
		return;
	}

	$args = array(
		'total'   => wc_get_loop_prop( 'total_pages' ),
		'current' => wc_get_loop_prop( 'current_page' ),
		'base'    => esc_url_raw( add_query_arg( 'product-page', '%#%', false ) ),
		'format'  => '?product-page=%#%',
	);

	if ( ! wc_get_loop_prop( 'is_shortcode' ) ) {
		$args['format'] = '';
		$args['base']   = esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) );
	}

	$total   = isset( $total ) ? $total : wc_get_loop_prop( 'total_pages' );
	$current = isset( $current ) ? $current : wc_get_loop_prop( 'current_page' );
	$base    = isset( $base ) ? $base : esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) );
	$format  = isset( $format ) ? $format : '';

	if ( $total <= 1 ) {
		return;
	}

	echo '<nav class="woocommerce-pagination awf-woocommerce-pagination">';
	
	echo paginate_links(
		apply_filters(
			'woocommerce_pagination_args',
			array( // WPCS: XSS ok.
				'base'      => $base,
				'format'    => $format,
				'add_args'  => false,
				'current'   => max( 1, $current ),
				'total'     => $total,
				'prev_text' => is_rtl() ? '&rarr;' : '&larr;',
				'next_text' => is_rtl() ? '&larr;' : '&rarr;',
				'type'      => 'list',
				'end_size'  => 3,
				'mid_size'  => 3,
			)
		)
	);

	echo '</nav>';
}

Add it to the functions.php of your child theme, followed by one (or both) of the insertion calls:

add_action( 'woocommerce_before_shop_loop', 'awf_display_standard_woocommerce_pagination', 100 );
add_action( 'woocommerce_after_shop_loop', 'awf_display_standard_woocommerce_pagination', 10 );

The first one adds the pagination block at the top of the products list, the second one – right after the products list.

2. Below is the example code that can help styling the newly added page numbers to resemble those of your theme’s. Adjust it as needed, and add the rules into the Custom CSS box of annasta Filters > Style settings page, or anywhere else you deem appropriate:

.woocommerce-pagination.awf-woocommerce-pagination {
  margin: 10px 0;
}

.woocommerce-pagination.awf-woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  list-style: none;
}

.woocommerce-pagination.awf-woocommerce-pagination ul li {
  padding: 5px;
}

/* Blocksy */

.woocommerce-pagination.awf-woocommerce-pagination {
  font-size: 14px;
  font-weight: 600;
  color: var(--color);
  --linkInitialColor: var(--color);
}

.woocommerce-pagination.awf-woocommerce-pagination ul.page-numbers .page-numbers {
  display: inline-flex;
  margin: 5px;
  width: 41px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 2px solid transparent;
}

.woocommerce-pagination.awf-woocommerce-pagination ul.page-numbers .page-numbers:not(.dots):hover {
  border-color: var(--linkHoverColor);
}

.woocommerce-pagination.awf-woocommerce-pagination ul.page-numbers .page-numbers.current {
  color: var(--colorActive, #fff);
  background: var(--linkHoverColor);
}

/* end of Blocksy */

3. And finally, go to Appearance > Customize > WooCommerce > Product Archives to disable the Blocksy pagination.

This should do the trick. Please don’t hesitate to let us know if you notice any other filtering problem when using our plugin in combination with Blocksy!