Como adicionar o botão Adicionar ao carrinho personalizado no WooCommerce
Publicados: 2021-04-22
Você está procurando uma maneira de adicionar um botão personalizado para adicionar ao carrinho em qualquer página? O botão Adicionar ao carrinho é muito importante em qualquer loja online. Quando um cliente clica neste botão, o produto é adicionado ao carrinho.
Isso leva diretamente a vendas e receitas.
Portanto, se você deseja criar uma página que inclua produtos à venda, é importante adicionar um botão personalizado Adicionar ao carrinho.
É importante observar que o WooCommerce oferece muitas opções de personalização disponíveis em diferentes níveis, como o WordPress.
Como adicionar o botão Adicionar ao carrinho personalizado no WooCommerce
Neste post, vamos personalizar o botão Adicionar ao carrinho e adicioná-lo a qualquer página de modelo. Vale ressaltar que você precisa de algumas habilidades de codificação antes de prosseguir.
No entanto, se você não estiver confortável com o manuseio de código, continue lendo, pois tentamos o nosso melhor para explicar cada etapa.
Vejamos como você pode conseguir isso:
Etapas para adicionar o botão Adicionar ao carrinho personalizado no WooCommerce
Antes de começarmos, aqui está o snippet de código que adicionará o botão a qualquer página de modelo.
<?php
/* Template Name: Customize Add To Cart*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<ul class="products">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 12,
);
$loop = new WP_Query( $args );
if ($loop->have_posts()) {
while ($loop->have_posts()) : $loop->the_post();
?>
<div id="product-image1">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<?php echo $product->get_image(); ?>
</a>
</div>
<div id="product-description-container">
<ul>
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<li><h4><?php echo $product->get_title(); ?></h4></li>
</a>
<li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
<li><h2><?php echo $product->get_price_html(); ?> </h2></li>
<?php
echo apply_filters(
'woocommerce_loop_add_to_cart_link',
sprintf(
'<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product
);?>
</ul>
</div> <?php endwhile;
} else {
echo __( ' o products found' );
}
wp_reset_postdata();
?>
</ul>
<!--/.products--> </main>
<!-- #main -->
</div><!-- #primary --> <?php
do_action( 'storefront_sidebar' );
get_footer();
Como funciona
Este código é muito fácil de entender.
O 'post_type' => 'product' é o tipo de postagem personalizada padrão do WooCommerce.
- 'posts_per_page' => 12 define o número máximo de postagens que podem ser exibidas em uma página.
- apply_filters( 'woocommerce_short_description', $post->post_excerpt ) exibe o URL da página do carrinho e os itens no carrinho
- esc_attr( $product->get_id() ) obtém o ID do produto
- esc_attr( $product->get_sku() ) obtém o SKU para o produto
Aqui estão os passos que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- 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 que adicionará um botão personalizado para adicionar ao carrinho.
- Adicione o seguinte código ao arquivo php :
add_filter('woocommerce_product_single_add_to_cart_text','njengah_add_to_cart_button_woocommerce');
function njengah_add_to_cart_button_woocommerce() {
return __('Custom add to cart button code', 'woocommerce');
}
- Este é o resultado:
Conclusão
Até agora, você deve conseguir adicionar um botão personalizado para adicionar ao carrinho. Um botão personalizado é importante porque agrega valor à experiência do usuário.
Como estamos editando a página usando código personalizado, recomendamos a criação de um tema filho. Isso garantirá que suas alterações não sejam perdidas durante uma atualização.
Artigos semelhantes
- Mais de 100 dicas, truques e trechos Ultimate WooCommerce Hide Guide
- Redirecionamento do WooCommerce após o logout [Guia definitivo]
- Redirecionamento do WooCommerce após o checkout: Redirecionar para a página de agradecimento personalizada
- Como adicionar pesquisa à página de compras no WooCommerce
- Como ocultar a imagem do produto na página do carrinho WooCommerce
- Como enviar e-mail na mudança de status no WooCommerce
- Como adicionar campos no formulário de registro WooCommerce
- Como ocultar a loja no WooCommerce
- Como obter o nome da categoria de produto atual no WooCommerce
- Os 30 melhores plug-ins de formulário do WordPress » Melhor plug-in de formulário do WordPress
- Como alterar os endpoints de checkout WooCommerce
- Como manter a guia de descrição do WooCommerce aberta por padrão
- Como criar uma página de categoria personalizada no WooCommerce
- Como limpar o carrinho ao sair no WooCommerce
- Como personalizar páginas de produtos WooCommerce
- Como adicionar moeda ao WooCommerce [moeda personalizada]
- Como verificar se o usuário está logado no WordPress
- Como criar uma página personalizada de pedidos recebidos WooCommerce
- Como adicionar produtos ao carrinho programaticamente no WooCommerce
- 5+ Maneiras úteis de limitar o comprimento do trecho do WordPress como um profissional