Opción cantidad en lista de productos en Woocommerce – WordPress

por | Jun 27, 2021 | Novedades | 0 Comentarios

Por: Nicolas Castello

Asesor Web

Facilita la compra de tus productos agregando una opción de cantidad debajo de la foto del producto

En esta ocasión el cliente Mapopo ♡ Amigurumi & Crochet solicito agregar una opción en la lista de productos para que se pueda poner una cantidad de productos debajo de la foto de cada producto.

Si tienes una tienda en WordPress seguramente se ve de esta manera que es la estructura por defecto:

Pero si agregaste el código para agregar el botón de añadir al carrito debajo del producto para hacer más fácil la compra a tus clientes se vera de esta manera: Ver artículo

Si es buena idea agregar un boton de compra rápida debajo del producto es mejor aun agregar una opción de cantidad para ingresar directamente cuantos productos queremos comprar. Para que quede como en este ejemplo:

El siguiente código puedes agregarlo como parte del archivo functions.php de tu tema y quedara listo.
/* Código para agregar el campo de cantidad */

add_filter( 'woocommerce_loop_add_to_cart_link', 'dcms_add_quantity_field', 10, 2 );
function dcms_add_quantity_field($html, $product) {
    if($product&&
        $product->is_type('simple')&&
        $product->is_purchasable()&&
        $product->is_in_stock()&&
        !$product->is_sold_individually()){

        $html='<form action="'. esc_url($product->add_to_cart_url()).'" class="cart" method="post" enctype="multipart/form-data">';
        $html.= woocommerce_quantity_input(array(),$product,false);
        $html.='<button type="submit" data-quantity="1" data-product_id="'.$product->get_id().'" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple">'. esc_html($product->add_to_cart_text()).'</button>';
        $html.='</form>';
    }
    return$html;
}

//Agreamos código javascript
add_action( 'init', 'dcms_quantity_change' );
    function dcms_quantity_change() {
    wc_enqueue_js('
        (function( $ ) {
            $("form.cart").on("change", "input.qty", function() {
                $(this.form).find("[data-quantity]").attr("data-quantity", this.value);
            });
        })( jQuery );
    ');
}

Comience con lo básico

- Botón añadir al carrito en la tienda

- Opción CANTIDAD en lista de productos

- Próximamente: ¿Cómo editar el archivo functions.php en Wordpress?

posicionar mi sitio web en Google

0 comentarios

Trackbacks/Pingbacks

  1. Botón añadir al carrito en la tienda Woocommerce - Wordpress - La Banana Studio | Diseño & Marketing Digital - […] - Opción CANTIDAD en lista de productos […]

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Hola, soy Nicolás. Creador de
La Banana Studio donde comparto tips y recursos web para emprendedores.
¡Alcanza tus metas!
Más publicaciones:

Pin It on Pinterest

Shares
0
Abrir chat