Buy button. call icon. quantity

hello there please can help me to show buy button bellow every product and collapse the large of a quantity of product option on mobile phone
thanks

Firstly edit the inc/woocommerce.php file of Leto theme. Find this code block:

/**
 * Pricing and modal opener on loop products
 */
function leto_loop_pricing_button() {
	echo '<div class="product-price-button">';
	echo 	'<span class="product-price">';
			woocommerce_template_loop_price();
	echo 	'</span>';
	echo 	'<div class="product-button">';
	echo 		'<a href="#modal-quickview" class="product-quickview">' . esc_html__( 'Show more', 'leto' ) . '</a>';
	echo 	'</div>';
	echo '</div>';

	$hide_modal = get_theme_mod( 'leto_disable_quickview' );
	if ( !$hide_modal ) {
		get_template_part( 'template-parts/woocommerce', 'modal' );
	}
}

and replace it with:

/**
 * Pricing and modal opener on loop products
 */
function leto_loop_pricing_button() {
	global $product;
	
	echo '<div class="product-price-button">';
	echo 	'<span class="product-price">';
			woocommerce_template_loop_price();
	echo 	'</span>';
	echo 	'<div class="product-button">';
	echo 		'<a href="#modal-quickview" class="product-quickview">' . esc_html__( 'Show more', 'leto' ) . '</a>';
	echo 	'</div>';

	echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
		sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
			esc_url( $product->add_to_cart_url() ),
			esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
			esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
			isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
			esc_html( $product->add_to_cart_text() )
		),
	$product, $args );

	echo '</div>';

	$hide_modal = get_theme_mod( 'leto_disable_quickview' );
	if ( !$hide_modal ) {
		get_template_part( 'template-parts/woocommerce', 'modal' );
	}
}

Apply the changes on your site.

Then go to Appearance menu > Customize. Go to Leto: WooCommerce section > Product Archives > activate the checkbox that reads “Disable quickview links?”.

Add this simple CSS code to Appearance > Customize > Additional CSS from dashboard.

.cart .quantity {
   width: 100%;
}

Regards,
Kharis

but the show more button still show how i can hide it on mobile and pc too?
and buy button doesn’t show on mobile

Hello there,

Please provide us a link to your website, so I can check and maybe we could use CSS code solution.

Regards,
Kharis

ilbottega

and see the cart quantity on mobile it’s very long and the empty distance on footer and how to make widget on a straight line

Hello there,

Sorry for belated reply. If you still need help with it, try adding this extra CSS code:

    @media only screen and (max-width: 509px) {
      .woocommerce div.product form.cart div.quantity {
        max-width: 48%;
      }
      .site-footer {
        padding-bottom: 0;
      }
      .site-info {
        margin-bottom: 2em;
      }
    }

Regards,
Kharis