Come aggiungere il pulsante Aggiungi al carrello personalizzato in WooCommerce

Pubblicato: 2021-04-22

Aggiungi il pulsante Aggiungi al carrello personalizzato in WooCommerce Stai cercando un modo per aggiungere un pulsante Aggiungi al carrello personalizzato in qualsiasi pagina? Il pulsante Aggiungi al carrello è molto importante in qualsiasi negozio online. Quando un cliente fa clic su questo pulsante, il prodotto viene aggiunto al carrello.

Porta direttamente alle vendite e ai ricavi.

Pertanto, se vuoi creare una pagina che includa i prodotti in vendita, è importante aggiungere un pulsante Aggiungi al carrello personalizzato.

È importante notare che WooCommerce ti offre molte opzioni di personalizzazione disponibili a diversi livelli, come WordPress.

Come aggiungere il pulsante Aggiungi al carrello personalizzato in WooCommerce

In questo post, personalizzeremo il pulsante Aggiungi al carrello e lo aggiungeremo a qualsiasi pagina del modello. Vale la pena ricordare che hai bisogno di alcune abilità di programmazione prima di procedere.

Tuttavia, se non ti senti a tuo agio con la gestione del codice, continua a leggere perché abbiamo fatto del nostro meglio per spiegare ogni passaggio.

Diamo un'occhiata a come puoi raggiungere questo obiettivo:

Passaggi per aggiungere il pulsante Aggiungi al carrello personalizzato in WooCommerce

Prima di iniziare, ecco lo snippet di codice che aggiungerà il pulsante a qualsiasi pagina del modello.

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

Come funziona

Questo codice è molto facile da capire.

Il 'post_type' => 'product' è il tipo di post personalizzato predefinito di WooCommerce.

'posts_per_page' => 12 imposta il numero massimo di post che possono essere visualizzati su una pagina.
apply_filters( 'woocommerce_short_description', $post->post_excerpt ) mostra l'URL della pagina del carrello e gli articoli nel carrello
esc_attr( $product->get_id() ) ottiene l'ID prodotto
esc_attr( $product->get_sku() ) ottiene lo SKU per il prodotto

Ecco i passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina dell'editor del tema, cerca il file delle funzioni del tema in cui aggiungeremo la funzione che aggiungerà un pulsante personalizzato aggiungi al carrello.
Aggiungi il seguente codice al file 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');

}

Questo è il risultato:

Conclusione

A questo punto, dovresti essere in grado di aggiungere un pulsante personalizzato per aggiungere al carrello. Un pulsante personalizzato è importante perché aggiunge valore all'esperienza dell'utente.

Poiché stiamo modificando la pagina utilizzando un codice personalizzato, ti consigliamo di creare un tema figlio. Ciò garantirà che le modifiche non vadano perse durante un aggiornamento.

Come aggiungere il pulsante Aggiungi al carrello personalizzato in WooCommerce

Come aggiungere il pulsante Aggiungi al carrello personalizzato in WooCommerce

Passaggi per aggiungere il pulsante Aggiungi al carrello personalizzato in WooCommerce

Come funziona

Conclusione

Articoli simili