Aquí hay un fragmento rápido que puede simplemente copiar/pegar para mostrar un «+» y un «-» a cada lado del número de cantidad ingresado en la página de un solo producto de WooCommerce.
Este fragmento también viene con un script jQuery, ya que necesitamos detectar si se hace clic en más o menos y, en consecuencia, actualizar la entrada de cantidad. jQuery puede parecer difícil para muchos, pero la belleza de esto es que no necesita tener un título en jQuery, solo copie / pegue y vea cómo sucede la magia.
Fragmento de PHP: Mostrar botones de cantidad más y menos @ WooCommerce Página de producto único y página de carrito
Nota: probablemente también necesitará algún CSS personalizado, ya que su tema podría dar una visualización «flotante» a los botones de cantidad (de forma predeterminada, los botones HTML toman el bloque en línea).
/** * @snippet Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @compatible WooCommerce 5 * @donate $9 https://businessbloomer.com/bloomer-armada/ */ // -------------// 1. Show plus minus buttons add_action( 'woocommerce_after_quantity_input_field', 'bbloomer_display_quantity_plus' ); function bbloomer_display_quantity_plus() { echo '<button type="button" class="plus">+</button>';} add_action( 'woocommerce_before_quantity_input_field', 'bbloomer_display_quantity_minus' ); function bbloomer_display_quantity_minus() { echo '<button type="button" class="minus">-</button>';} // -------------// 2. Trigger update quantity script add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' ); function bbloomer_add_cart_quantity_plus_minus() { if ( ! is_product() && ! is_cart() ) return; wc_enqueue_js( " $(document).on( 'click', 'button.plus, button.minus', function() { var qty = $( this ).parent( '.quantity' ).find( '.qty' ); var val = parseFloat(qty.val()); var max = parseFloat(qty.attr( 'max' )); var min = parseFloat(qty.attr( 'min' )); var step = parseFloat(qty.attr( 'step' )); if ( $( this ).is( '.plus' ) ) { if ( max && ( max <= val ) ) { qty.val( max ).change(); } else { qty.val( val + step ).change(); } } else { if ( min && ( min >= val ) ) { qty.val( min ).change(); } else if ( val > 1 ) { qty.val( val - step ).change(); } } }); " );} |