Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como fazer um tema WordPress pronto para WooCommerce

Você está em:

Como fazer um tema WordPress pronto para WooCommerce
Torne seu tema WordPress compatível com WooCommerce com esses trechos úteis

Então você quer adicionar uma loja ao seu tema – incrível! WooCommerce é uma ótima escolha. Tecnicamente falando,  TODOS os temas são “Compatíveis com WooCommerce” porque é um plugin. 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 para seus usuários finais nã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 você pode usar para fornecer um suporte “melhor” ao WooCommerce em seu tema e/ou alterar coisas para seu design específico.

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

Verifique se o WooCommerce está ativado

Nos meus temas eu gosto de definir uma constante personalizada que pode ser usada para verificar se o WooCommerce está habilitado desta forma eu posso incluir arquivos ou executar funções somente quando o WooCommerce estiver ativo (veja a mensagem importante acima se você ainda não o fez).

// Add new constant that returns true if WooCommerce is active

define( ‘WPEX_WOOCOMMERCE_ACTIVE’, class_exists( ‘WooCommerce’ ) );

// Checking if WooCommerce is active

if ( WPEX_WOOCOMMERCE_ACTIVE ) {

   // Do something…

   // Such as including a new file with all your Woo edits.

}

Declare suporte ao WooCommerce

Este é o primeiro e mais importante código a ser adicionado ao seu tema que “habilita” o suporte ao WooCommerce e impede os avisos do plug-in informando 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 plugins WooCommerce de terceiros. No entanto, se você deseja remover todos os estilos do WooCommerce, é muito fácil.

O snippet a seguir é para remover TODOS os estilos do WooCommerce:

// Remove all Woo Styles

add_filter( ‘woocommerce_enqueue_styles’, ‘__return_empty_array’ );

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

function wpex_remove_woo_styles( $styles ) {

unset( $styles[‘woocommerce-general’] );

unset( $styles[‘woocommerce-layout’] );

unset( $styles[‘woocommerce-smallscreen’] );

return $styles;

}

add_filter( ‘woocommerce_enqueue_styles’, ‘wpex_remove_woo_styles’ );

Ativar Galeria de Produtos WooCommerce, Zoom e Lightbox (v3.0+)

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

add_theme_support( ‘wc-product-gallery-slider’ );

