Woo commerce Price to be on the same line as qty and add to cart

Hi,
Please can you help me with the code to move the product price on to the same line as the quality and “add to cart button?
If it’s not possible to add them to the same line, please can you help me move the variation price to below the variation options, but above the quantity and add to cart button? I’ve been able to do it on single products using the below code but it doesn’t work on variable products.

// Move WooCommerce price
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 29 );

Thanks in advance

Hello,

HTML structure does not allow to do it with CSS, it requires more complicated Woocommercecustomization which is not covered by our support. You will have to find a developer who would do it for you.

Best Regards

cool no probs, thought I’d ask first

Hi Elise,
Thinking about it, I’ve nearly got what I’m looking for.
Using the previous code to move the single price above the cart but on works fine for single products. And if I turn off “Remove duplicate price for variable product” option in the theme settings the variable price is above the cart too. so all good.
However I can’t seem to workout the css to remove the duplicate price range that sits below the excerpt. When I activate the “Remove duplicate price for variable product” option the price range is replaced with the variant price but in the same location. I’m just trying to hide that price range. The CSS I’ve tried removes the range but also removes the price on single products too. Obviously that’s no good. Could you help please?

I’ve tried:

/* Hides variable price range*/
.product-image-summary .summary-inner > .price, .product-image-summary .woodmart-scroll-content > .price {
display: none;
}

Hello,

Ther recent theme version has the option to hide the highest price in the price range for variables product, you can find the option in the Theme Settings > Shop

Best Regards

Hi unfortunately when I activate that option in the theme settings it moves the variation price. Screen shots attached. I’m looking to keep the variation price where it is (above the add to cart button) and just hide the additional price range.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.woocommerce-variation-price span{
display:none;
}

Best Regards

Hi Elise,
Thank you but that code hides the wrong price. I need to hide the price range, marked with an X on the screen shot, and keep the variation price, circled, where it is.

Thanks
Jon

Attachments:

You must be logged in to view attached files.

Screenshot showing wrong price hidden.
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your product page URL I have checked the code it works.

Best Regards

Hi Elise,

Thanks, I’ve added the link and admin login in the private details

Thanks
Jon

Hello,

I do not see the second price on the product when I chose the variation https://gyazo.com/2bc395699fc222c8b040a4f4cd0959ca

Please provide the page URL from the screen.

Best Regards

Hi Elise,
Thanks for coming back to me. Your video shows what is happening the price of the variation is hidden but the range is still displayed – this is the opposite of what I want to achieve.
In the meantime I’ve got it to do what I wanted. On both single and variable products the price is just above the “add to cart” button, the price range is hidden on variable products and on category pages instead of £123-£456 it’s From £123. The code below goes in the child theme functions php if it’s of help to anyone else. Please note it’s not my original code, but rather pieced together from various sources on the web.
Thanks again.

/**
* Format price range.
*
* @param string $price
* @param float $from
* @param float $to
*
* @return string
*/
function iconic_format_price_range( $price, $from, $to ) {
return sprintf( ‘%s: %s’, __( ‘From’, ‘iconic’ ), wc_price( $from ) );
}

add_filter( ‘woocommerce_format_price_range’, ‘iconic_format_price_range’, 10, 3 );

/**********************************
* Move WooCommerce Price on Single Product Page
* Reference hook locations using woocommerce_single_product_summary hook
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
************************************/

// Move WooCommerce price
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 29 );

// don’t show variable price range under title, product pages only
add_filter( ‘woocommerce_variable_sale_price_html’, ‘hide_variable_prices’, PHP_INT_MAX, 2 );
add_filter( ‘woocommerce_variable_price_html’, ‘hide_variable_prices’, PHP_INT_MAX, 2 );
function hide_variable_prices($html) {
if ( is_product() ) {
return ‘<p class=”variable_price”></p>’;
} else {
return $html;
}
}

// show variation price under add-to-cart, even if all variations are the same price
add_filter(‘woocommerce_show_variation_price’, function() {return true;});

Hello,

It is not possible to hide the price range in the top, as the price from a single product would also disappear. Our theme has the option to hide the highest price. You would better use this option.

Best Regards

No worries Elise thanks.

Can you please help with the cart widget overflow issue? or would I be best starting a new topic?

Thanks.

Hello,

What do you mean? Please provide the screen.

Best Regards

Hi,
Both the filter widget and the cart widget have their contents crashing.
Thanks

screens

Attachments:

You must be logged in to view attached files.

All sorted.

I’t was the “Nanoscroller library” that needed to be enabled in the CSS Generator.

No more issues.

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts