WooCommerce Checkout Page Layout - Support | Kriesi.at

Tagged: checkout page, layout, woocommerce

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
June 26, 2021 at 3:10 pm #1307522

creativeopole
Participant

Hello,

How and where you can modify the look of the order summary to get the below look from the attachment.

On the Enfold template it looks terrible and underdeveloped. We want to get rid of those gaps on the right side.
Move the element with the blue color to the left column. Whereas the element marked in red is to the right. Below screenshot:

Do you have any plans to rebuild this look with the main template look in the future? In my opinion, it is worth writing it down as a basic task.

June 28, 2021 at 2:17 pm #1307751

Ismael
Moderator

Hey creativeopole,

Thank you for the inquiry.

The layout that you see in the screenshot is actually the default template from the Woocommerce plugin . It is not from the theme. It can be adjusted by overriding the hooks or by editing the plugin’s template files directly. Please check the following documentation and article for more info.

// https://docs.woocommerce.com/document/template-structure/
// https://wpdevdesign.com/how-to-override-woocommerce-templates-using-a-custom-functionality-plugin/

Best regards,
Ismael

June 28, 2021 at 6:14 pm #1307811

creativeopole
Participant

I don’t fully understand because I checked the cart page design in the standard storefront template and there is also a two-column layout there. On the left are customer data and on the right there is information about the order and summary.

In fact, most templates look like this, only Enfold has weird client details and a blank space in the right column. Summary dumped to a new line.

June 30, 2021 at 6:40 am #1308035
Ismael
Moderator
Hi,

Would you like to move the order details beside the checkout form? You can try this css code in the Quick CSS field.
```
@media only screen and (min-width: 768px) {
  .woocommerce-checkout {
    display: flex;
    justify-content: space-between;
  }

  .woocommerce-checkout #customer_details {
    overflow: visible;
    flex: 1 1 60%;
    margin-right: 4%;
  }

  .woocommerce-checkout #order_review_heading {
    position: absolute;
    left: 64%;
  }

  .woocommerce-checkout #order_review {
    flex: 1 3 34%;
    top: 54px;
    position: inherit;
  }
}
```
Best regards,
Ismael
June 30, 2021 at 11:06 am #1308066

creativeopole
Participant

Unfortunately, it did not work and the sent css code did not change the layout to 2 columns.

July 2, 2021 at 4:44 am #1308448

Ismael
Moderator

Hi,

The stylesheets are compressed when we checked the site. Please temporarily disable the file compression before adding the css code and make sure to purge the cache afterwards.

Best regards,
Ismael

July 2, 2021 at 7:51 am #1308467
creativeopole
Participant
Hello,

The cache is always cleared. This time, I even turned off the optimization module. In addition, I checked on various computers and browsers and the code does not change anything. As if it was not correct.

Edition:
I can see that after updating enfold to a newer version the layout on the order page has changed.
However, it doesn’t work as it should, because there are now 3 columns instead of 2 columns. In the attachment there is a screenshot.
- This reply was modified 3 years, 5 months ago by creativeopole.
July 4, 2021 at 7:18 pm #1308662

Mike
Moderator

Hi,
Thank you for the feedback, the layout you are seeing is from the woocommerce plugin, these are your columns:

This is the source code for them:

this is the woocommerce plugin template form-checkout.php:
\wp-content\plugins\woocommerce\templates\checkout\form-checkout.php

So perhaps your best option would be to edit the plugin template so the content of col-2 is moved to the bottom of col-1 and then move your order review code into the col-2
Please see Ismael’s links above to see how to do this and add it to your child theme so updates will not overwrite your changes.

Best regards,
Mike
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.