add_theme_support( ‘wc-product-gallery-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 escondê-lo via CSS.

add_filter( ‘woocommerce_show_page_title’, ‘__return_false’ );

Alterar o título do arquivo para a loja

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

function wpex_woo_archive_title( $title ) {

if ( is_shop() && $shop_id = wc_get_page_id( ‘shop’ ) ) {

$title = get_the_title( $shop_id );

}

return $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 arquivos de produtos (categorias e tags).

// Alter WooCommerce shop posts per page

function wpex_woo_posts_per_page( $cols ) {

    return 12;

}

add_filter( ‘loop_shop_per_page’, ‘wpex_woo_posts_per_page’ );

Altere 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 apenas alterar o filtro ‘loop_shop_columns’, você também deve adicionar as classes exclusivas à tag do corpo para que as colunas funcionem. Enquanto os Shortcodes 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.

// Alter shop columns

function wpex_woo_shop_columns( $columns ) {

return 4;

}

add_filter( ‘loop_shop_columns’, ‘wpex_woo_shop_columns’ );

// Add correct body class for shop columns

function wpex_woo_shop_columns_body_class( $classes ) {

if ( is_shop() || is_product_category() || is_product_tag() ) {

$classes[] = ‘columns-4’;

}

return $classes;

}

add_filter( ‘body_class’, ‘wpex_woo_shop_columns_body_class’ );

Alterar as setas de paginação seguinte e anterior

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

function wpex_woo_pagination_args( $args ) {

$args[‘prev_text’] = ‘<i class=”fa fa-angle-left”></i>’;

$args[‘next_text’] = ‘<i class=”fa fa-angle-right”></i>’;

return $args;

}

add_filter( ‘woocommerce_pagination_args’, ‘wpex_woo_pagination_args’ );

Alterar o texto do emblema OnSale

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

function wpex_woo_sale_flash() {

return ‘<span class=”onsale”>’ . esc_html__( ‘Sale’, ‘woocommerce’ ) . ‘</span>’;

}

add_filter( ‘woocommerce_sale_flash’, ‘wpex_woo_sale_flash’ );

Alterar colunas de miniaturas da Galeria de produtos

Você pode querer alterar o número de colunas para as miniaturas da galeria de produtos individuais dependendo do seu layout e esta função fará exatamente isso.

function wpex_woo_product_thumbnails_columns() {

return 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 um único produto.

// Set related products to display 4 products

function wpex_woo_related_posts_per_page( $args ) {

$args[‘posts_per_page’] = 4;

return $args;

}

add_filter( ‘woocommerce_output_related_products_args’, ‘wpex_woo_related_posts_per_page’ );

Altere o número de colunas por linha para seções relacionadas e up-sells em produtos

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

// Filter up-sells columns

function wpex_woo_single_loops_columns( $columns ) {

return 4;

}

add_filter( ‘woocommerce_up_sells_columns’, ‘wpex_woo_single_loops_columns’ );

// Filter related args

function wpex_woo_related_columns( $args ) {

$args[‘columns’] = 4;

return $args;

}

add_filter( ‘woocommerce_output_related_products_args’, ‘wpex_woo_related_columns’, 10 );

// Filter body classes to add column class

function wpex_woo_single_loops_columns_body_class( $classes ) {

if ( is_singular( ‘product’ ) ) {

$classes[] = ‘columns-4’;

}

return $classes;

}

add_filter( ‘body_class’, ‘wpex_woo_single_loops_columns_body_class’ );

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

Este snippet adicionará um item de carrinho WooCommerce ao seu menu que exibe o custo dos itens em seu 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 encapsuladas em uma condicional is_admin() porque dependem do AJAX para atualizar o custo, você deve garantir que as funções estejam disponíveis quando is_admin() retornar true e false.

// Add the cart link to menu

function wpex_add_menu_cart_item_to_menus( $items, $args ) {

// Make sure your change ‘wpex_main’ to your Menu location !!!!

if ( $args->theme_location === ‘wpex_main’ ) {

$css_class = ‘menu-item menu-item-type-cart menu-item-type-woocommerce-cart’;

if ( is_cart() ) {

$css_class .= ‘ current-menu-item’;

}

$items .= ‘<li class=”‘ . esc_attr( $css_class ) . ‘”>’;

$items .= wpex_menu_cart_item();

$items .= ‘</li>’;

}

return $items;

}

add_filter( ‘wp_nav_menu_items’, ‘wpex_add_menu_cart_item_to_menus’, 10, 2 );

// Function returns the main menu cart link

function wpex_menu_cart_item() {

$output = ”;

$cart_count = WC()->cart->cart_contents_count;

$css_class = ‘wpex-menu-cart-total wpex-cart-total-‘. intval( $cart_count );

if ( $cart_count ) {

$url  = WC()->cart->get_cart_url();

} else {

$url  = wc_get_page_permalink( ‘shop’ );

}

$html = $cart_extra = WC()->cart->get_cart_total();

$html = str_replace( ‘amount’, ”, $html );

$output .= ‘<a href=”‘. esc_url( $url ) .'” class=”‘ . esc_attr( $css_class ) . ‘”>’;

$output .= ‘<span class=”fa fa-shopping-bag”></span>’;

$output .= wp_kses_post( $html );

$output .= ‘</a>’;

return $output;

}

// Update cart link with AJAX

function wpex_main_menu_cart_link_fragments( $fragments ) {

$fragments[‘.wpex-menu-cart-total’] = wpex_menu_cart_item();

return $fragments;

}

add_filter( ‘add_to_cart_fragments’, ‘wpex_main_menu_cart_link_fragments’ );

Conclusão

O WooCommerce funcionará com qualquer tema por padrão, mas adicionar algum suporte extra para o plug-in para que ele se adapte melhor ao seu tema é muito fácil de fazer. Na verdade, eu escrevi este post enquanto codificava nosso tema New York WordPress Blog & Shop,  então a maioria desses ajustes está incluída em nosso tema. Ou se preferir, pode comprar o tema para ver como tudo foi feito (veja os arquivos em wpex-new-york/inc/woocommerce) – pode ser uma maneira mais fácil de aprender como adicionar corretamente suporte personalizado para o plugin WooCommerce observando um tema já codificado.

Existem outros snippets que você acha que pertencem a esta lista ou você acharia útil ao desenvolver novos temas prontos para WooCommerce?

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.