Wordpress pagination - Can't go to other pages - php

Question

I'm using wordpress and I'm trying to create a pagination with wordpress WP_query. I have used a tutorial for this and some people had the same problem like me that they couldn't connect to the second or third page of their pagination. I have 11 posts in my database and I have split them so they show 4 per page and whether I try to go to second or third page, it just says "404 page not found". Here is my index.php:
<?php
get_header();?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$query_args = array(
'post_type' => 'all_products',
'posts_per_page' => 4,
'paged' => $paged,
'page' => $paged
);
$the_query = new WP_Query( $query_args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<article class="loop">
<div class="product">
<h1><?php the_title(); ?></h1>
<ul>
<li><strong>Description:</strong> <?php echo(types_render_field( "description_of_the_product", array( 'raw' => true) )); ?></li>
<li><strong>Type:</strong> <?php echo(types_render_field( "type", array( 'raw' => true) )); ?></li>
<li><strong>Price:</strong> <?php echo(types_render_field( "price", array( 'raw' => true) )); ?></li>
<li><strong>Manufacturer:</strong> <?php echo(types_render_field( "manufacturer", array( 'raw' => true) )); ?></li>
<li><strong>Availability:</strong> <?php echo(types_render_field( "availability:", array( 'raw' => true) )); ?></li>
<li><strong>Reference:</strong> <?php echo(types_render_field( "reference", array( 'raw' => true) )); ?></li>
Read more
<ul>
</div>
</article>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php
if (function_exists('custom_pagination')) {
custom_pagination($the_query->max_num_pages,"",$paged);
}
?>
<?php next_posts_link( $label , $max_pages ); ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Any help is greatly appreciated.
Pagination function(custom_pagination):
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
if (empty($pagerange)) {
$pagerange = 2;
}
/**
* This first part of our function is a fallback
* for custom pagination inside a regular loop that
* uses the global $paged and global $wp_query variables.
*
* It's good because we can now override default pagination
* in our theme, and use this function in default queries
* and custom queries.
*/
global $paged;
if (empty($paged)) {
$paged = 1;
}
if ($numpages == '') {
global $wp_query;
$numpages = $wp_query->max_num_pages;
if(!$numpages) {
$numpages = 1;
}
}
/**
* We construct the pagination arguments to enter into our paginate_links
* function.
*/
$pagination_args = array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%',
'total' => $numpages,
'current' => $paged,
'show_all' => False,
'end_size' => 1,
'mid_size' => $pagerange,
'prev_next' => True,
'prev_text' => __('«'),
'next_text' => __('»'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
$paginate_links = paginate_links($pagination_args);
if ($paginate_links) {
echo "<nav class='custom-pagination'>";
echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
echo $paginate_links;
echo "</nav>";
}
}