So fügen Sie in WooCommerce einen benutzerdefinierten „In den Warenkorb“-Button hinzu

Veröffentlicht: 2021-04-22

Fügen Sie in WooCommerce eine benutzerdefinierte In den Warenkorb-Schaltfläche hinzu Suchen Sie nach einer Möglichkeit, auf jeder Seite eine benutzerdefinierte Schaltfläche „In den Warenkorb“ hinzuzufügen? Die Schaltfläche „In den Warenkorb“ ist in jedem Online-Shop sehr wichtig. Wenn ein Kunde auf diese Schaltfläche klickt, wird das Produkt in den Warenkorb gelegt.

Sie führt direkt zu Umsatz und Umsatz.

Wenn Sie also eine Seite erstellen möchten, die Produkte zum Verkauf enthält, ist es wichtig, eine benutzerdefinierte Schaltfläche „In den Warenkorb“ hinzuzufügen.

Es ist wichtig zu beachten, dass WooCommerce Ihnen viele Anpassungsoptionen bietet, die auf verschiedenen Ebenen verfügbar sind, wie z. B. WordPress.

So fügen Sie in WooCommerce einen benutzerdefinierten „In den Warenkorb“-Button hinzu

In diesem Beitrag werden wir die Schaltfläche „In den Warenkorb“ anpassen und sie zu jeder Vorlagenseite hinzufügen. Es ist erwähnenswert, dass Sie einige Programmierkenntnisse benötigen, bevor Sie fortfahren.

Wenn Sie jedoch mit dem Umgang mit Code nicht vertraut sind, lesen Sie weiter, da wir unser Bestes versucht haben, um jeden Schritt zu erklären.

Sehen wir uns an, wie Sie dies erreichen können:

Schritte zum Hinzufügen einer benutzerdefinierten Schaltfläche „In den Warenkorb“ in WooCommerce

Bevor wir beginnen, hier ist das Code-Snippet, das die Schaltfläche zu jeder Vorlagenseite hinzufügt.

<?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();

Wie es funktioniert

Dieser Code ist sehr einfach zu verstehen.

„post_type“ => „product“ ist der standardmäßige benutzerdefinierte WooCommerce-Beitragstyp.

'posts_per_page' => 12 legt die maximale Anzahl von Posts fest, die auf einer Seite angezeigt werden können.
apply_filters( 'woocommerce_short_description', $post->post_excerpt ) zeigt die Seiten-URL des Warenkorbs und die Artikel im Warenkorb an
esc_attr( $product->get_id() ) erhält die Produkt-ID
esc_attr( $product->get_sku() ) ruft die SKU für das Produkt ab

Hier sind die Schritte, die Sie befolgen müssen:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Wenn die Seite Theme Editor geöffnet wird, suchen Sie nach der Theme-Funktionsdatei, in der wir die Funktion hinzufügen, die eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Einkaufswagen hinzufügt.
Fügen Sie der PHP -Datei den folgenden Code hinzu:

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');

}

Das ist das Ergebnis:

Fazit

Inzwischen sollten Sie in der Lage sein, eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Einkaufswagen hinzuzufügen. Eine benutzerdefinierte Schaltfläche ist wichtig, da sie das Benutzererlebnis aufwertet.

Da wir die Seite mit benutzerdefiniertem Code bearbeiten, empfehlen wir, ein untergeordnetes Design zu erstellen. Dadurch wird sichergestellt, dass Ihre Änderungen bei einem Update nicht verloren gehen.

So fügen Sie in WooCommerce einen benutzerdefinierten „In den Warenkorb“-Button hinzu

So fügen Sie in WooCommerce einen benutzerdefinierten „In den Warenkorb“-Button hinzu

Schritte zum Hinzufügen einer benutzerdefinierten Schaltfläche „In den Warenkorb“ in WooCommerce

Wie es funktioniert

Fazit

Ähnliche Artikel