Na maioria das vezes, WooCommerce templates vão integrar muito bem com a maior parte dos temas WordPress.

Você pode encontrar problemas quando usar o conteúdo padrão do WooCommerce não coincidir com o tema escolhido. Pode-se perceber facilmente quando seu layout fica quebrado a deixando sua sidebar numa posição incorreta.

Este problema pode afetar a página “shop page”, a “single product page” e a página de taxonomias (categorias e tags) porque o WooCommerce usa um template próprio para exibir estas páginas e é impossível o WooCommerce saber exatamente qual marcação você usa no seu tema. Outras páginas (checkout, cart account) não são afetadas pois utilizam o arquivo ‘page.php’ do seu tema.

Existem duas maneiras de resolver este problema:

• Usando hooks (para usuários avançados/desenvolvedores)
• Usando a função woocommerce_content() dentro do seu tema

Nota: Este tutorial não garante que você não vá ter problemas durante a integração. Procure um expert em WooCommerce para ajuda, caso você não consiga resolver os problemas de conflito que porventura possam existir.

Usando woocommerce_content()

Esta solução permite que você crie um novo template  dentro do seu tema para ser usado para todos os displays de taxonomias e posts do WooCommerce. Apesar da facilidade de implementação, há uma desvantagem, pois o modelo será usado para todas as taxonomias do WooCommerce, mas na maioria dos casos é o suficiente para se iniciar uma loja virtual. Para desenvolvedores, o ideal é utilizar a opção hook.

Para configurar este template, siga os seguintes passos:

1 => Duplique o arquivo ‘page.php’

Crie uma cópia do arquivo ‘page.php’ do seu tema e renomeie para ‘woocommerce.php’. Este arquivo deve ficar dentro do diretório inicial de seu tema, juntamente com o arquivo ‘index.php’.

2 => Edite seu layout (woocommerce.php)

Abra seu novo arquivo criado no passo anterior ‘woocommerce.php’ em um editor de textos.

3 => Substitua o loop

Agora você precisa encontrar o loop. Geralmente ele inicia assim:

<?php if ( have_posts() ) :

e usualmente termina assim:

<?php endif; ?>

Isto pode variar entre temas diferentes. Uma vez que tenha encontrado o trecho de código, delete. No lugar dele digite:

<?php woocommerce_content(); ?>

Isto fará com que usemos o loop do WooCommerce como padrão. Salve o arquivo. Pronto! Você pode agora pular para a parte “Declarando o suporte ao WooCommerce”.

Nota: Quando criamos ‘woocommerce.php’ na pasta do tema, não podemos sobrescrever o template do arquivo ‘woocommerce/archive-product.php’ pois o ‘woocommerce.php’ tem prioridade sobre ‘archive-product.php’. Isto acontece para prevenir problemas de exibição.

Usando Hooks

O método hook é mais complexo do que quando usamos woocommerce_content, mas é mais flexível. Ele é similar ao método que usamos ao criar nossos temas. É também o método que usamos para integrar de maneira adequada aos temas Twenty Ten e Eleven (Padrão do WordPress).

Insira algumas linhas no seu arquivo ‘functions.php’.

Primeiro remova o hook do Wrapper WooCommerce:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Agora insira o hook no seu arquivo ‘functions.php’ de acordo com o que precisa para ser exibido corretamente em seu tema. Neste caso estamos tratando de Wrappers (Tags que ‘abraçam’ o conteúdo do site), geralmente é uma div com classe content ou main.

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

Tenha certeza que a marcação de código coincide com o que precisa no seu layout. Se você não tem certeza de quais classes ou IDs deve usar, dê uma olhada no seu arquivo ‘page.php’.

Declarando suporte ao WooCommerce

Agora que você está feliz pelo seu tema ter suporte total ao WooCommerce, chegou a hora de declarar isto no seu código e ocultar a mensagem “Your theme does not declare WooCommerce support”. Faça isso adicionando o trecho de código abaixo no seu arquivo ‘functions.php’:

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

Se tudo der errado

Se você não tiver sucesso com nenhum dos métodos acima e não tiver acesso a um desenvolvedor, é altamente recomendável que veja os temas prontos para WooCommerce que trabalham muito bem e são ótimas soluções sem complicações.