Why Did This Happen? 

Astra Pro WooCommerce and EDD Modules bring the option to change the default mini cart icon. You can set one of the Astra Pro icons by navigating to the Mini Cart Header element (General tab).

By default, the font color for the number of items in the cart (Product Count) is white. Setting your Cart color to white too will create a situation that the number of items becomes invisible though the number is still actually there (white color on white color).

This is easily solved by setting product Count Color to any color other than white.

How To Set Product Count Color?

In this case, you should additionally set another color for the number of items using the “Count Color” option.

The “Count Color” is available with Astra Pro Addon since version 3.5.9. You can set it up by following these steps:

Step 1 – Login to your website and make sure that your Astra Pro Addon plugin is active;

Step 2 – Navigate to Appearance > Customize > Header Builder > Cart > Design;

Step 3 – Set “Count Color” to another color. Click “Publish” to save changes.

You can easily downgrade to the previous version with our Rollback feature, which is available since Astra Pro addon (plugin) version 3.6.1. 

Why Is the Rollback Feature Important?

Keeping your theme and plugins updated is essential. However, sometimes after the update, you might encounter some problems – for example, incompatibilities with some third-party plugins.

In this case, the option to roll back to a previous version of Astra can come in handy. Going back to the previous version ensures that your website will be fully functional while waiting for the solution.

Once the issue is fixed, you can update the theme or plugin again to the newest version.

How To Use Rollback Feature?

The rollback feature for both theme and plugin is available only for users with the Astra Pro license. Please make sure you have Astra Pro installed and activated. 

To roll back your Astra theme or Astra Pro plugin, please follow these steps:

Step 1 – Navigate to Dashboard > Appearance > Astra Options;

Step 2 – You will find the “Rollback Version” options in the right-side sidebar. Just scroll down to this section;

Step 3 – You will notice the separate options for Astra Theme and Astra Pro. Click on the appropriate dropdown menu, and select the desired version to which you want to roll back. Keep in mind that you’ll have a limited number of previous versions available. 

Step 4 – Click on the “Rollback” button and confirm the rollback in the popup window to start the process. It will replace the newest version with the required previous version.

That’s all. Once the rollback is done, your Astra theme or Astra Pro will be reverted to the previous version.

If this is the issue you are experiencing, this document will show you how to fix the horizontal scrollbar issue on mobile devices.

Why Is This Happening?

This issue happens when there are one or more elements on the page that create an overflow. 

What’s overflow? With some Elementor custom design settings, you can “push” the widget content out of its column area. This part of the content that is found outside of its column area is called overflow. 

When either the widget content is too big or positioned to exceed the screen width on mobile devices, this creates a horizontal scroll issue. To also show this piece of content to website visitors, your browser will need to add a horizontal scrollbar. 

How To Fix This?

The horizontal scrollbar issue on mobile devices can be fixed by setting overflow to hidden. You can do this by using the Elementor Section settings or by adding CSS code.

Method 1: Fix Overflow Issue With Elementor Settings

You can use the Elementor section settings to set the overflow to hidden. If you have more than one section which creates overflow, you’ll have to do this for each of those sections. If this is happening on more than one page, you’ll have to repeat this on other pages.

Let’s show you how to do this:

Step 1 – Navigate to the page that has the overflow issue and click on “Edit with Elementor”;

Step 2 – Click on the “Edit Section” option to start editing the section with the overflow;

Step 3 – Under the “Layout” tab, scroll down to the “Overflow” dropdown and select the “Hidden” option;

Step 4 – Click on “Update” to save changes.

That’s it. You solved the issue for this section. 

Keep in mind here that this removes the overflow on all sides of the section. Thus, if you deliberately set some overflow on the top and bottom of the section, these will become hidden too. 

In this screenshot, you can see the overflow areas that got hidden:

Method 2: Fix Overflow Issue By Adding CSS Code

There are two cases in which this method would help you more than using the Elementor options:

• You need to keep the overflow on the top and bottom of the section while hiding it on the sides to avoid horizontal scroll;
• You have too many elements with the overflow issue, and you need a solution that would apply to your whole website.

Please follow these steps to remove overflow using a custom code:

Step 1 – Navigate to Appearance > Customize > Additional CSS;

Step 2 – Add the following CSS code:

html,
body{
  width:100%;
  overflow-x:hidden;
}

