Personalização da página inicial do tema WooCommerce Storefront [Guia definitivo]

A personalização da página inicial do tema da vitrine é fundamental para qualquer loja online criada com o tema WooCommerce da vitrine. A personalização é necessária, pois um bom design atrai visitantes para sua loja, constrói a confiança do cliente em sua marca e os converte em clientes fiéis.

Neste tutorial, mostrarei algumas customizações simples da página inicial que você pode implementar na página inicial do tema da vitrine, para torná-la mais atraente e melhorar a experiência geral do usuário, o que é igualmente útil para melhorar a otimização do mecanismo de pesquisa.

Antes de criar qualquer personalização no tema do Storefront, é aconselhável primeiro criar o tema filho do Storefront para evitar perder as alterações quando o tema pai for atualizado. Se você também quiser fazer mais personalização no tema Storefront, você pode conferir este guia de personalização da Storefront que compartilhei em uma postagem anterior.

Personalização da página inicial do tema da vitrine

O tema WooCommerce Storefront tem mais de 200.000 instalações ativas na comunidade WordPress. A página inicial do tema tem 6 seções:

• Conteúdo da página
• Seção de categorias de produtos
• Seção de produtos em destaque
• Seção de produtos recentes
• Seção de produtos mais votados
• Seção de produtos à venda
• Seção de produtos mais vendidos

No entanto, antes de irmos para a personalização, você precisa configurar a página inicial. Para exibir as seções da página inicial em sua página inicial, você deve atribuir o modelo de página inicial à sua página.

O tema Storefront cria automaticamente dois modelos de página adicionais, além das páginas padrão do WooCommerce. Eles são Página inicial e Largura total. Aqui vamos apenas discutir como você pode configurar o modelo de página inicial.

Modelo de página inicial

O modelo de página inicial oferece uma ótima maneira de exibir todos os seus produtos, fornecendo uma visão geral dos produtos e categorias de produtos.

Os visitantes da sua loja irão primeiro chegar a esta página ao entrar na sua loja. A aparência da página inicial importa muito porque os visitantes podem ser convertidos em compradores se for atraente.

Configurá-lo é muito fácil, pois você só precisa:

1. Faça login no painel de administração do seu site como administrador .
2. Crie uma nova página e adicione algum conteúdo para exibir.
3. Em seguida, você terá que selecionar a ' Página inicial ' no menu suspenso de modelos na caixa meta Atributos da página , conforme mostrado abaixo:
4. Depois de publicar esta página, você pode defini-la como página inicial navegando até Configurações e depois em Leitura .
5. Em seguida, você marcará ' Uma página estática ' e selecionará a página inicial criada no menu suspenso ' Página inicial '.
6. Depois de salvar as alterações, elas serão refletidas automaticamente no front-end .

Depois que a configuração estiver concluída, sua página inicial deverá ter várias seções, conforme mostrado abaixo:

Na página inicial, são exibidos diferentes clusters, como produtos recomendados, favoritos dos fãs, produtos em promoção e mais vendidos. A maneira como esses elementos são exibidos é a mesma do pedido no back-end.

Depois que a página inicial estiver configurada, agora podemos chegar à personalização:

1. Remova imagens de categorias de produtos da página inicial

O WooCommerce permite exibir produtos e categorias de produtos com suas imagens na página inicial. No entanto, se você preferir que as categorias sejam exibidas apenas como texto, você precisa adicionar esta linha ao arquivo functions.php do seu tema filho. Basta adicioná-lo ao final do arquivo function.php.

remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

Aqui está o resultado:

2. Altere o link do URL no logotipo

Em geral, os temas do WordPress vinculam a página inicial do site no logotipo. Essa é uma função padrão para a maioria dos sites, e os usuários esperam poder voltar à página inicial toda vez que clicarem no logotipo.

No entanto, e se a página inicial estiver em um local diferente? Isso significa que você precisa configurar a URL se quisermos um link personalizado. Para mudar isso, precisamos adicionar o seguinte código ao arquivo functions.php do tema filho:

 add_action( 'storefront_header' , 'custom_storefront_header', 1 );

