Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1307522

    Hello,

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

    1-cart-page

    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:

    1-cart-page-2

    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.

    #1307751

    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

    #1307811

    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.

    checkout

    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.

    #1308035

    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

    #1308066

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

    #1308448

    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

    #1308467

    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.

    cart-2

    • This reply was modified 3 years, 4 months ago by creativeopole.
    #1308662

    Hi,
    Thank you for the feedback, the layout you are seeing is from the woocommerce plugin, these are your columns:
    2021-07-04_0051678f2dd1732081a.jpg
    This is the source code for them:
    2021-07-04_004.jpg
    this is the woocommerce plugin template form-checkout.php:
    \wp-content\plugins\woocommerce\templates\checkout\form-checkout.php
    2021-07-04_006.jpg
    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.