Enfold WooCommerce storefront top pagination no longer linked to pages.

Hi:

This is the code from the bottom pagination that is missing on the top of page pagination:

<nav class=’pagination’><span class=’pagination-meta’>Page 1 of 5</span><span class=’current’>1</span>2345</nav>

The nav class classes ‘pagination’ and pagination-meta’ are missing. I can hack them into the script, and it works, but it places the pagination out of the frame—i.e. above sidebar and 2/3 page frame with a big space down to the storefront—and gives an error in the code inspector, though it works on the user side.

So the interacrtivity of the pagination at the top seems to be because of missing classes within the equation, and I don’t know how to include them properly.

Any help? This equation needs rewriting to include the interactivity from ‘pagination’ and ‘pagination-meta’:

add_action( ‘woocommerce_before_shop_loop’, ‘enfold_customization_shop_pagination’, 10);
function enfold_customization_shop_pagination()
{
global $avia_config;
if(isset($avia_config[‘dynamic_template’])) return;
if(isset($avia_config[‘overview’] )) echo avia_pagination(”, ‘nav’);
}

Thanks.

– Michael

Hi:

See below:

Thank you very much!

I now have it all working perfectly, and here is the code in one place, just in case anyone else wants to add pagination in a neat, nice layout at the top of their storefront—essential for large stores:

Add snippet—I prefer a snippet plugin so as to not modify theme files:

add_action( ‘woocommerce_before_shop_loop’, ‘enfold_customization_shop_pagination’, 10);
function enfold_customization_shop_pagination()
{
global $avia_config;
if(isset($avia_config[‘dynamic_template’])) return;
if(isset($avia_config[‘overview’] )) echo avia_pagination(”, ‘nav’);
}

Add to custom CSS—(he @media part eliminates the pagination below 1128px, the point at which it starts to overlap:

.woocommerce-page .entry-content-wrapper > .pagination:nth-child(1) {

position: absolute;

right: 50px;

z-index: 99999 !important;

}

@media only screen and (max-width: 1128px) {
.woocommerce-page .entry-content-wrapper > .pagination:nth-child(1) {

display: none;

}
}

Or, to show the pagination stacked below 1028px widths:

@media only screen and (max-width: 1128px) {
.woocommerce-page .entry-content-wrapper > .pagination:nth-child(1) {

position: relative;

right: 0px;

z-index: 0 !important;

}
}