Como fazer um tema WordPress pronto para WooCommerce
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?