Step 3 – Click “Publish” to save changes.

This method will remove all overflow on the left and right sides for all of your sections and pages. Also, it will keep your top and bottom overflow still visible where needed. You can see it in this video:

When you add a logo image in the .png and .jpg formats to your website, the logo height will be added automatically based on the logo width. Contrary to this, if you upload the SVG image, WordPress will only set the logo width but not height.

As a result, some logo shrinking is possible, which can cause an unexpected layout shift in the header section. Astra Theme version 3.6.0 improved the way SVG logo images are handled, which prevents unexpected shifts. Hence, this change can help improve the overall CLS score. 

How Did We Improve This?

To improve this, we added some JavaScript code that will automatically calculate the height for the SVG logo once it’s imported to your website. After that. the height will be calculated based on the logo width you set in the customizer. You can find more details about this in our Blog article.

This SVG logo improvement will be reflecting on a standard and transparent header. This issue was not present with the sticky header logo.

How To Fix This?

For all new websites, the SVG logo improvement will be applied automatically. Once you upload the SVG logo and set the logo width, the height will be automatically calculated and saved. On the other hand, if you already have a website with an SVG logo, you’ll need to make some minor changes.

We didn’t apply this improvement to existing websites to avoid any potential issues that could have appeared. In some cases, applying this improvement automatically to logos already in use could result in unwanted changes.

To apply this improvement to your website, please follow these steps:

Step 1 – Navigate to Customizer > Header > “Site Identity & Logo” widget;

Step 2 – Update/edit the logo width value

Step 3 – Click the “Publish” button to save the changes. 

Based on the width you just updated, the logo height will be automatically calculated and saved in customizer settings. This will apply improvements to the SVG logo used on your website.

On the other side, having the Gutenberg plugin additionally installed could cause some issues with your website. One of these issues is that you might not see any of the settings when you open Astra Customizer.

This article explain why this happens and how to fix it.

Why Is This Happening?

Since the Gutenberg plugin is intended to be used just as a testing ground, it is not recommended to use it on your live website. The stable Gutenberg versions are integrated into your WordPress installation and updated with each WordPress update.

Furthermore, if you have “Experiments” options activated within the Gutenberg plugin, this could have some additional effects on your website, as these are WordPress experimental features and can be changed at any time.

How To Solve This Issue?

As mentioned the Block Editor is built into WordPress since version 5.0, and there is no need for the Gutenberg plugin to be installed.

If you experience issues, please follow these steps:

Step 1 – Navigate to Dashboard > Plugins and check if you have the Gutenberg plugin installed.

Step 2 – If so, please deactivate the plugin. Check for any issues.

Step 3 – Delete the plugin.

If you have used Gutenberg to create advanced designs using the experimental features they might go missing as you remove the Gutenberg plugin.

We would highly recommend using the Gutenberg plugin only if you wish to test some experimental features. It would be best if you did this in your testing or staging environment.

We suggest that you don’t use any of these experimental features on your live website, as most of the stable Gutenberg plugin features will be available by default in the WordPress Block editor.

In addition, if you are facing issues with any of the upcoming block editor features in the beta versions of WordPress, please let us know. You can contact us by opening a support ticket with us, and our team will get this fixed.

These functions are used to check whether a character or string falls into a certain character class. You can find out more about these functions here.

Usually, the ctype_xdigit function comes bundled with other ctype functions as a part of the default PHP installation. Some hosting companies might leave the ctype_xdigit function out.

How to resolve this?

As mentioned, this is related to the functions included in PHP version your host installed on your server. Thus, the solution for this is contacting your hosting provider and asking the host to re-/enable the ctype_xdigit function for your website.

This is not to be mixed with your Site cache or your browser cache. The Astra Cashe actually means that all CSS and JS from all Astra addons are combined into a single Js and CSS file. This gets cleared after you toggle any addons or make any changes in the customizer.

To resolve the same please follow one of these two steps –

1. Save Astra’s Customizer settings
2. Activating/Deactivating a module from the Astra Options page

Steps to Save Astra’s Customizer settings

Step 1: Visit the WordPress Dashboard > Appearance > Customize

Step 2: Modify some settings and Publish/Update the Customizer Settings.

Step 3: Hard Refresh using Ctrl + Shift + R / ⌘ Cmd + Shift + R on the concerned page and confirm if it resolves the issue.

