Move product price next to stock availability in WooCommerce on Mobile devices

Question

In WooCommerce, I'd like to move the price into the Add to cart widget/module so that it is Inline with the availability text.

In this screenshot, shows the desired position of price:

There's a lot of unused real estate there when viewing on mobile, and I want to economize on it for conversion rate optimization.

Ideally the price, availability and add to cart button would be visible on the first load without needing a scroll

I'm currently running Astra theme and Elementor Pro builder

I added a Transform Translate CSS to the styling, but I'd didn't send it to the right position. Code is embarrassing

I'd really appreciate any help.

Answer 1

It is possible to customize the single product price location. The following code below will add a 2nd product price next to stock availability with an additional selector class "is_mobile" that will allow you to show or hide depending on the screen device with (CSS media queries).

The PHP code (here for simple products type only):

add_filter( 'woocommerce_stock_html', 'filter_simple_product_stock_html', 10, 3 );
function filter_simple_product_stock_html( $availability_html, $availability, $product ){
    // For simple products
    if ( $product && $product->is_type('simple') ) {
        // Apend product price html to product availability html (stock)
        return sprintf( '<p class="%s">%s</p>%s',
            esc_attr( apply_filters( 'woocommerce_product_price_class', 'price is_mobile' ) ),
            $product->get_price_html(), 
            $availability_html
        );
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

To make it work as expected you will have to add those CSS rules like:

@media screen and (max-device-width: 480px)  {
    .product-type-simple p.price {
        display: none;
    }

    .product-type-simple p.price.is_mobile, 
    .product-type-simple p.stock {
        display: inline-block;
    }
    .product-type-simple p.price.is_mobile {
        margin-right: 12px !important;
    }
}
@media screen and (min-device-width: 481px)  {
    .product-type-simple p.price.is_mobile  {
        display: none;
    }
}

So on mobile devices the default product price will be hidden and it will display the 2nd cloned price next to the stock availability like:

Otherwise on other devices, it will show the default product price and will hide the 2nd cloned price.