1 – We recommend you do these changes by child theme. Please first follow this tutorial.
2 – Please install these two plugins:
3 – Add into function.php this code:
/** * This code shows pagination for WooCommerce shortcodes when it's embeded on single pages. * Include into functions.php. */ if ( ! is_admin() ) { // ---------------------- FRONTPAGE ------------------- if ( defined('WC_VERSION') ) { // ---------------------- WooCommerce active ------------------- /** * Set Pagination for shortcodes custom loop on single-pages. * @uses $woocommerce_loop; */ add_action( 'pre_get_posts', 'kli_wc_pre_get_posts_query' ); function kli_wc_pre_get_posts_query( $query ) { global $woocommerce_loop; // Get paged from main query only // ! frontpage missing the post_type if ( ! isset( $query->query['post_type'] ) || $query->is_main_query() && ( $query->query['post_type'] == 'product' )){ if ( isset($query->query['paged']) ){ $woocommerce_loop['paged'] = $query->query['paged']; } } if ( ! $query->is_post_type_archive || $query->query['post_type'] !== 'product' ){ return; } $query->is_paged = true; $query->query['paged'] = (isset($woocommerce_loop['paged'])) ? $woocommerce_loop['paged'] : 1; $query->query_vars['paged'] = (isset($woocommerce_loop['paged'])) ? $woocommerce_loop['paged'] : 1; } /** Prepare Pagination data for shortcodes on pages * @uses $woocommerce_loop; */ add_action( 'loop_end', 'kli_query_loop_end' ); function kli_query_loop_end( $query ) { if ( ! $query->is_post_type_archive || $query->query['post_type'] !== 'product' ){ return; } // Cache data for pagination global $woocommerce_loop; $woocommerce_loop['pagination']['paged'] = (isset($woocommerce_loop['paged'])) ? $woocommerce_loop['paged'] : 1; $woocommerce_loop['pagination']['found_posts'] = $query->found_posts; $woocommerce_loop['pagination']['max_num_pages'] = $query->max_num_pages; $woocommerce_loop['pagination']['post_count'] = $query->post_count; $woocommerce_loop['pagination']['current_post'] = $query->current_post; } /** * Pagination for shortcodes on single-pages * @uses $woocommerce_loop; */ add_action( 'woocommerce_after_template_part', 'kli_wc_shortcode_pagination' ); function kli_wc_shortcode_pagination( $template_name ) { if ( ! ( $template_name === 'loop/loop-end.php' && is_page() ) ){ return; } global $wp_query, $woocommerce_loop; if ( ! isset( $woocommerce_loop['pagination'] ) ){ return; } $wp_query->query_vars['paged'] = $woocommerce_loop['pagination']['paged']; $wp_query->query['paged'] = $woocommerce_loop['pagination']['paged']; $wp_query->max_num_pages = $woocommerce_loop['pagination']['max_num_pages']; $wp_query->found_posts = $woocommerce_loop['pagination']['found_posts']; $wp_query->post_count = $woocommerce_loop['pagination']['post_count']; $wp_query->current_post = $woocommerce_loop['pagination']['current_post']; // Custom pagination function or default woocommerce_pagination() kli_woocommerce_pagination(); } /** * Custom pagination for WooCommerce instead the default woocommerce_pagination() * @uses plugin Prime Strategy Page Navi, but added is_singular() on #line16 */ remove_action('woocommerce_after_shop_loop', 'woocommerce_pagination', 10); add_action( 'woocommerce_after_shop_loop', 'kli_woocommerce_pagination', 10); function kli_woocommerce_pagination() { wp_pagenavi(); } }// END WOOCOMMERCE }// END FRONTPAGE
4 – Add into Theme Options -> Custom Code -> Custom CSS this code:
/*wp_pagenavi */ .woocommerce .wp-pagenavi{ margin-top: 30px; }
5 – And here is the result
Leave a Reply
You must be logged in to post a comment.