Cómo añadir el botón personalizado "Añadir al carrito" en WooCommerce

WooCommerce s."Añadir a la cestaEl "botón facilita a los clientes la compra de artículos en su sitio de compras. Cuando un cliente hace clic en el botón "Botón "Añadir a la cestaCuando lo hacen, el artículo se añade a su cesta de la compra y entonces pueden seguir comprando o pasar directamente al proceso de pago.

Este botón simplifica el proceso de compra para los clientes, facilitándoles la tarea de añadir artículos a su cesta y completar su compra. Es posible que muchos sitios web necesiten personalizarlo para mejorar la experiencia general del usuario para los clientes.

Ventajas de personalizar el botón "Añadir al carro

Hay muchas ventajas de utilizar un botón personalizado "Añadir al carro" en WooCommerce, así que aquí están las tres principales:

1. Estética mejorada
   Los diseños personalizados de los botones pueden adaptarse al estilo de la marca y al esquema de colores para mejorar la estética general del sitio web. Esto crea un efecto visual unificado y profesional para el sitio de compras.
2. Funcionalidad mejorada
   Los botones personalizados pueden ofrecer una mayor funcionalidad, como mostrar más información sobre un artículo, como el precio, el estado de las existencias o los descuentos y promociones aplicables.
3. Aumentar la tasa de conversión
   Mejorando "Añadir a la cesta"La estética y la funcionalidad de los botones son eficaces para aumentar las conversiones, incrementando así los ingresos y la rentabilidad globales.

Mostrar el botón "Añadir a la cesta" en la plantilla

El siguiente fragmento de código muestra en cualquier página de plantilla de WooCommerce seleccionada el "Botón "Añadir a la cesta.

<?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="/es/</?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="/es/</?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();

La siguiente instantánea muestra el fragmento de código en acción.

Análisis de fragmentos de código

El fragmento de código anterior es largo, pero relativamente sencillo de entender. He aquí una breve descripción de las partes importantes del código que le ayudará a entenderlo y modificarlo según sea necesario:

• 'post_type' => 'producto': Este es el tipo de entrada personalizado por defecto de WooCommerce para mostrar productos.
• 'posts_per_page' => 12: Se trata del número máximo de productos que se mostrarán en cada página, actualmente fijado en 12, que puede modificarse en función de los requisitos del sitio web.
• apply_filters( 'woocommerce_short_description', $post->post_excerpt ): Muestra una breve descripción y una descripción detallada del producto.
• esc_url( $product->add_to_cart_url() ):: Conjuntamente con el echo funcionan conjuntamente para mostrar la URL de la página del carro de la compra y los artículos del carro, si los hay.
• esc_attr( $product->get_id() ): Obtenga el ID del producto.
• esc_attr( $product->get_sku() ): Obtiene la SKU (unidad de mantenimiento de existencias) del artículo.
• esc_html( $product->add_to_cart_text() ): Obtiene el contenido del texto del botón del carro de la compra.

Añada texto encima del botón "Añadir a la cesta

Otra mejor oportunidad de personalización es personalizar el "Botón "Añadir a la cestapara añadir una línea de texto encima del El siguiente fragmento de código añade una línea de texto encima del echo implementa esta función:

add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_woocommerce');
function custom_add_to_cart_button_woocommerce() {
return __('Código del botón personalizado de añadir al carrito de WooCommerce', 'woocommerce'); }
}

El código anterior mostrará una línea de texto encima del botón, el efecto real se muestra a continuación:

Cambiar el texto del botón "Añadir a la cesta

El último elemento de personalización es cambiar el texto que aparece en el botón. Esto se puede hacer con el siguiente fragmento de código simple:

add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_woocommerce');
function custom_add_to_cart_button_woocommerce() {
return __('Código del botón personalizado de añadir al carrito de WooCommerce', 'woocommerce'); }
}

La etiqueta del botón cambiará a custom_add_to_cart_button_woocommerce() en una función devuelva El texto especificado por la declaración.

resúmenes

Personalizar el WooCommerce "Añadir a la cesta"Los botones son una función útil que permite a los administradores personalizar el aspecto y la funcionalidad de las páginas de productos. Esto no sólo mejora la experiencia de compra del cliente, sino que también repercute positivamente en el éxito general del sitio de compras, ya que los botones desempeñan un papel importante en el proceso de compra. Si tiene alguna pregunta, puede dejarla en la sección de comentarios.

Preguntas frecuentes

P: ¿Cómo puedo personalizar el botón "Añadir al carrito" de WooCommerce?
Conteste:
Personalizar el botón Añadir al carro en WooCommerce puede hacerse de tres maneras:

1. Uso de plug-ins
2. Anulación del tema en el woocommerce/templates/single-product/add-to-cart/simple.php para personalizar el aspecto y el comportamiento de los botones.
3. hacer uso de woocommerce_single_product_summary Los ganchos como cambiar el texto o el estilo del botón, y también modificar la apariencia del botón a través de CSS.

P: ¿Cómo puedo cambiar el HTML del botón "Añadir al carrito" en WooCommerce?
Conteste:
Para cambiar el HTML del botón "Añadir a la cesta", proceda como se indica a continuación:

1. Crear unsubtemao utilice un tema existente.
2. Sobrescribir los archivos de plantilla de WooCommerce en la carpeta del tema add-to-cart.php.
3. Edite la estructura HTML de este archivo para adaptarla a sus necesidades.

P: ¿Cómo añado campos personalizados a mi cesta de la compra de WooCommerce?
Conteste:
Para añadir campos personalizados a su carrito de WooCommerce, puede utilizar la función woocommerce_after_cart_item_name Ganchos. Por ejemplo, puede añadir un cuadro de texto, un cuadro de selección o una casilla de verificación. A continuación se muestra un ejemplo de adición de un campo personalizado:

P: ¿Cómo consigo el botón "Añadir a la cesta"?
Conteste:
Para obtener el botón "Añadir al carrito" en WooCommerce, puede utilizar la función de WooCommerce woocommerce_template_single_add_to_cart(), esta función dará salida al botón en la página del producto.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres