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

por | Jun 27, 2021 | Novedades | 0 Comentarios

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

Que un experto cree tu sitio web personalizado en WordPress

Podemos crear lo que necesites, ya sea un landing page, un sitio eCommerce, una web informativa o interactivo para tu negocio 100% administrable por ti.

0 comentarios

Enviar un comentario

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

Gracias por tu visita. Soy Nicolas, creador de contenidos y fundador de labananastudio.com

Ayudo a emprendedores y empresas a crear sitios web administrables.

Más publicaciones:

Pin It on Pinterest

Shares
0
× ¿Cómo puedo ayudarte?