Cómo agregar un botón personalizado Agregar al carrito en WooCommerce

Publicado: 2021-04-22

Agregar botón personalizado Agregar al carrito en WooCommerce ¿Está buscando una manera de agregar un botón personalizado para agregar al carrito en cualquier página? El botón Agregar al carrito es muy importante en cualquier tienda en línea. Cuando un cliente hace clic en este botón, el producto se agrega al carrito.

Conduce directamente a las ventas y los ingresos.

Por lo tanto, si desea crear una página que incluya productos a la venta, es importante agregar un botón personalizado Agregar al carrito.

Es importante tener en cuenta que WooCommerce le brinda muchas opciones de personalización disponibles en diferentes niveles, como WordPress.

Cómo agregar un botón personalizado Agregar al carrito en WooCommerce

En esta publicación, personalizaremos el botón Agregar al carrito y lo agregaremos a cualquier página de plantilla. Vale la pena mencionar que necesita algunas habilidades de codificación antes de continuar.

Sin embargo, si no se siente cómodo con el manejo del código, siga leyendo, ya que hemos hecho todo lo posible para explicar cada paso.

Veamos cómo puedes lograr esto:

Pasos para agregar un botón Agregar al carrito personalizado en WooCommerce

Antes de comenzar, aquí está el fragmento de código que agregará el botón a cualquier página de plantilla.

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

Cómo funciona

Este código es muy fácil de entender.

El 'post_type' => 'producto' es el tipo de publicación personalizado predeterminado de WooCommerce.

'posts_per_page' => 12 establece el número máximo de publicaciones que se pueden mostrar en una página.
apply_filters( 'woocommerce_short_description', $post->post_excerpt ) muestra la URL de la página del carrito y los artículos en el carrito
esc_attr( $producto->get_id() ) obtiene el ID del producto
esc_attr( $producto->get_sku() ) obtiene el SKU del producto

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que agregará un botón personalizado para agregar al carrito.
Agregue el siguiente código al archivo 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 es el resultado:

Conclusión

A estas alturas, debería poder agregar un botón personalizado para agregar al carrito. Un botón personalizado es importante porque agrega valor a la experiencia del usuario.

Dado que estamos editando la página usando un código personalizado, recomendamos crear un tema secundario. Esto asegurará que sus cambios no se pierdan durante una actualización.

Cómo agregar un botón personalizado Agregar al carrito en WooCommerce

Cómo agregar un botón personalizado Agregar al carrito en WooCommerce

Pasos para agregar un botón Agregar al carrito personalizado en WooCommerce

Cómo funciona

Conclusión

Artículos similares