Tagged: checkout page, layout, woocommerce
-
AuthorPosts
-
June 26, 2021 at 3:10 pm #1307522
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 #1307751Hey 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,
IsmaelJune 28, 2021 at 6:14 pm #1307811I 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 #1308035Hi,
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,
IsmaelJune 30, 2021 at 11:06 am #1308066Unfortunately, it did not work and the sent css code did not change the layout to 2 columns.
July 2, 2021 at 4:44 am #1308448Hi,
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,
IsmaelJuly 2, 2021 at 7:51 am #1308467Hello,
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, 4 months ago by creativeopole.
July 4, 2021 at 7:18 pm #1308662Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.