Center align product price & product rating

[emilyaugstudios]

Hey guys, sorry me again! I want to text align the product price to the center on my product card, like everything else, however I am running into an issue where my product rating can only be added through the price section within my theme, putting the price and rating in the same section line, with this code which stops me from moving the price to the center of the card...

.price-container {justify-content: space-between;}

Instead what I would love to figure out how to do is center align the product price and then have the rating central aligned below this if possible? Similar to how to how it displays on mobile view. Hope that makes sense?

URL – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1&preview_theme_id=144118972631

Desktop view (price on left, rating on right) –

Mobile view –

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.product-form .price-container {
   flex-direction: column;
   align-items: center;
}
</style>

RESULT:

DESKTOP:

MOBILE

[emilyaugstudios · Accepted solution]

Hi this works great thank you @BSS-TekLabs – The only issue I am now having is the price sits slightly to the left, not central in line with everything else, I don't know if you can tell based on the photos but is there a way I can move it right a little to be in line?

[BSSCommerce-HDL]

Hi @emilyaugstudios, You can try: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.product-form .price-container {
    flex-direction: column !important;
    align-items: center !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Tech_Coding]

Hello @emilyaugstudios 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media (min-width: 768px) {
  .price-container {

      flex-direction: column !important;
      justify-content: center !important;

     align-items: center !important;
   }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

<style>
    .price-container {
        justify-content: center !important;
    }
.price-container .product-price {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
    }
</style>

[BSS-TekLabs]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @emilyaugstudios .

[emilyaugstudios · Accepted solution]

Hi this works great thank you @BSS-TekLabs – The only issue I am now having is the price sits slightly to the left, not central in line with everything else, I don't know if you can tell based on the photos but is there a way I can move it right a little to be in line?

[BSS-TekLabs · Accepted solution]

<style>
.price-container .product-price {
        margin-right: 0 !important;
    }
</style>

[BSS-TekLabs]

- Then add the following code at the before tag </head> and press 'Save' to save it @emilyaugstudios .

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you 

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.product-form .price-container {
   flex-direction: column;
   align-items: center;
}
</style>

RESULT:

DESKTOP:

MOBILE

[emilyaugstudios]

Hi this works great thank you @BSSCommerce-B2B! The only issue I am now having is the price sits slightly to the left, not central in line with everything else, I don't know if you can tell based on the photos but is there a way I can move it right a little to be in line?

[BSSCommerce-B2B]

@emilyaugstudios , please add more this code

<style>
.product-form .price__default .price__was {
   margin: 0;
}
</style>