WooCommerce: Display Reg & Sale Price with Quantity Option before Button

Question

My objective is to be able to have Quantity selection placed in front of the Buy Buttons which are not downloadable. For physical products I want to allow the purchase of more than one item.

ALSO, I want to be able to do this for Product AND Post pages/posts. I've created each Product but only want one page (using either a Page or Product page) offering: 1) the physical album with quantity choice, 2) the digital album allowing the ordering of only one, and 3) Track purchases which is available in the Audio Player which is not on this page yet.

I am not fluent in javascript, ajax or functions and loops.

Below is what I've put together so far...

This is a physical CD and one should be able to order more than one, unlike the digital formats... I would like to have the QUANTITY option display after the Prices.

Shortcode from WooCommerce without Quantity Option:

[add_to_cart id="32"]

This is a physical CD as well. I'd like to place the regular & sale price in front of the Buy Button...

I'd like to display all on the same line; Price, Quantity selection and Buy Button should be on same line.

<div class="purchase-options">
<!-- Add Physical Album to Cart -->
<div class="add-to-cart-album"><form class="cart" enctype="multipart/form-data" method="post">
<div class="quantity"><input class="input-text qty text" title="Qty" max="94" min="1" name="quantity" pattern="[0-9]*" size="4" step="1" type="number" value="1" /></div>
<input name="add-to-cart" type="hidden" value="32" /><button class="single_add_to_cart_button button alt" type="submit">Add CD to Cart</button></form></div>

I'd like to place the regular & sale price in front of the Buy Button below...

<!-- Add Digital CD Album to Cart -->
<div class="add-to-cart-album"><form class="cart" enctype="multipart/form-data" method="post"><input name="add-to-cart" type="hidden" value="30" />
<button class="single_add_to_cart_button button alt" type="submit">Add Digital CD to Cart</button></form></div>
</div>

Another concern is that I don't want to change the standard buttons or shortcode for WooCommerce but prefer to add a button for my needs. I am not fluent in functions, loops, javascript and only hunt and peck in php.

learning2 learning2 · Accepted Answer · 2016-12-02T01:08:03

PARTIAL ANSWER - UNABLE TO FIT IN COMMENT OF ORIGINAL QUESTION ABOVE

I was able to solve part of my problem - Adding Quantity before the Add to Cart Button. Here is the Code I put into my child's theme function.php file:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );

function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $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" class="button album"><span class="north-icon-cart"></span> ' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

NOW, HOW DO I remove the </br> called in the add_to_cart_text ?????

WooCommerce: Display Reg & Sale Price with Quantity Option before Button

1 Answers