function custom_storefront_header () {

    remove_action( 'storefront_header' , 'storefront_site_branding', 20 );

    add_action( 'storefront_header' , 'custom_site_branding', 20 );

    function custom_site_branding() {

        // AQUI defina o link do seu logotipo ou título do site

        $link = home_url( '/meu-link personalizado/');

        ?>

        <div class="site-branding">

            <?php

                if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {

                    $custom_logo_id = get_theme_mod('custom_logo');

                    if ( $custom_logo_id ) {

                        $custom_logo_attr = array('class' => 'custom-logo', 'itemprop' => 'logo');

                        $image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', true);

                        if (vazio($imagem_alt)){

                            $custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );

                        }

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',

                            esc_url($link),

                            wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr )

                        );

                    }

                    elseif ( is_customize_preview() ) {

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>' , esc_url($link));

                    }

                    $html = is_front_page() ? '<h1 class="logo">' . $logo. '</h1>' : $logo;

                } elseif ( function_exists( 'jetpack_has_site_logo' ) && jetpack_has_site_logo() ) {

                    $logo = site_logo()->logo;

                    $logo_id = get_theme_mod('custom_logo');

                    $logo_id = $logo_id ? $logo_id : $logo['id'];

                    $size = site_logo()->theme_size();

                    $html = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',

                        esc_url($link),

                        wp_get_attachment_image( $logo_id, $size, false, array(

                            'class' => 'anexo do logotipo do site-' . $tamanho,

                            'tamanho dos dados' => $tamanho,

                            'itemprop' => 'logo'

                        ) )

                    );

                    $html = apply_filters( 'jetpack_the_site_logo', $html, $logo, $size);

                } senão {

                    $tag = is_front_page() ? 'h1': 'div';




                    $html = '<'. esc_attr($tag) . ' class="beta site-title"><a href="' . esc_url( $link ) . '" rel="home">' . esc_html(get_bloginfo('nome')) . '</a></' . esc_attr( $tag) .'>';




                    if ( '' !== get_bloginfo( 'descrição' ) ) {

                        $html .= '<p class="site-description">' . esc_html( get_bloginfo( 'descrição', 'exibir') ) . '</p>';

                    }

                }

                echo $html;

            ?>

        </div>

        <?php

    }

}

O link personalizado vai na linha 7 '( '/my-custom-link/' );' , onde você adicionará seu link personalizado substituindo-o por “ my-custom-link ”.

3. Remova completamente as categorias da página inicial da loja

Você pode querer remover completamente as categorias na página inicial. Este recurso simplesmente remove as categorias. Tudo o que você precisa fazer é adicionar as seguintes linhas ao arquivo functions.php:

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_product_categories', 20 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Aqui está o resultado:

4. Remova os produtos recentes da página inicial da sua loja

Imediatamente após adicionar um novo produto, ele é adicionado à seção ' Novo em ' na página inicial. Esta é uma configuração padrão no tema Storefront. No entanto, se você adicionar produtos constantemente à sua lista, eles podem sobrecarregar a página da loja. Além disso, você também pode exibir informações adicionais nesta seção.

Para remover esta seção, basta adicionar o seguinte código ao arquivo function.php do tema filho.

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_recent_products', 30 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Aqui está o resultado:

5. Remova os produtos mais vendidos da página inicial da loja

Para alguns lojistas, os produtos mais vendidos podem não ser um recurso desejável. Para remover a seção mais vendida, basta adicionar o seguinte código ao arquivo function.php do tema filho.

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_best_selling_products', 70 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Aqui está o resultado:

6. Remova os produtos em destaque

Da mesma forma, os lojistas podem querer desabilitar a seção de produtos em destaque. Isso pode ser feito adicionando o seguinte trecho de código ao arquivo functions.php do tema filho:

 function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_featured_products', 40 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Aqui está o resultado:

7. Como alterar a cor das linhas horizontais na página inicial da vitrine

Basta adicionar o seguinte código ao arquivo custom.css do seu tema filho:

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

cor da borda: vermelho;

}

8. Adicionando imagem de fundo à vitrine de uma seção de página inicial específica

O tema Storefront padrão tem seis seções, ou seja, categorias de produtos, produtos recentes, produtos em destaque, produtos populares, produtos em promoção e produtos mais vendidos. Basta adicionar o seguinte código ao arquivo style.css :

 .produtos em destaque na loja{

background-image: url(Adicione sua URL aqui);

posição de fundo: centro central;

repetição de fundo: sem repetição;

tamanho do fundo: capa;

-o-background-size: capa;

}

