Woocommerce default pagination with ajax not working

Anonymous

#269520

Hallo,

We’re using the default Woocommerce templates and set S&F Display results to Woocommerce. We’re trying to use load the results with Ajax but the Woocommerce pagination is not updating. I’ve set the Pagination selector to .woocommerce-pagination a

Code for pagination:

$total   = isset( $total ) ? $total : wc_get_loop_prop( 'total_pages' );
$current = isset( $current ) ? $current : wc_get_loop_prop( 'sf_paged' );
$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;
}
?>
<section class="woocommerce-pagination pb-5 pb-md-75 bg-grey">
	<div class="container-xl">
		<nav>
			<?php
        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' => '&larr;',
              'next_text' => '&rarr;',
              'type'      => 'list',
              'end_size'  => 3,
              'mid_size'  => 3,
            )
          )
        );
			?>
		</nav>
	</div>
</section>

Code output: as seen on: https://otaking.tv/the-otaku-shop/

Trevor

#269540

What Ajax Container are you using?

I would try either:

.products OR #shop

The issue with the latter is that it also includes the filter form, which is not always a good thing to do.

The problem is that there is not a container in the template that holds just the products and the pagination, so, if you are able to edit the template, add a div around those two sections, or maybe move the pagination in to the same section as the products and give that section a custom class?

Anonymous

#269546

Right now i’m using #products .row for the ajax container.

Correct me if i’m wrong but I’ve got the products in its own #products section and the pagination in its own .woocommerce-pagination section.

Trevor

#269548

Generally, the pagination needs to be inside the Ajax Container, otherwise it cannot be updated.

Anonymous

#269551

Ah got it, got it fixed now. Wrapped both sections inside an #sfp_ajax_container div

Trevor

#269554

Great, is it OK to close this thread for now?

Anonymous

#269556

Yes ! Thank you for the (fast) support !

[Author]

Posts