Torne seu tema WordPress WooCommerce compatível com teses Snippets úteis

Então você quer adicionar uma loja ao seu tema – incrível! O WooCommerce é uma ótima opção. Tecnicamente falando TODOS os temas são “compatíveis com WooCommerce” porque é um plug-in. Em teoria, qualquer plugin deve funcionar com qualquer tema do WordPress (que esteja codificado corretamente).


Como desenvolvedor de temas, você pode querer ajustar a saída do WooCommerce para melhor se adequar ao seu tema ou fornecer opções aos usuários finais que não estão prontamente disponíveis nas configurações do WooCommerce (como alterar o número de colunas na loja). Abaixo, você encontrará alguns trechos úteis que podem ser usados ​​para fornecer suporte “melhor” ao WooCommerce no seu tema e / ou para alterar itens para o seu design específico..

Importante: Muitos dos trechos abaixo usam funções disponíveis apenas no WooCommerce. Portanto, verifique se esses snippets não estão apenas despejados na parte inferior do arquivo functions.php em um tema criado para distribuição. Se você deseja compartilhar seu tema com outras pessoas ou vendê-lo, certifique-se de colocar os snippets em seus próprios arquivos carregados somente quando o plug-in WooCommerce estiver ativo.

Verifique se o WooCommerce está ativado

Nos meus temas, gosto de definir uma constante personalizada que pode ser usada para verificar se o WooCommerce está ativado dessa maneira. Só posso incluir arquivos ou executar funções quando o WooCommerce estiver ativo (veja a mensagem importante acima, se você ainda não o tiver)..

// Adicione uma nova constante que retorne true se o WooCommerce estiver ativo
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Verificando se o WooCommerce está ativo
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Faça alguma coisa...
// Como incluir um novo arquivo com todas as suas edições Woo.
}

Declarar suporte ao WooCommerce

Este é o primeiro e mais importante pedaço de código a ser adicionado ao seu tema, o que “habilita” o suporte ao WooCommerce e evita que os avisos do plug-in digam ao usuário final que o tema não é compatível.

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

Remover CSS do WooCommerce

Pessoalmente, prefiro substituir os estilos do WooCommerce para evitar possíveis problemas com os plug-ins de WooCommerce de terceiros. No entanto, se você deseja remover todos os estilos do WooCommerce, é muito fácil.

O seguinte snippet é para remover TODOS os estilos do WooCommerce:

// Remova todos os estilos Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Este trecho é um exemplo de remoção condicional de estilos CSS específicos:

função wpex_remove_woo_styles ($ styles) {
não definido ($ styles ['woocommerce-general']);
não definido ($ styles ['woocommerce-layout']);
não definido ($ styles ['woocommerce-smallscreen']);
retornar $ estilos;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Ative a Galeria de produtos, o Zoom e o Lightbox do WooCommerce (v3.0 +)

No WooCommerce 3.0, eles introduziram uma nova galeria de produtos, zoom e mesa de luz. Todos devem ser ativados via “add_theme_support” se você quiser usá-los no seu tema.

add_theme_support ('wc-product-gallery-slider');
add_theme_support ('wc-produto-galeria-zoom');
add_theme_support ('wc-product-gallery-lightbox');

Remover o título da loja

Muitos temas já possuem funções para exibir títulos de arquivos, então esse código remove o título extra do WooCommerce, o que é melhor do que ocultá-lo via CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Alterar o título do arquivo da loja

Se o seu tema estiver usando as funções archive_title () ou get_archive_title () para exibir o título dos seus arquivos, você pode ajustá-lo facilmente através de um filtro para pegar o nome da página do seu produto, em vez do título do arquivo da loja.

função wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('loja')) {
$ title = get_the_title ($ shop_id);
}
retornar $ title;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Alterar o número de produtos exibidos por página na loja

Usado para alterar quantos produtos são exibidos por página na loja e nos arquivos de produtos (categorias e tags).