Aqui está o resultado:

9. Adicionando cor de fundo às seções da página inicial da vitrine

Você pode querer adicionar uma cor de fundo a uma seção da página inicial. Para fazer isso, você precisa primeiro identificar a seção que deseja adicionar cor. Isso pode ser feito facilmente adicionando o seguinte código ao arquivo style.css :

 .produtos em destaque na loja{

cor de fundo:#FFEB3B;

}

Aqui está o resultado:

10. Como remover ou ocultar o título da seção da página inicial

Para fazer isso, você precisa primeiro identificar a seção que deseja remover ou ocultar. Isso pode ser feito adicionando o seguinte código ao arquivo style.css :

 .storefront-recent-products .section-title {display:none;}

.storefront-product-categories .section-title {display:none;}

.storefront-featured-products .section-title {display:none;}

.storefront-popular-products .section-title {display:none;}

.storefront-on-sale-products .section-title {display:none;}

.storefront-best-selling-products .section-title {display:none;}

Aqui está o resultado:

11. Como alterar o título da seção da página inicial

Para fazer isso, você precisa primeiro identificar a seção que deseja remover o título. Esta lista ajudará você a identificar os filtros da seção da página inicial da vitrine:

• storefront_product_categories_args
• storefront_recent_products_args
• storefront_featured_products_args
• storefront_popular_products_args
• storefront_on_sale_products_args
• storefront_best_selling_products_args

Basta adicionar o seguinte código no arquivo function.php do tema filho:

 add_filter( 'storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Título dos produtos em destaque na primeira página

function custom_storefront_product_featured_title( $args ) {

$args['title'] = __( 'Novo título de produtos em destaque aqui', 'storefront' );

retorna $args;

}

Aqui está o resultado:

12. Como aumentar a grade/coluna da coluna do produto da seção da página inicial

Basta adicionar as seguintes linhas de código ao arquivo function.php do tema filho.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );




// Coluna de produtos em destaque

function custom_storefront_featured_product_per_row( $args ) {

$args['colunas'] = 2;

retorna $args;

}

Aqui está o resultado:

13. Como exibir mais categorias na página inicial

Basta adicionar as seguintes linhas de código ao arquivo function.php do tema filho.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// Categoria Produtos

function custom_storefront_category_per_page( $args) {

$args['número'] = 4;

retorna $args;

}

Aqui está o resultado:

14. Como adicionar uma descrição abaixo do título da seção da página inicial

Simplesmente adicione este código ao arquivo function.php do tema filho:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');




function custom_storefront_product_featured_description(){ ?>

<p class="element-title--sub">

<?php echo "Descrição da seção aqui";?>

</p>

<?php}

Aqui está o resultado:

15. Como remover a seção de produtos com melhor classificação da página inicial da Storefront

Existem duas maneiras de fazer isso. Um é instalar o plugin que o ajudará a remover esta seção. Você pode dar uma olhada no plugin Homepage Control . Vamos ver a maneira mais fácil de fazer isso por meio de código.

No entanto, você pode simplesmente remover a seção usando ganchos. Isso é feito simplesmente adicionando a seguinte linha ao arquivo function.php do tema filho:

remove_action( 'homepage', 'storefront_popular_products', 50 );

Além disso, você pode removê-lo adicionando o seguinte código no arquivo style.css ou na seção CSS adicional :

.storefront-popular-products .section-title {display:none;}

Aqui está o resultado:

16. Como alterar o título da seção de produtos com melhor classificação

Simplesmente adicione este código ao arquivo function.php do tema filho:

 add_filter( 'storefront_popular_products_args', 'custom_storefront_product_popular_title');

// Título dos produtos em destaque na primeira página

function custom_storefront_product_popular_title( $args) {

$args['title'] = __( 'Principais produtos', 'vitrine' );

retorna $args;

}

Aqui está o resultado:

17. Como exibir mais produtos na seção mais bem avaliada

