Styling the order confirmation popup

Modified on Tue, 11 Oct 2022 at 03:43 PM


This is a developer guide for updating the styling of your Order Confirmation pop-up screen. 

  • This is a great option if you wish to match the confirmation pop-up to your businesses' brand design elements.
  • Please be aware however, that changing the styling of the popup might have some unexpected consequences if you do decide to change the master 'theme' for your store. Whenever you update your site theme, it's strongly recommended you review the impact to the design and layout of the order confirmation pop up.
  • This guide will walk you through
    • How to do this directly within Wordpress, as well as
    • how to do this via editing the style.css file locally on your computer.



How to Update the Order Confirmation Pop-Up in WordPress

  1. Navigate to Plugins and select Plugin Editor.
    • NOTE: Please ensure the Live eftpos WooCommerce plugin is not active before editing. 
  2. In the 'Select plugin to edit' drop down box, select the 'Live eftpos for WooCommerce' plugin, 
  3. Select the 'style.css' file.
  4. Add the 'Customisable CSS Code' block (see below) to the bottom of the sheet, and play around with the settings as you wish.



Customisable CSS Code
#livegroup-confirm-pay-order-modal #livegroup-btn-pay-for-order{
   width: 100%;
   background: #000 !important; /*this is the button color */ 
   border: none !important; /*this is the button border color */
   color:   #ffffff !important; /*this is button text button color */
}

#livegroup-confirm-pay-order-modal .modal-content .modal-body .confirm-pay-for-order-table tbody tr td .total-amount {
   color: #000 !important; /*this is the button text button color */
}


How to Update the Order Confirmation Pop-Up in the Zip File itself

  1. Download and open the WooCommerce Live eftpos Payment Gateway .zip file.
  2. Open style.css file in a code editor like VSCode
  3. Add the 'Customisable CSS Code' block (see below) to the bottom of the sheet, and play around with the field settings as you wish. Save your edits.
  4. Re-package the zip file, then upload it into your Wordpress > Plugins as you normally would, and activate the new plugin.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article