Aligning Price with Star-Reviews

[simon_h]

We want to align our Price and star reviews.

We use the Focal-by Psycommerce Theme for Shopify. 

Attached you will find 2 pictures:

The red one shows our current situation (price beneath star reviews)
the green one shows what we want.

Please help us,

Kind regards

[Guleria · Accepted solution]

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.liquid , now here search for </body> 
Once found just before to it add this code

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select the elements to wrap
  var reviewsDiv = document.querySelector('.reviews-on-products');
  var priceListDiv = document.querySelector('.product-meta .product-meta__price-list-container');

  // Check if both elements exist
  if (reviewsDiv && priceListDiv) {
    // Check if they are already wrapped in a parent div with class 'lord-parent'
    if (!reviewsDiv.closest('.lord-parent')) {
      // Create a new parent div
      var parentDiv = document.createElement('div');
      parentDiv.className = 'lord-parent';

      // Insert the new parent div before the first element to be wrapped
      reviewsDiv.parentNode.insertBefore(parentDiv, reviewsDiv);

      // Append the two divs to the new parent div
      parentDiv.appendChild(reviewsDiv);
      parentDiv.appendChild(priceListDiv);
    }
  }
});

</script>
<style>
.lord-parent {
    display: flex;
    gap: 50%; 
}
</style>

Thanks

[Guleria]

Hello @simon_h ,

Please share the store URL.

Thanks

[simon_h]

https://www.nextcover.de/

[Guleria · Accepted solution]

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.liquid , now here search for </body> 
Once found just before to it add this code

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select the elements to wrap
  var reviewsDiv = document.querySelector('.reviews-on-products');
  var priceListDiv = document.querySelector('.product-meta .product-meta__price-list-container');

  // Check if both elements exist
  if (reviewsDiv && priceListDiv) {
    // Check if they are already wrapped in a parent div with class 'lord-parent'
    if (!reviewsDiv.closest('.lord-parent')) {
      // Create a new parent div
      var parentDiv = document.createElement('div');
      parentDiv.className = 'lord-parent';

      // Insert the new parent div before the first element to be wrapped
      reviewsDiv.parentNode.insertBefore(parentDiv, reviewsDiv);

      // Append the two divs to the new parent div
      parentDiv.appendChild(reviewsDiv);
      parentDiv.appendChild(priceListDiv);
    }
  }
});

</script>
<style>
.lord-parent {
    display: flex;
    gap: 50%; 
}
</style>

Thanks

[simon_h]

Hi Guleria,

this helped a lot, however, we want to switch the position of review and the price. (see picture attached)

 

[Guleria · Accepted solution]

Add this css too

.lord-parent .reviews-on-products {
    order: 1;
}

[simon_h]

Thank you for your help Guleria,
I'm sorry if my question sound stupid, but at which part of the code should I add this now? 😅

Update:

I just added it before </sytle> and now everything works. Thank you for your help!

[simon_h]

@Guleria I have one more question to you:

how can we fix the location of showing the VAT? In German it's the following text: "Inkl. Steuern".
The goal is to put it one the same height as the price, see the attached picture:

  

[Guleria]

You need to extend the script and wrap the vat html under the parent we created with JS.