O padrão para Storefront exibe 4 produtos na seção Mais votados. Neste exemplo, aumentaremos para 12 produtos. Simplesmente adicione este código ao arquivo function.php do tema filho:

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page' );




// Produtos em destaque por página

function custom_storefront_top_product_per_page( $args ) {

$args['per_page'] = 12;

retorna $args;

}

Aqui está o resultado:

18. Como remover a seção de produtos à venda da página inicial da vitrine

Existem duas maneiras de fazer isso. Uma delas é instalar um plugin que o ajudará a remover esta seção. Você pode dar uma olhada no plugin Homepage Control . Para este exemplo, vou usar uma linha de código.

Você pode simplesmente remover a seção usando ganchos. Isso é feito simplesmente adicionando a seguinte linha ao arquivo function.php do tema filho:

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

Aqui está o resultado:

19. Referências de ganchos de ação de personalização da página inicial do tema da vitrine

Essas são todas as funções add_action() disponíveis usadas no tema Storefront. Ele anexa uma função a um gancho conforme definido por do_action

Cabeçalho

• Pagina inicial
• storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

Categorias de Produtos

• storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
• storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
• storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

Produtos recentes

• storefront_homepage_before_recent_products – Executed before the <section class="storefront-recent-products"> homepage section
• storefront_homepage_after_recent_products_title – Executed after the <h2 class="section-title"> recent products section title
• storefront_homepage_after_recent_products – Executed after the <section class="storefront-recent-products"> homepage section

Produtos em destaque

• storefront_homepage_before_featured_products – Executed before the <section class="storefront-featured-products"> homepage section
• storefront_homepage_after_featured_products_title – Executed after the <h2 class="section-title"> featured products section title
• storefront_homepage_after_featured_products – Executed after the <section class="storefront-featured-products"> homepage section

Produtos populares

• storefront_homepage_before_popular_products – Executed before the <section class="storefront-popular-products"> homepage section
• storefront_homepage_after_popular_products_title – Executed after the <h2 class="section-title"> popular products section title
• storefront_homepage_after_popular_products – Executed after the <section class="storefront-popular-products"> homepage section

Produtos à venda

• storefront_homepage_before_on_sale_products – Executed before the <section class="storefront-on-sale-products"> homepage section
• storefront_homepage_after_on_sale_products_title – Executed after the <h2 class="section-title"> on-sale products section title
• storefront_homepage_after_on_sale_products – Executed after the <section class="storefront-on-sale-products"> homepage section

Produtos mais vendidos

• storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
• storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
• storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

Funções da vitrine

Arquivo: /inc/storefront-functions.php

• storefront_header_styles – filter the header styles
• storefront_homepage_content_styles – filter the homepage content styles
• Aulas de vitrine

Conclusão

Neste artigo, destaquei 18 ideias diferentes de personalização da página inicial do tema Storefront que você pode fazer para a página inicial do tema WooCommerce Storefront. Essas personalizações foram testadas e funcionam conforme mostrado nas capturas de tela.

Se você é iniciante no WordPress e não sabe onde encontrar o arquivo functions.php, basta seguir estes passos simples:

1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
2. No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema onde adicionaremos a função.

É tão simples quanto isso. Neste artigo sobre a personalização da página inicial do tema Storefront, você pode ver como o tema da vitrine é flexível e pode usar filtros e ganchos para fazer a personalização desejada. Para estilos adicionais, você pode usar a seção CSS Adicional ou o arquivo style.css onde você inserirá o código CSS.

Artigos semelhantes

1. Mais de 80 truques para personalizar o tema WooCommerce da vitrine: o guia definitivo de personalização do tema da vitrine
2. Como ocultar um produto no WooCommerce ou ocultar produtos por categoria ou funções
3. Como obter o nome da categoria de produto atual no WooCommerce
4. Como definir produtos em destaque no WooCommerce
5. Como ocultar todos os produtos da página da loja no WooCommerce
6. Como contar itens adicionados ao carrinho Código de contagem de carrinho WooCommerce
7. Como ocultar produtos sem preço no WooCommerce
8. Como ocultar o produto WooCommerce dos resultados da pesquisa
9. Como usar os atributos do produto WooCommerce passo a passo [Guia Completo]
10. Como criar paginação numérica no WordPress sem usar plugin