Steps to Activate/Deactivate a module from the Astra Options page

Step 1: Visit the WordPress Dashboard > Appearance > Astra Options

Step 2: Besides the Available Astra Pro Modules — Deactivate and Activate one of the Pro modules.

Step 3: Hard Refresh using Ctrl + Shift + R / ⌘ Cmd + Shift + R on the concerned page and confirm if it resolves the issue.

Keep in mind that these options refer only to Astra Cache. If you made some changes to your content or changed some Customizer settings, and you don’t see the changes on your front end, you might still need to clear your Site cache and your browser cache.

Related Articles

How to Clear WordPress Cache?

Types of Issues / Errors for which this document is valid –

1. Class is not found – WP_Image_Editor_Imagick
2. Call to undefined method WP_Image_Editor_Imagick::get_error_message()
3. wp_options table is bloated with entries like this – wp_addon_database_migration_batch_4935ee10bd16fca38a7cb9a9f5904d

In the above cases, there might sometimes be a conflict with the specific servers. For such cases you can disable Image Processing from Astra using the below filter.

You can use the following filter in the child theme’s functions.php –

add_filter( 'astra_image_resizer', '__return_false' );

What To Do Before Updating

Before updating, be it Astra Theme, Astra Pro addon, WordPress installation, or any other plugin on your website, please follow these steps as they should help your updates go smoothly:

1. Keep your auto-updates off – this includes WordPress, your Astra theme, and all plugins. Though it may be easier to have automatic updates, this can create issues with your website and even bring it down. To ensure that you have control over your updates, we would suggest keeping these turned off and doing your manual updates regularly.

2. Always make a backup before updating – before any update, you should make a backup of your website. Though the updates for the majority of themes and plugins are tested before being released, there is no guarantee that these will work perfectly in every situation. There is always a possibility of an issue arising from some plugins or theme updates, and having a backup will keep you safe from losing any data. If you end up with a hard-to-solve issue, you can always restore your website from your backup. Please check this article for more information on how to backup your website.

3. Avoid beta versions unless you know what you’re doing – though it may be tempting to test the newest version and features of plugins and themes as soon as they are available with the beta release, these are not stable versions and can cause additional problems. Thus, if you’re not an experienced user, it’s better to wait for a stable version. You can of course test beta versions on your test site or local environment.

4. Use staging environment – do all of your updates on your staging site. The staging site is the exact copy of your live (production) website where you can do all updates and tests without affecting the live environment. This will ensure that you can do your updates safely and that if any issues arise this will not affect your users or cause downtime. Once the updates are done and any potential issues are resolved, you can sync your staging environment with your live website and transfer the updated website. You can do this by using some of the staging plugins or manually using your localhost. Some hosts also offer the staging environment as part of their service. Please check this article for more information.

Common Issues After Updating

1. Clear your cache – sometimes though the update went well, it seems that the changes are not reflecting on your front end. Most often, this is related to the cached version of your website. Try clearing all of your caches – keep in mind that you should clear both your website cache and your browser cache, as well as server cache as sometimes your host may provide a server caching, or you might be using a content delivery network (CDN).

2. White Screen of Death – one of the most common WordPress errors that can happen after an update is for you to find yourself locked out of your website with only an empty white page showing on your screen or the “There has been a critical error on your website” massage. This is known as White Screen of Death. It problem can affect your whole website or just a part of it. Check this article for the instructions on how to fix this.

Issues Related to Updating Astra Theme and Astra Pro Addon

Are you facing issues while updating the Astra theme or Astra Pro Addon? We have listed down some issues users face and have provided the corresponding solution for the same. 

Please note that if everything else fails, you can ultimately update the theme or plugin manually. You won’t lose any of your data or settings while updating manually. How to Manually Update the Theme and Plugin?

Update Notification Not Available

Sometimes users might not see any update notification for the Astra theme or Astra Pro Addon plugin. To fix this issue for the Astra Pro Addon plugin you need to make sure you have the license for the plugin active. 

To re-authorize your license key, go to Appearance > Astra Options > Astra Pro License and paste the license key and click the Activate License button under your license key field. How to activate Astra Pro Addon license?

After that, visit the Updates page of the WordPress Dashboard and force check using the Check Again button a couple of times.

Or you can directly force check by visiting the following link a couple of times –

