Product Archive Title & Price on Same Line

Hi there,

I am attempting to align my product archive page Titles and price one the same horizontal line.

Can we see this online somewhere?
Maybe some CSS can solve this.

Kind regards,

Hi,

Please see the link for an image
https://ibb.co/yXZ4sYr

Hello @oakwoodmedia,

For Elementor specifically, I recommend approaching that community and support for advice.

In core WooCommerce this can be done with CSS. It may be theme dependent and can be tricky to get just right, but here is a simple way to line up the title and product while removing the Add to Cart button like in your example:

.woocommerce-loop-product__title {
	float:left;
}

.woocommerce-loop-product__title + .price {
	float: right;
}

.woocommerce-LoopProduct-link + .add_to_cart_button {
	display: none;
}

The result is something like this:

Link to image: https://d.pr/i/AUeWbp

This CSS is just an example, and works in Storefront and plain WooCommerce. You can add it to your Customizer to see if you can adjust it to work for your site – if not, I think approaching Elementor is the best next step for you.

Beyond the CSS approach, you can also investigate updating the loop product template, but that is a pretty advanced development topic requiring PHP.

I hope that helps, and if you have any further questions please let us know with a reply. Have a great day!

Thank you for the help, it is much appreciated and actually worked very well, I just had to add a max width to it and all is solved.

.woocommerce-loop-product__title {
float: left;
max-width: 80%;
}
.woocommerce-loop-product__title + .price {
float: right;
max-width: 20%;
}

Hey @oakwoodmedia,

Thanks so much for getting back. Happy to see that my colleague has given you the right starting point to create the CSS code you were looking for.

I’ll go ahead and close this thread now. If you have further questions, please feel free to open a new topic.

Cheers.