Return to previous page

Single productpage: Howto get Title en Price on same line?

This topic has 9 replies, 2 voices, and was last updated 3 years, 1 months ago ago by demzie

demzie

Participant

November 12, 2021 at 16:02

Single productpage: Howto get Title en Price on same line?

Howto get them on one line? Title left and price aligned to the right?

Thanks!

#308360 Copied Theme version: 8.0.9

8 Answers

Rose Tyler

Support staff

November 13, 2021 at 08:01

Hello,

Have you sorted it out https://gyazo.com/4f508d75478e3db954fdb0b9d59a40d8 ?

Regards

#308406 Copied

demzie

Participant

November 13, 2021 at 08:09

No thats just a try with a connection block 🙁
Its not responsive and ugly on mobile 🙁
Dont want that connection block actually.. its a mess..

Check the original website, like that 🙂

Title aligned to left, price to the right 🙂

Also its not good aligned.

Do you have css solution?

#308409 Copied

Rose Tyler

Support staff

November 13, 2021 at 09:55

Provide temporary wp-admin access, so we can take a closer look.

Regards

#308465 Copied

demzie

Participant

November 13, 2021 at 10:56

See private content!
Currently website is backuping.. please enter it in about half an hour, thank you.

Please contact administrator
for this information.

#308473 Copied
Rose Tyler

Support staff

November 13, 2021 at 16:07
Hello,

Add elements like on the screenshot https://gyazo.com/02950e4446ca884c438fea8c1abc48f8 and use the next custom CSS code:
```
.single-product .product_title,
.single-product .et_product-block > .price {
    display: inline-block;
    margin-right: 15px;
}
```
Regards
#308582 Copied
demzie

Participant

November 14, 2021 at 08:42

Hi,

This is not really working? on desktop the price is not aligned to the right.
On mobile it is still a mess..

#308615 Copied
Rose Tyler

Support staff

November 14, 2021 at 09:00
Hello,

Change the previous code to:
```
.single-product .product_title,
.single-product .et_product-block > .price {
    display: inline-block;
}
.single-product .et_product-block > .price {
    float: right;
}

@media only screen and (max-width: 992px) {
    .single-product .product_title, .single-product .et_product-block > .price {
        width: auto;
    }
    .single-product .product_title {
        padding-top: 8px;
    }
}
```
Regards
#308618 Copied
demzie

Participant

November 14, 2021 at 11:06

Great!

Tweaked a little bit with distances and its now perfect!

Thanks for the great support!!!!

#308652 Copied
Tagged: best selling themes, howto, price, same line, single-product page, title, woocommerce
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Single productpage: Howto get Title en Price on same line?’' has been successfully resolved, and the topic is now closed for further responses

Single productpage: Howto get Title en Price on same line?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection