Focal: Display basic price (per gramm) below price

Hi there,

I use the focal theme for a german Onlineshop. It’s compulsary to show the basic per gramm price. Now it’s displayed in one line, which makes it confusing. I’d like to display the actual price (including the savings) on the upper line and the basic price on the lower line. This is one of the product pages: https://moncourage.de/products/sun-stick

Thank you so much for your help.

Regards,

Eva

@Eva_Helmeth

Do you want price like this way?

IF YES then please add the following code at the bottom of your css file.

.product-meta__price-list-container, .price-list{
display: block !important;
}

Hi @Eva_Helmeth ,

As your requirement “Display basic price (per gramm) below price”, you can try this follow my guide:

Step 1: Go to Online Store => Themes => Edit code

![view - 2023-11-27T144631.880.png|1587x878](upload://zD0E1pvvA4wpnb9cY11KZoZHjfo.jpeg)

Step 2: Search: theme.css file, and add the css scripts in the end of file:

.product-meta__price-list-container,
.price-list {
    display: block !important;
}

Step 3: Save and reload the page.

=>> And the result: Your page will display the actual price (including the savings) on the upper line and the basic price on the lower line:

If my solution helps, plz tick marked as solution. Thanks and have a nice day @Eva_Helmeth

Thanks @BSS-Commerce and @dmwwebartisan for your solution. With the steps it was easy to implement.