[Tip] Default one page checkout shortened from the back office css panel

[veganline]

Now that backoffice>preferences>custom code>add css allows you to tweak styles by default, more shopkeepers might want to shorten the default one page checkout. No changing of files is required; it's all done from the back office where shopkeepers like me are happier making changes.

The first step is to do everything possible from backoffice (BO) settings to simplify the checkout form.

   BO>orders>general>order process type: 
   set to "one page checkout". Enable guest checkout. Turn off all else.
   BO>modules...>modules..> 
   "block cart" module. configure to turn off "ajax cart" and "upselling", then disable the module
   BO>preferences>customers 
   set "newsletter registration", "opt in (to special offers)" and "phone number is mandatory" to "no" (unless maybe you need a phone number for a courier)
   BO>localisation>translations 
   expand all fieldsets and search for "New customer", changing to "Customer"
   BO>localisation>translations > ORDER-OPC-NEW-ACCOUNT 
   change "delivery address" to "delivery address copies customer name"
   change "save" to "check address and postage"

The second step is to amend the default stylesheets. The trick is to right-click the part of the form you don't want, choose "inspector" in a browser like Chrome which has an option to "copy selector". You copy and paste it to backoffice>preferences>custom code>add css  where you can add an extra {display:none;} or {display:block;}. This has worked for me so far in Niara theme and something similar will work for others.

--------------------------------------------------------------------

/* CHECKOUT TWEAK for preferences custom code css section*/
#quantity_wanted_p  {display: none !important;} /*quantity on product page can be removed. The effect varies a little between themes*/
#cart_title {display: none;} /* saves space to encourage scrolling-down*/
#opc_account_choice {display: none !important;} /*for edge browser*/
#login_form {display: none;} /*everyone uses guest checkout so no login*/
#opc_account_form.unvisible {display:block !important;} /*guest checkout visible*/
#new_account_title {display: none;} /*customer heading*/

/* #customer_firstname label caught below */
#opc_account_form > div:nth-child(13) > label {display: none;}
/* #customer_lastname label caught below */ 
#opc_account_form > div:nth-child(14) > label {display: none;}
/* #company caught below */
#opc_account_form > div:nth-child(15) {display: none;} 

#discount_name.discount_name {display: none;}
#voucher {display: none;}
#cart-voucher {display: none;}
#login_form .box {display: none;} /*includes most of the lines up till vat number */
.date-select {display: none;} /*order and date of birth form*/
#vat_number_block {display: none !important;} 
#checkoutLogin {display: none;}
#logged_checkout {display: none;}
#blockuserinfo-login {display: none;}
#product_condition {display: none;}
#phone {display: none;}
#opc_account_form > div:nth-child(25) {display: none;} /*catches the label for phone */
#phone_mobile {display: none;}
#opc_account_form > div:nth-child(26) {display: none;} /*catches the label for mobile*/

--------------------------------------------------------------------

The same technique can make payment methods such as a stripe or paypal module visible if enabled for your account and for the country selected. Details will be be different for each payment module. If in doubt, $24 buys the "show payment methods" module from Green Mouse Studio who sell on codecanyon linked from
https://thirtybees.com/partners/compatible-modules/

--------------------------------------------------------------------

Added 19/10/19
I didn't think of checking on a mobile emulator like https://www.brickandmobile.com/mobile-emulator/ until reading the post below. I've done a single quick test now, and the same code seems to work.

 

--------------------------------------------------------------------
Added 21/10/19
I tested this guest checkout on Thirtybees 1.01 a few times with the same email address, and it works each time. If I am two customers with the same email address under BO>customers>customers and if I click on myself it says "This customer is registered as a Guest." and has a button to turn me into an account holder; "This feature generates a random password before sending an email to your customer.", it says.

Prestashop 1.6.1.23 fails second time: "There is 1 Error(s): An account using this email address has already been registered.", and there are some years-old threads online where people look for a neat answer; there's nothing similar under the backoffice>customers. Site owners have to cut out bits of file to stop the error message. This is a pity because there are CSS editing modules for Prestashop like the free one from DH42, and the same style sheet worked otherwise.