<your-site>/wp-admin/update-core.php?force-check=1

This would display any updates if they are not being rendered for your plugins page or themes page.

Update the respective Astra theme and Astra Pro Addon and you will be on the latest versions.

The Package Could Not Be Installed

While trying to Upload the plugin are you seeing the following error – Package could not be installed. The theme is missing the style.css stylesheet.

We have a detailed article on the same here.

PCLZIP Error

Are you seeing an error while updating the Astra Pro Addon plugin – Update Failed: The Package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10): Unable to find End of Central Dir Record Signature.

This issue could be most probably due to zip format or due to the Server Disk Space issue.

We have a detailed article on the same here.

If the issue still persists, you can update the plugin manually to fix this issue, how?

Unable to Upload the Plugin from WordPress Dashboard

Are you on a live server and hosted on a server other than Windows? It could be possible that you do not have the correct permissions to upload the plugin.

So, to fix this issue you will need to contact your hosting service provider and ask them to make sure that you have the permissions to upload/remove/change files on the server through WordPress.

After your permissions have been updated you will be able to upload the plugin without any issues.

Fatal Error: Allowed Memory Size of Xxxxxxx Bytes Exhausted

This error could be due to numerous issues.

Mainly it could be due to the Memory Limit issue.

A quick fix for this problem could be by increasing your PHP memory limit. You can do that by adding this line to your wp-config.php file which can be found under your root WordPress folder, below the line. /* That’s all, stop editing! Happy publishing. */  –

define(‘WP_MEMORY_LIMIT’, ‘256M’);

If you do not have access to the files you can get in touch with the server admin or hosting provider so that they can make the necessary changes.

Manually Update the Theme and Plugin via Dashboard

Apart from the above issues, if any of the above solutions don’t work, you can always manually update the theme or plugin via FTP.

And the same goes for the plugin via the WordPress Dashboard, for this, you will have to visit the wp-content > plugins.

After that, you can remove and replace the existing Astra Pro Addon folder with the Astra Pro Addons’ unzipped file. This will install the Astra Pro Addon plugin on your website. Now visit the WordPress dashboard and activate the plugin from the Plugins > Installed Plugins.

Note: You won’t lose any of your data or settings while doing the same. This is the same process WordPress adopts but we are doing it manually.

You can create a staging site and perform basic debugging steps. But to check conflicts on the production/live site we strongly recommend to use Health Check & Troubleshooting plugin. 

Basic troubleshooting steps

Step 1: Switch the theme temporarily to standard WordPress theme like Twenty Nineteen. 
Step 2: If the issue still persists, deactivate all plugins for some time.
Step 3: If the problem is solved, activate the original theme and plugins again one by one until the problem returns. This will help you identify what is causing it.

If you’re concerned the debugging process might break your website, take a backup. 

Troubleshooting with Plugin (Recommended)

 Health Check & Troubleshooting plugin allows –

• Testing conflict with theme or plugins without affecting the view of your site.
• Shows your PHP and MySQL versions.
• Allows assembling information about WordPress and server configuration.
• Troubleshooting mode allows deactivating and activating theme/plugin without affecting the visitor’s view for your site. This mode also shows the Notices on the site. 

How to Use This Plugin?

Step 1: Install and activate the Health Check & Troubleshooting plugin like any other WordPress plugin. This plugin is free and available on WordPress.org
Step 2: Go to Dashboard > Tools > Site Health
Options are available under different tabs. 

Previously the plugin used to display more tabs, but with WordPress 5.2 update, many of the features are available in the Core WordPress. Here’s an article on the same.

What Plugin Offers?

Troubleshooting Mode
Allows testing conflict cause and detects a particular theme or plugin causing it. You can debug things without affecting visitors’ view. This mode will be visible to you only. 

Tools 
File Integrity – This is a security check that will compare WordPress files on the server with those delivered from WordPress.org If any files in WordPress are modified for the illegal purpose, it will be tracked using file integrity check

Mail Check –  Sometimes there can be the error in Contact Form not sending emails. This option allows you to check if mail is successfully sent from the site or not. If this check shows error there might be a problem in the server configuration.

Plugin Compatibility – Using this feature it will attempt to identify the compatibility of your plugins before upgrading PHP. The compatibility check may not always be accurate, and you may want to contact the plugin author to confirm that things will continue working.