- This topic has 17 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
Hello,
on testing the order processing workflow on my website today I noticed that when checking out through a mobile device (Android One v10), the order completion page on my theme displays the first table, containing:
- order no.
- Date
- Total
- Payment method
where the table formatting/data is all over the place. Please see attached screenshot for reference. It would be great if this can be fixed please.
Kind regards
George
Hi George,
I hope you are well today and thank you for your question.
Please make sure that you are using the below latest version of the theme.
Also, could you please try clearing and temporarily deactivating the SG Optimizer plugin that you are using on your website?
Could you please share the page URL from your site where it is not displaying correctly so that I can troubleshoot it?
For any custom work, you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Best regards,
Shufflehound teamHello,
thanks for the prompt response.
I’m already running v 4.8.4 (see attached). Is the beta version you attached an uprev of v4.84?
I will disable the SG plugin and attempt to capture the URL when I make another test transaction later on from a mobile device. Please bear with me for the details on this.
Thanks for the other suggestion.
Kind regards
George
You are using the latest theme version so no need to update the theme.
Ok. I will wait for your reply.
Hello,
I disabled the SG plugin earlier today and just not made another transaction. The exact URL on mobile is as listed below. This is essentially the landing page confirming that an order has been placed/accepted.
The first table is still formatted all over the place. Two additional screenshots from this transaction for reference are attached.
regards
George
You can resolve the issue using the Yellow Pencil editor in responsive mode and style the page as described on the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
Hello,
I could have a god myself if I knew which page I need to customise?
When I attempt to “edit” this page = https://gkauthentic.com/checkout/order-received/7513/?key=wc_order_nvRRE80M8I10s&utm_nooverride=1 I’m redirected to = Capture1.png (Checkout page). When I load the checkout page in YP, the view is different as it loads the default blank checkout page = Capture2-png, not the completed order page with the extra rendered tables, therefore it isn’t clear which element if any on that page requires adjustment, or if its even the checkout page that requires the adjustment and then how.
The Jevelin theme is advertised as responsive is it not? In this case one element as highlighted is not behaving in a responsive manner….
I’m happy to put the effort in to resolve the issue, but I require more detailed assistance from the experts who understand the structure better than myself.
regards,
George
You can try resolving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .woocommerce ul.order_details li { width: auto !important; }Thanks. I have added the CSS in the section requested and will test the outcome later and revert with the outcome.
Presumably this can be added as a permanent bug fix to a future update of the theme once its confirmed that it works?
Regards
George
Sure, we will add the fix in the future version of the theme.
Hello,
thanks for the feedback, but I feel the CSS solution is a band aid.
I sent another message today which seems to not have been registered or was deleted.
Basically, I highlighted that the current page layout duplicates data in several places and can be simplified in its layout/presentation. The attached screenshot shows the current outputs with the CSS applied on Mobile and Desktop (Screenshots 1 & 2).
The attached word document shows the current layout highlighting duplicated items and how the whole page can be simplified whilst removing duplicated items.
Please consider this improvement in your roadmap, it will benefit existing and new customers, and more importantly the clients where all the funding comes from.
regards
George
Sure, we will also fix this duplicate data in the future version.
Hello again,
further to the above mentioned issue, I today carried out another order test on Mobile after updating to Woo version 4.9.1 to ensure everything is still working.
The resultant rendering of the order summary/confirmation page on Mobile is now even more horrible than before with all the tables misaligned in the order summary/details. 🙁 I have checked the page “with or without” the CSS code fix you previously supplied above installed. See the shared URL for that page in the private section for reference.
Also note the screenshots from Mobile, and also the same page on Desktop. Even the desktop version is not well aligned with the rest of the site frame (compared wit the Cart page for example) and the “Product” and the “Product Description” content in the Order details table are not aligned/indented with the rest of the text in the same table.
I’m happy to utilise a developer to modify small things, but this seems to me to be a fundamental issue with how the framework of that page is structured.
I would greatly appreciate some effort to go into fixing the design of that page for both mobile and desktop. I can’t imagine as a customer coming back to shop again in the same store if I was at the receiving end of that page as a customer.
Regards
George
It displays fine for me on your website as shown in the attached screenshots.
Please advise.
Also, could you please temporarily enable the Right Click on your website so that I can troubleshoot the markup of the website?
I have enabled right click.
I think that you are looking at the wrong page.
The page I am referring to is the page “after” and order has been placed (payment workflow completed after checkout and the “place order” selected to complete the order). This page is only displayed to a customer after an order is placed, and is a summary of the order commitment.
I am aware that the Basket/Cart and Checkout pages are rendering similar tables beautifully, and as designed for desktop and mobile. Hence why when compared with the page I’m referring to tables are obviously not aligned well.
Regards
George
Then could you please share the exact page URL where it is happening?
Also, please check whether it is a cache or CDN issue as discussed in your below topic.
https://support.shufflehound.com/forums/topic/jevelin-quantity-button-feature-bug/#post-71457
Hello,
I do not believe that the issue is CDN related as it was happening before. In any case, these pages are unique and are only generated after an order is complete. They are not available in the site pages list to include/exclude from caching.
I posted an example in my earlier message, also posting two in private with this message.
Regards
George
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-woocommerce-thankyou-details .woocommerce-order-details { margin-right: 0; }
