The post Fix Layout Issues with Astra Pro appeared first on CheckoutWC.

Best option: Change the translation

The best option is probably to override the translation using your preferred translation plugin, such as LocoTranslate.

This translation comes from WooCommerce core – NOT CheckoutWC. 

Alternative options using custom code

If you would rather not mess with translations – say you don’t want to load up a translation plugin to change one string, there are alternatives. You can either change the layout of the address fields or make the state field required so that the label doesn’t include “(optional)”.

You would add one of these snippets (not both!) to WP Admin > CheckoutWC > Advanced > Scripts > PHP Snippets.

The post Handling Extra Long State Field Labels appeared first on CheckoutWC.

There’s an easy way to fix this.

Go to Divi Settings and disable Dynamic CSS as well as Load Dynamic Stylesheet In-line options:

The post How To Fix Styling Issues With Divi Theme appeared first on CheckoutWC.

This means WooCommerce is not configured to automatically generate a username. You can change this by going to WooCommerce -> Settings -> Accounts & Privacy:

Error: We were unable to process your order, please try again.

This indicates that WooCommerce is unable to verify the nonce it uses to verify checkout submits are authentic.

This usually means you are running an old version of WooCommerce  (<3.4). To fix this, update to the latest version of WooCommerce.

Error: Could not connect to server. Please refresh and try again or contact site administrator.

User browser is unable to connect to server.

Error: Requested resource could not be found. Please contact site administrator. (404)

AJAX end point returned a 404 error. This usually indicates a server issue.

Error: An internal server error occurred. Please contact site administrator. (500)

Server returned 500 error. Usually a PHP fatal error which can be viewed in your error logs.

Error: Server response could not be parsed. Please contact site administrator.

Server did not return JSON formatted response.

Error: The server timed out while processing your request. Please refresh and try again or contact site administrator.

Server returned 504 error or otherwise timed out. This is usually a server side performance problem unrelated to CheckoutWC.

Error: Request was aborted. Please contact site administrator.

AJAX request was aborted. This would generally only happen in the unusual event a user used their browser’s dev tools to cancel an AJAX request, but it may also happen if the server disconnects during a response.

Error: Uncaught Error: <error message>

Returned if the server returns an error condtion not anticipated in the previous error checks.

The post Common Problems and Solutions appeared first on CheckoutWC.

Step 1) Go to Avada > Options

Step 2) Search for ‘WooCommerce One Page Checkout’ in the settings search and turn the feature to Off.

Step 3) Search for ‘CSS Compiling Method’ in the setting search and turn the feature to Disabled.

Step 4) Search for ‘Enable JS Compiler’ and turn it to Off

Most servers use HTTP/2 these days so combining JS or CSS files is generally an anti-pattern and can cause poorer performance.

Step 4) Save Settings

The post Configuring Avada to Work With CheckoutWC appeared first on CheckoutWC.

Below is a general guide to troubleshooting problems. If you encounter a problem, follow these steps before reaching out to our support team (it will save time in the long run!)

Step 1: Update your plugins

If you’re using outdated versions of WooCommerce, WooCommerce plugins, or CheckoutWC the first course of action is to update these plugins to their latest version.

In many cases, the bug you are encountering may have already been fixed.

Step 2: Make sure you’re using a supported checkout field editor (if any)

We support the official Checkout Field Editor plugin from WooCommerce.

Most other checkout field editor plugins will cause problems – if you’re having a an issue, it’s always a good idea to try deactivating these types of plugins first.

Step 3: Use a process of elimination to figure out which plugin or theme is causing the issue.

If you don’t have a staging site, now is a great time to set one up. (You should have a staging site!)

Deactivate all plugins except for:

• WooCommerce
• CheckoutWC
• Payment Gateways
• Shipping methods

If this fixes the problem, activate the deactivated plugins, one at a time, testing after you activate each one. 

You will now know which plugin is causing the issue. Open a support ticket and send us a zip file (using a Dropbox, Google Drive, or similar link) with a description of how you use the plugin, and any relevant API keys. 