// Altera as postagens da loja WooCommerce por página
função wpex_woo_posts_per_page ($ cols) {
retorno 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Alterar o número de colunas exibidas na loja por linha

Não entendo por que o WooCommerce funciona dessa maneira, mas você não pode simplesmente alterar o filtro ‘loop_shop_columns’; também é necessário adicionar as classes exclusivas à tag body para que as colunas funcionem. Enquanto os códigos de acesso Woo têm um wrapper div com as classes corretas que as páginas da loja não têm, é por isso que precisamos de duas funções.

// Alterar colunas da loja
função wpex_woo_shop_columns ($ colunas) {
retorno 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Adicione a classe correta do corpo para as colunas da loja
função wpex_woo_shop_columns_body_class ($ classes) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ classes [] = 'colunas-4';
}
retornar $ classes;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Alterar as setas de paginação seguinte e anterior

Esse snippet permitirá que você ajuste as setas de paginação na loja para corresponder às do seu tema.

função wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['próximo_texto'] = '';
retornar $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Alterar o texto do selo OnSale

Especialmente útil em sites que usam um idioma diferente ou para remover o ponto de exclamação do qual eu não sou muito fã..

função wpex_woo_sale_flash () {
Retorna '' esc_html __ ('Venda', 'woocommerce'). "';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Alterar colunas de miniaturas da Galeria de produtos

Convém alterar o número de colunas para as miniaturas da galeria de produtos, dependendo do layout, e essa função fará exatamente isso.

função wpex_woo_product_thumbnails_columns () {
retorno 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Alterar o número de produtos relacionados exibidos

Usado para alterar o número de produtos exibidos para produtos relacionados na página de produto único.

// Definir produtos relacionados para exibir 4 produtos
função wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
retornar $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Altere o número de colunas por linha para as seções relacionadas e de vendas superiores nos produtos

Assim como na loja, se você deseja alterar adequadamente o número de colunas para produtos relacionados e com vendas adicionais nas páginas de produto único, você deve filtrar as colunas e também alterar as classes de corpo de acordo.

// Filtrar colunas de vendas mais altas
função wpex_woo_single_loops_columns ($ colunas) {
retorno 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Args relacionados ao filtro
função wpex_woo_related_columns ($ args) {
$ args ['colunas'] = 4;
retornar $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtre as classes do corpo para adicionar a classe da coluna
função wpex_woo_single_loops_columns_body_class ($ classes) {
if (is_singular ('product')) {
$ classes [] = 'colunas-4';
}
retornar $ classes;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Adicione um link de carrinho dinâmico e custo do carrinho ao seu menu

Esse snippet adicionará um item do carrinho do WooCommerce ao seu menu que exibe o custo dos itens no carrinho. Além disso, se o seu site tiver o Font-Awesome ativado, ele exibirá um pequeno ícone de sacola de compras. Importante: Essas funções não devem ser agrupadas em uma condição is_admin () porque elas dependem do AJAX para atualizar o custo. Você deve garantir que as funções estejam disponíveis quando is_admin () retornar verdadeiro e falso.

// Adicione o link do carrinho ao menu
função wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Certifique-se de alterar 'wpex_main' para o local do menu !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'menu-item-menu-item-tipo-carrinho-menu-item-tipo-carrinho-de-woocommerce';

if (is_cart ()) {
$ css_class. = 'item do menu atual';
}

$ items. = '
  • '; $ items. = wpex_menu_cart_item (); $ items. = '
  • '; } retornar $ itens; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Função retorna o link do carrinho do menu principal função wpex_menu_cart_item () { $ output = ''; $ cart_count = WC () -> cart-> cart_contents_count; $ css_class = 'wpex-menu-carrinho-total wpex-carrinho-total-'. intval ($ cart_count); if ($ cart_count) { $ url = WC () -> carrinho-> get_cart_url (); } outro { $ url = wc_get_page_permalink ('loja'); } $ html = $ cart_extra = WC () -> carrinho-> get_cart_total (); $ html = str_replace ('quantidade', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; retornar $ output; } // Atualizar link do carrinho com AJAX função wpex_main_menu_cart_link_fragments ($ fragmentos) { $ fragmentos ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); retornar $ fragmentos; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Conclusão

    O WooCommerce funcionará com qualquer tema por padrão, mas é muito fácil fazer um suporte extra ao plug-in para que ele se encaixe melhor no seu tema. Na verdade, eu escrevi este post enquanto codificava nosso tema Blog & Loja do WordPress em Nova York, para que a maioria desses ajustes seja incluída no nosso tema. Ou, se preferir, você pode comprar o tema para ver como tudo foi feito (consulte os arquivos em wpex-nova-iorque / inc / woocommerce) – pode ser uma maneira mais fácil de aprender como adicionar corretamente suporte personalizado para o plugin WooCommerce, examinando um tema já codificado.

    Existem outros trechos que você acha que pertencem a esta lista ou seriam úteis ao desenvolver novos temas prontos para WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me