Seu botão (+ VEJA MAIS PRODUTOS) deve chamar uma função AJAX para carregar mais 4 produtos do banco de dados.
Para usar a paginação com AJAX você precisa:
- Enfileirar um script no Wordpress que vai chamar a função AJAX e o próprio AJAX
- Carregar o offset de posts no script (para pular os produtos que já apareceram)
- Adicionar a função que será chamada pelo AJAX
Então para começar no functions.php do seu tema:
add_action( 'wp_enqueue_scripts', 'meus_scripts', 100 );
function meus_scripts() {
wp_enqueue_script(
'meus_scripts',
get_template_directory_uri() . '/js/scripts.js?ver=1.0', //esse é o arquivo .js do seu tema que vai conter todos os scripts (pode ser diferente no seu tema)
array( 'jquery' ),
null,
false
);
wp_localize_script(
'meus_scripts',
'WPaAjax',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
)
);
}
No scripts.js
do seu tema você adiciona o código que vai chamar o AJAX, e adiciona uma variável offset
, contando os produtos que já foram carregados, que vai ser chamada depois pelo WP_Query.
jQuery(document).ready(function($){
$('#maisprodutos').click(function(e){
e.preventDefault();
var offset = $('.col-md-offset-1 col-md-10').length; //o ideal é dar uma id para essa div
$.post(
WPaAjax.ajaxurl,
{
action : 'mais_produtos',
offset : offset
},
function( response ) {
$('.faixa').append( response );
}
);
});
});
Agora tudo que você precisa fazer é adicionar a função que vai processar a chamada AJAX de acordo com o javascript. Para isso você precisa usar a ação wp_ajax
add_action('wp_ajax_mais_produtos', 'mais_produtos');
add_action('wp_ajax_nopriv_mais_produtos', 'mais_produtos');
function mais_produtos(){
global $wp_query;
$offset = $_POST['offset'];
$args = array(
'offset' => $offset,
'posts_per_page' => 4
);
$wp_query = new WP_Query( $args );
woocommerce_get_template_part( 'content', 'product' );
exit;
}
O seu código vai ficar assim:
<div id="vitrine" class="container-fluid">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 12, //Quantos produtos aparecerão na página inicial?
);
$loop = new WP_Query( $args ); ?>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<?php if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-md-3 prod">
<div class="interna">
<div class="faixa"></div>
<?php woocommerce_get_template_part( 'content', 'product' );?>
</div>
</div>
<?php endwhile;
} else {
echo __( 'No products found' );
}
wp_reset_postdata();
?>
</div>
<div id="mais-prod">
<p><a href="#" id="mais_produtos">+ VEJA MAIS PRODUTOS</a></p>
<div class="divisoria"></div>
</div>
Esse código é apenas um exemplo. O ideal é que as funções tenham nomes únicos e que as suas divs tenham ids. Apesar de a maioria das funções de plugins e temas Wordpress estarem em inglês, a melhor prática é adicionar o nome do seu tema/plugin antes do nome da função.
Espero que ajude!