[Resolved] Align Quantity and Add to Cart Buttons on Single Product Page

[Ying]

Are you using this function?

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>';
}

If so, you can try using two hook elements instead, so that you can set the location to product.

1. Go to appearance > elements, and create a new hook element.

2. Add this to the content area:
for hook 1: <button type="button" class="plus">+</button>
for hook 2: <button type=”button” class=”minus”>-</button>

3. Choose custom hook, enter:
for hook 1: woocommerce_after_quantity_input_field.
for hook 2: woocommerce_before_quantity_input_field

4. Choose products > all products as the location.

[GeneratePressUser]

Hello Ying,

OK, I have disabled those functions script and added the 2 hooks, now I guess I need to add this script:

add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
  
function 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();
            }
         }
 
      });
        
   " );
}

Right?

[Ying]

Yes, correct.

[GeneratePressUser]

Seems the minus button is not working.
Btw I would like to also tell 1 conflict which your theme settings have with elementor, see the private box.

[Fernando]

Hello there,

Can you try this for minus:

<button type="button" class="minus">-</button>

As for the conflict, to clarify, do you have Display Quantity buttons turned off in Appearance > Customize > Layout > WooCommerce > Single Product as such: https://share.getcloudapp.com/llu09oje when you turn on Show Quantity in Elementor?

Kindly let us know.

[GeneratePressUser]

Hello Fernando,

That’s the same what Ying gave and I am already using that for minus.

[Ying]

If you are going to use Elementor’s custom add-to cart, it’s better not to load GP’s style at the same time.

Otherwise to have style conflicts is inevitable.

[GeneratePressUser]

Hey Ying,

Got it, so if we use that the cart page buttons will also go away coz they don’t come from elementor and they come from generatepress.

So, if we keep using the current normal woocommerce add to cart widget in elementor instead of custom add to cart then the buttons are not there on single product page, but on using custom add to cart widget button comes can u pls tell why is generatepress not showing buttons on using the normal woocommerce widget of elementor? coz we suppose that is loading from default woocommerce maybe we are not sure.

If we don’t use that and want to disable generatepress buttons totally and just add the buttons manually then we are able to add them on single product but can’t see it on cart page, any idea how that can be done?

The code which u told me to put in elements didn’t work for minus button, on clicking it nothing used to happen.

[Ying]

So, if we keep using the current normal woocommerce add to cart widget in elementor instead of custom add to cart then the buttons are not there on single product page, but on using custom add to cart widget button comes can u pls tell why is generatepress not showing buttons on using the normal woocommerce widget of elementor? coz we suppose that is loading from default woocommerce maybe we are not sure.

I have to see the live site with error to be able to tell.

And can we focus on one question at a time? I am kind of lost in this topic.

I’ve got confused about what you were originally trying to achieve…

[GeneratePressUser]

Hey Ying,

Ok, so right now we have disabled Generate Press buttons and have used the businessbloomer script:

https://www.businessbloomer.com/woocommerce-add-plus-minus-buttons-to-add-to-cart-quantity-input/

So, it works perfectly on single product page (see the private box)

[Ying]

Am I missing something?

The messed up doesn’t show on my end:
[screenshots removed]

[GeneratePressUser]

Hey Ying,

Ok, so do u want me to keep using the businessbloomer script or just enable the elements method which u told me to add those plus and minus buttons?

[GeneratePressUser]

I just checked it using safari browser and its showing properly there, but on brave browser its not showing proper weird.

which browser are u using?

[Ying]

I’m using Chrome. It seems when the screen gets narrower, the issue shows.

Try this CSS:

.woocommerce-cart td.product-quantity .quantity {
    display: flex;
}
@media (max-width: 768px) {
.woocommerce-cart td.product-quantity .quantity {
    justify-content: flex-end;
}
}

[GeneratePressUser]

Hey Ying,

That’s perfect, so do u recommend keep using the businessbloomer code? or should we achieve this using elements hook which you had shared?

Let me know if you want me to disable this and enable the elements so that you will be able to even see the error which happens on clicking Minus button.

[Author]

Posts