We’ll make every effort to add support (or prevent it from breaking the checkout page).

If that doesn’t fix the problem: 

Try temporarily activating one of the standard WordPress themes.

If this fixes the problem, send us a zip file of your theme (and parent theme) using a Dropbox or similar link. We’ll figure out what’s going on and get you a fix as soon as we can. 

If you are still having problems:

Try deactivating your payment gateways and shipping methods, one by one, and testing to see which one is causing the problem. 

You’ll have the problem plugin identified quickly using this strategy. 

What if I have a lot of plugins?

One way to speed up the process is to use a binary search. 

Basically, if you have 100 plugins, you would select 50 and deactivate those (obviously skipping the list above). 

Now test it again. If it fixes the problem, you know it’s in that 50. If it doesn’t fix it, you know it’s in the other 50 and you can reactivate the first 50. Continue dividing the list in half until you get to the offending plugin. 

It’s a process of elimination and it may be much faster than trying to randomly guess which plugin is causing the issue. 

The post General Troubleshooting Steps appeared first on CheckoutWC.

Here is a quick guide on how to access this console on the most modern browsers.

Google Chrome

1. Navigate to the desired page
2. Press CTRL+SHIFT+J (CMD+OPT+J on a Mac) or F12
3. A Developer Tools sub-window should appear, as in the screenshot below
4. In the Developer Tools window, click the ‘Console’ tab

Mozilla Firefox

1. Navigate to the desired page
2. Press F12
3. A Developer Tools sub-window should appear, as in the screenshot below
4. In the Developer Tools window, click the ‘Console’ tabAlternatively, press CTRL+SHIFT+J (CMD+OPT+J on a Mac) for a pop-out window containing the console

Edge

1. Navigate to the desired page
2. Press CTRL+SHIFT+J or F12
3. A Developer Tools sub-window should appear, as in the screenshot below
4. In the Developer Tools window, click the ‘Console’ tab
5. Reload the current page

Safari

1. Open Safari’s preferences, and open the Advanced pane
2. Enable the ‘Show Develop menu in menu bar’ setting, and close the preferences pane
3. Press CMD+OPT+C
4. A Developer Tools window should appear, as in the screenshot below
5. In the Developer Tools window, click the ‘Console’ tab

The post How To Access Your Browser’s Developer Tools for Debugging appeared first on CheckoutWC.

This indicates that there’s a problem with your Google API Key. This isn’t a CheckoutWC issue. 

To determine what the problem is, open up your browser’s developer tools and check the console for a log entry like this:

Most common problems:

1. The API key is not allowed on the current site. (RefererNotAllowedMapError)
2. The API key doesn’t have access to the necessary APIs. (Maps, Places, Geocoding)
3. The project doesn’t have access to the necessary APIs (Maps, Places, Geocoding)
4. Your Google Cloud Project doesn’t have billing enabled.
5. You’re using a plugin like PerfMatters and have it configured to block Google Maps for performance reasons

The post Troubleshooting Problems with Google Address Autocomplete appeared first on CheckoutWC.

This is because CheckoutWC blocks all JavaScript and CSS files from your theme from being included on the checkout pages.

We do this to increase performance reduce compatibility conflicts. 

How To Fix Missing Images

To fix missing images on the checkout page, you should disable your theme’s lazy loading functionality.

WordPress Core added native lazy loading in 5.5. This leverages the loading=lazy attribute supported by most major browser, including Chrome and Firefox. 

This allows browsers to lazy load images without any JavaScript. 

CheckoutWC supports this functionality and most themes properly allow WordPress lazy loading if you disable their lazy loading functionality.

The only downsides of native lazy loading is that it isn’t currently supported by Safari. But support is expected soon. 

And as of WordPress 5.7, support for lazy loading iframes is also enabled!

If You Really Really Need Safari Support

If lazy loading in Safari is crucial for your use case, we recommend using a lazy load plugin in favor of using your theme’s lazy loading functionality. This will bypass any theme restrictions in CheckoutWC. 

The post Lazy Loading and Missing Images appeared first on CheckoutWC.