Cum să adăugați un buton personalizat de adăugare în coș în WooCommerce
Publicat: 2021-04-22
Căutați o modalitate de a adăuga un buton personalizat de adăugare în coș pe orice pagină? Butonul de adăugare în coș este foarte important în orice magazin online. Când un client face clic pe acest buton, produsul este adăugat în coș.
Aceasta duce direct la vânzări și venituri.
Prin urmare, dacă doriți să creați o pagină care să includă produse de vânzare, este important să adăugați un buton personalizat Adaugă în coș.
Este important să rețineți că WooCommerce vă oferă multe opțiuni de personalizare disponibile la diferite niveluri, cum ar fi WordPress.
Cum să adăugați un buton personalizat de adăugare în coș în WooCommerce
În această postare, vom personaliza butonul Adaugă în coș și îl vom adăuga la orice pagină șablon. Este demn de menționat că aveți nevoie de niște abilități de codare înainte de a continua.
Cu toate acestea, dacă nu vă simțiți confortabil cu gestionarea codului, citiți mai departe, deoarece am încercat tot posibilul să explicăm fiecare pas.
Haideți să vedem cum puteți realiza acest lucru:
Pași pentru a adăuga un buton personalizat de adăugare în coș în WooCommerce
Înainte de a începe, iată fragmentul de cod care va adăuga butonul la orice pagină șablon.
<?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();
Cum functioneaza
Acest cod este foarte ușor de înțeles.
„post_type” => „produsul” este tipul de postare personalizat WooCommerce implicit.
- 'posts_per_page' => 12 stabilește numărul maxim de postări care pot fi afișate pe o pagină.
- apply_filters( 'woocommerce_short_description', $post->post_excerpt ) afișează adresa URL a paginii coșului de cumpărături și articolele din coș
- esc_attr( $product->get_id() ) primește ID-ul produsului
- esc_attr( $product->get_sku() ) primește SKU-ul produsului
Iată pașii pe care trebuie să-i urmezi:
- Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
- Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va adăuga un buton personalizat de adăugare în coș.
- Adăugați următorul cod în fișierul 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');
}
- Acesta este rezultatul:
Concluzie
Până acum, ar trebui să puteți adăuga un buton personalizat de adăugare în coș. Un buton personalizat este important pentru că adaugă valoare experienței utilizatorului.
Deoarece edităm pagina folosind cod personalizat, vă recomandăm să creați o temă copil. Acest lucru vă va asigura că modificările dvs. nu sunt pierdute în timpul unei actualizări.
Articole similare
- Peste 100 de sfaturi, trucuri și fragmente Ghid de ascundere final pentru WooCommerce
- Redirecționare WooCommerce după deconectare [Ghid final]
- Redirecționare WooCommerce după finalizare: Redirecționare către pagina personalizată de mulțumire
- Cum să adăugați căutare în pagina de magazin în WooCommerce
- Cum să ascundeți imaginea produsului pe pagina coșului WooCommerce
- Cum să trimiți e-mail la schimbarea stării în WooCommerce
- Cum să adăugați câmpuri în formularul de înregistrare WooCommerce
- Cum să ascunzi magazinul în WooCommerce
- Cum să obțineți numele curent al categoriei de produse în WooCommerce
- Top 30+ cele mai bune pluginuri pentru formulare WordPress » Cel mai bun plugin pentru formulare pentru WordPress
- Cum se schimbă punctele finale de checkout WooCommerce
- Cum să păstrați fila Descriere WooCommerce deschisă în mod implicit
- Cum se creează o pagină de categorie personalizată în WooCommerce
- Cum să ștergeți coșul la deconectare în WooCommerce
- Cum să personalizați paginile produselor WooCommerce
- Cum să adăugați monedă la WooCommerce [Monedă personalizată]
- Cum să verificați dacă utilizatorul este autentificat în WordPress
- Cum se creează o pagină personalizată de comandă primită WooCommerce
- Cum să adăugați un produs în coș în mod programatic în WooCommerce
- Peste 5 moduri utile de a limita lungimea extrasului WordPress ca un profesionist