Jak dodać niestandardowy przycisk Dodaj do koszyka w WooCommerce?
Opublikowany: 2021-04-22
Szukasz sposobu na dodanie niestandardowego przycisku do koszyka na dowolnej stronie? Przycisk Dodaj do koszyka jest bardzo ważny w każdym sklepie internetowym. Gdy klient kliknie ten przycisk, produkt zostanie dodany do koszyka.
Prowadzi to bezpośrednio do sprzedaży i przychodów.
Dlatego, jeśli chcesz stworzyć stronę, która będzie zawierała produkty na sprzedaż, ważne jest dodanie niestandardowego przycisku Dodaj do koszyka.
Należy zauważyć, że WooCommerce zapewnia wiele opcji dostosowywania dostępnych na różnych poziomach, takich jak WordPress.
Jak dodać niestandardowy przycisk Dodaj do koszyka w WooCommerce?
W tym poście dostosujemy przycisk Dodaj do koszyka i dodamy go do dowolnej strony szablonu. Warto wspomnieć, że zanim przejdziesz dalej, potrzebujesz umiejętności kodowania.
Jeśli jednak nie czujesz się komfortowo z obsługą kodu, czytaj dalej, ponieważ staraliśmy się jak najlepiej wyjaśnić każdy krok.
Zobaczmy, jak możesz to osiągnąć:
Kroki, aby dodać niestandardowy przycisk Dodaj do koszyka w WooCommerce
Zanim zaczniemy, oto fragment kodu, który doda przycisk do dowolnej strony szablonu.
<?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();
Jak to działa
Ten kod jest bardzo łatwy do zrozumienia.
„post_type” => „produkt” jest domyślnym niestandardowym typem postu WooCommerce.
- 'posts_per_page' => 12 ustawia maksymalną liczbę postów, które mogą być wyświetlane na stronie.
- apply_filters( 'woocommerce_short_description', $post->post_excerpt ) wyświetla adres URL strony koszyka i elementy w koszyku
- esc_attr( $product->get_id() ) pobiera identyfikator produktu
- esc_attr( $product->get_sku() ) pobiera SKU produktu
Oto kroki, które musisz wykonać:
- Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
- Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję, która doda niestandardowy przycisk dodawania do koszyka.
- Dodaj następujący kod do pliku 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');
}
- Oto wynik:
Wniosek
Do tej pory powinieneś być w stanie dodać niestandardowy przycisk do koszyka. Niestandardowy przycisk jest ważny, ponieważ zwiększa wygodę użytkownika.
Ponieważ edytujemy stronę za pomocą niestandardowego kodu, zalecamy utworzenie motywu podrzędnego. Zapewni to, że zmiany nie zostaną utracone podczas aktualizacji.
Podobne artykuły
- Ponad 100 porad, sztuczek i fragmentów Kompletny przewodnik po ukryciu WooCommerce
- Przekierowanie WooCommerce po wylogowaniu [Najlepszy przewodnik]
- Przekierowanie WooCommerce po realizacji transakcji: Przekierowanie na niestandardową stronę z podziękowaniami
- Jak dodać wyszukiwanie do strony sklepu w WooCommerce?
- Jak ukryć obraz produktu na stronie koszyka WooCommerce
- Jak wysłać e-mail o zmianie statusu w WooCommerce?
- Jak dodać pola w formularzu rejestracyjnym WooCommerce?
- Jak ukryć sklep w WooCommerce
- Jak uzyskać aktualną nazwę kategorii produktu w WooCommerce?
- Top 30+ najlepszych wtyczek do formularzy WordPress » Najlepsza wtyczka do formularzy WordPress
- Jak zmienić punkty końcowe kasy WooCommerce
- Jak zachować domyślnie otwartą kartę opisu WooCommerce?
- Jak stworzyć niestandardową stronę kategorii w WooCommerce?
- Jak wyczyścić koszyk przy wylogowaniu w WooCommerce
- Jak dostosować strony produktów WooCommerce?
- Jak dodać walutę do WooCommerce [Waluta niestandardowa]
- Jak sprawdzić, czy użytkownik jest zalogowany w WordPress
- Jak utworzyć stronę otrzymanych zamówień niestandardowych WooCommerce
- Jak programowo dodać produkt do koszyka w WooCommerce?
- 5+ przydatnych sposobów na ograniczenie długości fragmentów WordPress jak profesjonalista