Added 18/06/20
There is a subtlety. Default settings are full of invites to register an "account", so someone somehow might do it, and account-holders need Thirtybees to have a bug-fix-update file if they are to order again with the same email address but no password.
https://github.com/thirtybees/thirtybees/issues/1150 : "An account using this email address has already been registered" preventing purchase where there is only guest orders with that email 
--------------------------------------------------------------------
Added 30/10/19
If doing this for someone else, I'd translate the labels for phone and mobile to "." in case the lines below change and reveal the labels.
For some reason my own form now needs
#opc_account_form > div:nth-child(24) {display: none;} /*label for phone */
#opc_account_form > div:nth-child(25) {display: none;}/*label for mobile*/
instead of 25 and 26 as above - I suppose they're sensitive to other changes in the form, or maybe a core file update could effect them too.
--------------------------------------------------------------------
Added 03/11/19
DH42 free Prestashop Editor seems to work on a defaullt installation, although not the bleeding edge version.
If so, I guess it allows refinement of the code above. It's possible to edit the product.tpl file to take out unwanted stuff until the next code update, and it's possible to add the style sheet to an area like checkout and not to other pages.
Thirtybees template selector, based on another DH42 module, allows you to have an self-edited template for any product where you select it; you can have different templates for different kinds or product. I imagine that these survive site code updates.
--------------------------------------------------------------------
Added 06/11/2019
"Please log in to see payment methods" shows by default before you choose a country and address, when the system doesn't show a payment method. Even if you don't allow logins. So it's good to translate to "Please choose a country and address to see payment methods". (I thought I'd forced mine to show, but they still hid on the mobile version of the site.) There are other suggestions dotted around on forum threads.

Translation has to be repeated if you change themes or allow another language.
--------------------------------------------------------------------

I hope this helps other shopkeepers, and if I have written it badly then improvements are welcome. Maybe it could be built into a future theme.

--------------------------------------------------------------------
Added 05/04/2020 -
Toplakd has writtten a 3 page checkout tweak, altering the checkout.php and templates from the default 5 page checkout. It's a thread with replies over on the themes forum.

--------------------------------------------------------------------
added 17/05/2020
About modules.
I use Cloudflare, which slows the site down but can be used to offer a free secure server.
Cloudflare can guess where in the world a customer is. A free Datakick module adjusts Thirtybees to this information. This can ease the trouble of having to fill-in the country part of your address and confirm before you see postage options; the box can be pre-filled I think.

€40 buys a Datakick module that puts the delivery country right at the top of the page and "tries to simplify the checkout flow". There is short youtube video and a try before you buy option. I haven't seen other checkout modules that work like that; they get reviews like these instead.

One Page Checkout modules have trouble because the default one works in steps. There are buttons that effect what will be shown at the next step. A button confirms your address before showing the price of postage, which has a logic to it. Another asks you to "please sign in to see payment methods" for the same reason;  the cart can have Mastercard's Simplify Commerce enabled for the US and other options again just for Europe; maybe even for wholesale customers v. retail for all I know.  If you condense these steps into three columns on a one page checkout they confuse. Knowband's module and others ask shoppers to confirm their address on a button right at the bottom left of the screen where nobody would expect a button. That same module doesn't cope with updates unless you subscribe to their service to update it, and it doesn't simplify; it complicates. The only benefit is a page of switches for some of the {display: none;} changes that you can do for free in thirtybees' back office.

That's why a DIY hack helps; beware of expensive imitations
--------------------------------------------------------------------

Edited July 15, 2021 by veganline
Dated updates after testing, small edits

[DRMasterChief]

Hi, this seems to be still interesting,  can you please tell me if this works in 1.2.0 too and/or if there are any security issues regarding the email thing?  Thank you

[veganline]

I'm using it on 1.2 and it's fine.
You can check the current code by doing control+U on my site, but it is about the same.
All my customers are guests, so I don't get any complications with email
hope this helps!
 

[DRMasterChief]

ahhh OK, thank you!  It wont work when registering for customers is possible?

[veganline]

I haven't tried:
#login_form {display: none;} /*everyone uses guest checkout so no login*/
...you could try without this

#opc_account_form.unvisible {display:block !important;} /*guest checkout visible*/
...I've forgotten what this one does

#login_form .box {display: none;} /*includes most of the lines up till vat number */
...you could try without this

#checkoutLogin {display: none;}
...I've forgotten what this does

#logged_checkout {display: none;}
...I've forgotten what this does

#blockuserinfo-login {display: none;}
...you could try without this

The result would be a longer checkout but you could experiment to take a few bits out again.
You could turn guest checkout off if all your customers need accounts
Hope it works

[DRMasterChief]

Thank you!  Will try this definitely in the next time  🏋️‍♂️🤸‍♂️👍

[nickz]

On 8/23/2021 at 5:22 AM, veganline said:

Hope it works

I did too and it halfway does. The pay now button is gone though.

[veganline]

#opc_payment_methods {display:block !important;}

... might do it. I used to use that CSS but found that Stripe seemed to show anyway.
With Stripe I have another line .auth_wrapper {display: none;}/ for one of their form options that added complication.