How to Remove Border Around the Cart? (Issue After Updating to Astra 3.4)

How to Remove Border Around the Cart? (Issue After Updating to Astra 3.4)

After updating Astra to version 3.4, are you observing a border around the WooCommerce or EDD cart in the Header, though it wasn』t previously set? Just like shown in the screenshot –

If yes, this article will help you understand why it is happening and how to fix it –

Why?

One of the changes that came with Astra theme version 3.4.0 was – Deprecated the Cart Style 『None』 & merged it with the existing option 『Outline』 for WooCommerce and EDD.

What does this mean?

Astra offers an option to add cart in the header. When you add cart, you will observe styling options under Design tab.

Prior to version 3.4, cart had three styling options – None, Outline and Fill. With Astra 3.4, 『None』 option was deprecated and was merged with 『Outline』 style. This style adds a border around the cart. So if you have set cart style to none, it will be replaced with outline and will add a border around cart.

This is why you see border around the cart as you update Astra to 3.4

How to fix?

Astra Pro version 3.4.2 comes with a solution for this by providing a new 『Border Width』 option for the Cart element. With this new option, you will be able to set the width of your Cart border, as well as remove it.

So if you wish to remove this border just set width to zero.

You can visit customizer and go to Header Builder > Cart > Design > Style > Border Width and set it zero.

Note:

1. Make sure to update the Astra theme to version 3.4.3 and Astra Pro to version 3.4.2 to use the new cart border option. 2. Only Astra Pro users might face this issue of a cart border. Free Astra users won』t face this issue.

How to Fix the 406 Error While Importing a Starter Template?

How to Fix the 406 Error While Importing a Starter Template?

While importing any template from the Starter Templates library, are you getting 『406 Not Acceptable』 error? If yes, this article will help you understand why it showed and how to fix it. 

Why Do You See This Error? 

While importing any template, your website needs to make a connection with the Starter Templates server. If your website doesn』t  accept connection with the Starter Templates server, you will get a 406 error. 

One of the reasons for this error is the website firewall which is blocking access to the Starter Templates server. 

How can you fix this?

As mentioned, this issue is related to your firewall. For the import to work, you need to make modifications that would allow the connection to go through. This can be done by your host or you can make modifications to your website yourself.

Contact your host

If you are not sure about modifying the website files yourself, we would suggest you contact your hosting provider to do this for you. This is the email template that you could use:

E-mail Template:

Hello,I』m building a WordPress website using the Astra theme. I』m trying to import a template using the 「Starter Templates」 plugin (https://wordpress.org/plugins/astra-sites/), but the process keeps failing. Here is the error notice I am receiving – Error: 406 Not AcceptableCan you please take a look? I』m looking forward to hearing from you.Thank you.Regards,Your name

Fix this yourself

To fix this issue yourself, you would need to edit your websites』 .htaccess file to disable the mod_security firewall.

Once you access your .htaccess file, you need to update (or add) the code between the 「Begin WordPress」 and 「End WordPress」 tags to match the one below:

 
RewriteEngine On 
RewriteBase / 
RewriteRule ^index.php$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.php [L] 

There are several methods of editing your .htaccess file – either by using some plugins or using the FTP client and code editor. Choose one of the methods below which fits you the best.

Before making any changes to your .htaccess file, please create a complete backup of your website. Also, it is advisable to make a copy of the original file before editing it – in case something goes wrong you can always use this original file to start over.

Method 1 – edit the file using the 「Yoast」 plugin

Step 1 – Log in to your websites』 Dashboard

Step 2 – Navigate to the Dashboard > SEO > Tools

Step 3 – Click on the 「File Editor」

Step 4 – Edit the code in the .htaccess section and save changes

Step 5 – Try importing the starter template again

Method 2 – edit the file using the 「Rank Math」 plugin

Step 1 – Log in to your websites』 Dashboard

Step 2 – Navigate to the Dashboard > Rank Math > General Settings

Step 3 – Click on the 「Edit .htaccess」

Step 4 – Edit the .htaccess code and save changes

Step 5 – Try importing the starter template again

Method 3 – edit the file using the 「WP Htaccess Editor」 plugin

Step 1 – Log in to your websites』 Dashboard

Step 2 – Navigate to the Dashboard > Plugins > Add New

Step 3 – Install and Activate the WP Htaccess Editor plugin

Step 4 – Navigate to the Dashboard > Settings > WP Htaccess Editor

Step 5 – Edit the .htaccess code and save changes

Step 6 – Try importing the starter template again

Method 4 – edit the file using the FTP client

For this article, we』ll use the FileZilla FTP client, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use). Let』s start:

Step 1 – Add your FTP access data to FileZillas』 Site Manager

Step 2 – Connect to your server

Step 3 – Navigate to your websites』 public_html (root) folder. Here you should find the .htaccess file. 

Do have in mind that the .htaccess file may be hidden so once you access your root directory using the FTP client, make sure you check the folder for the hidden files too. 

Now that you have found your .htaccess file, follow these steps to edit it:

Step 4 – Right-click on the file and select 「Download』 to copy the file to your computer.

Step 5 – Edit the file on your computer using some of the code editors like Sublime Text or Notepad++ (don』t use word processors like Microsoft Word or Google Docs for this). Open the file and add the code mentioned above. Save the file. Step 6 – Once you modified your file, just upload the file back to your server (using the FTP client) replacing the original file with this modified one, and your new values will become active.

How to Deal with Update Issues in Astra Theme and Astra Pro Addon?

How to Deal with Update Issues in Astra Theme and Astra Pro Addon?

Updating your WordPress, theme or plugins can sometimes be a frustrating experience due to possible errors and issues that can affect your website.

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:

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.

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.

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.

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

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).

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?

What Update Issue Are You Facing?

Update Notification Not AvailableThe Package Could Not Be InstalledPCLZIP ErrorUnable to Upload the Plugin from WordPress DashboardFatal Error: Allowed Memory Size of Xxxxxxx Bytes ExhaustedManually Update the Theme and Plugin via Dashboard

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 –

/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.

Optimize Astra HTML and CSS – For Existing Astra Users (Before v3.3)

Optimize Astra HTML and CSS – For Existing Astra Users (Before v3.3)

Astra brings major performance improvements in version 3.3. In this version, we have optimized HTML and CSS on the page. This reduces the page size and brings faster loading time for pages in the frontend.

Here is a complete list of pages that are made faster with this optimization –

Latest Blog PostSingle PostAll Archives (including blog archive, category archive, tab archive, author archive, pagination, and so on.)WooCommerce – Shop Page and Single Product PageEasy Digital Downloads (EDD) – Single Product PageLifterLMS – All Courses and Single Course PageLearnDash – All Courses and Single Course Page

Users those are starting to use Astra directly from this version, would get new speed improvements directly on their websites.

But existing users – those who are already using Astra and updating it to v3.3 – will not see these improvements directly on the website.

Why?

The main reason is not to disturb exiting websites』 layout, structure, and design. In the process of HTML and CSS optimization, we have merged some code and removed an extra one. If we implement this directly on existing websites some of the design might get affected by this. Any custom code written on removed HTML divs or CSS classes might not work.

So to avoid such issues, we haven』t implemented new code directly on existing websites.

But you can certainly get this optimizations on your wbesites with a simple filter code.

How?

Below is a custom code that you can use to apply HTML and CSS optimizations on your website.

But before using code –

Make sure you have Astra theme and Astra Pro updated to version 3.3Take a backup of your website

Paste the following code in your child theme』s functions.php file.

add_filter( 'astra_apply_flex_based_css', '__return_true' );

Done!

Gutenberg Plugin Causing Issues With the Astra Customizer

Gutenberg Plugin Causing Issues With the Astra Customizer

The WordPress default Block Editor, also known as Gutenberg, works great with Astra Theme and Astra Pro.

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.

How to Resolve Fatal Error: Call to Undefined function ctype_xdigit()

How to Resolve Fatal Error: Call to Undefined function ctype_xdigit()

If you』re getting a fatal error notification that begins with the following description 「Uncaught Error: Call to undefined function ctype_xdigit()」 , that means that the ctype_xdigit function is missing from PHP version installed on your hosting.

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.

About Icons Font That Comes with Astra

About Icons Font That Comes with Astra

Note:

Since version 3.3, Astra theme default font icons have been replaced by SVG icons. When SVG support is enabled, the astra.woff file and the icons mentioned in this document are not loaded anymore. You can find out more information details in this article.If you still wish to use these icons, you need to disable the SVG support.

Astra comes with a custom lightweight & beautiful icon font. All icons used in the theme are shown in this library.

You can find each of the font-icons available with Astra and its CSS class described below-

Icon
Content
CSS Class

.
e900
astra-icon-down_arrow

.
e5cd
astra-icon-close

.
e25d
astra-icon-drag_handle

.
e235
astra-icon-format_align_justify

.
e5d2
astra-icon-menu

.
e8fe
astra-icon-reorder

.
e8b6
astra-icon-search

.
e56b
astra-icon-zoom_in

.
e901
astra-icon-check-circle

.
f07a
astra-icon-shopping-cart

.
f290
astra-icon-shopping-bag

.
f291
astra-icon-shopping-basket

.
e903
astra-icon-circle-o

.
e902
astra-icon-certificate

Here is a screenshot that shows how the default added icon appears.

Could not store XML file in /wp-content/ folder?

Could not store XML file in /wp-content/ folder?

One of the reasons why your Starter Templates import could fail can be storing the XML file. To import the template content, WordPress needs to store an XML file in the /wp-content/ folder. In this case, you might see an error that says something like this:

Looks like your host could not store XML file in /wp-content/ folder.

The reason for this could be that your host is offloading /wp-content/ folder to a third party server. This basically means that the content is stored in some other place, for example a cloud storage.

Since storing XML file is a requirement of WordPress itself, unfortunately, there is no workaround here.

You will need to get in touch with your hosting provider and see if they can disable offloading /wp-content/ folder to a third party server temporarily.

Blog / Archive

Blog / Archive

An archive is a common terminology when it comes to Blog settings. Well to start off, 「Archive」 means the collection of data. The archive page is a collection of posts grouped by category, author, date, tag, etc.The search page is also an Archive page.

You can find the setting under Appearance > Customize > Blog > Blog / Archive

Under Blog / Archive there are total 4 settings:

Blog Post ContentBlog Post StructureBlog MetaBlog Content Width

Blog Pro module available with Astra Pro adds more options in the customizer for the blog layouts.

Blog Post Content

The written matter on a blog means the blog post content.You can manage the content in the following manner:

Full Content

Where the entire write-ups or the copy matter written for a blog post is visible on the archive page.

Excerpt Content

Excerpt content means displaying a short extract of the content, where the count of words is restricted. The default length is 55 words.

Note: If you have entered the excerpt content from the blog excerpt area it will overwrite the current excerpt.

Blog Pro module available with Astra Pro gives you options to control the word count.

Blog Post Structure

Blog post structure helps you in managing the featured image, title, and the blog Meta.You can hide the featured image for your blog posts.

In the same way, you can hide the Blog meta settings

Note: When you turn OFF the title and blog meta settings, option for Blog Meta disappears.

You can even swap the position of the image and meta settings with a simple drag-drop method.

Blog Meta

Blog meta is all about the in-short description explaining what the blog is all about. It gives extra information about the blog.Where the author has control to show/hide the number of comments received, the category the post, who is the author, the publish date and the tags.

Note: For managing the categories, tags and publish dates you will have to edit the individual post from the backend of WordPress.

Blog Content Width

Just the way you have the option to manage the container width of your website, you have an option to manage the container width of your blog page.

Typography

You will be able to set the Typography of the Archive Title and Post Title from the settings under this option.

Note:

The Archive Title settings are not applicable to the Blog Archive page title.

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the Blog Pro module of Astra Pro Addon.

How to Replicate the Astra Screenshot?

How to Replicate the Astra Screenshot?

When you view the Astra theme on WordPress.org you see a nice screenshot for the theme like above. You can replicate this screenshot easily. This article explains this process in detail.

Table Of Contents

Import Screenshot TemplateDesign screenshot ManuallyInstall ThemeStart Designing the ScreenshotDesign HeaderAdd Page Content

There are two ways to create this screenshot –

Import a template (Recommended) – This is an easy process where you can import a ready template and a screenshot will be available on your website. Design screenshot Manually – If you prefer manually designing screenshots from scratch you can do so with easy steps.

Let』s understand both processes –

Import Screenshot Template

You can quickly import a template for Astra screenshot with Starter Templates plugin. You can import it and then tweak it as required. To view the template click here.

Follow the below process to import the template.

Step 1 – Install Starter Templates plugin. Its available for free on WordPress.org

Step 2 – Choose Gutenberg as choice of page builder and search for Web Design Agency in library.

Step 3 – Click on the template and click to import it.

And you are done. Imported template will be available on separate page. You can edit it and tweak it as required.

Design screenshot Manually

Here are steps to design screenshot from scratch using Astra.

Install Theme

The first step would certainly be to install the Astra theme. After installation, make sure you activate the theme. 

Start Designing the Screenshot

To get started, create a new page and set it as a Homepage. To set a page as a Homepage, go to Settings > Reading > A static page > Homepage – select a newly created page from the drop-down.

Now, you can design screenshot in two sections –

HeaderPage content

Design Header

This section contains the logo, navigation menu, and social share icons.

You can design a header from Astra customizer settings. From dashboard head over to Appearance > Customize > Header Builder.

This will open up Astra』s advanced visual header builder. You can add all header sections with this builder easily – 

Note – We will be using a Transparent Header on this page. It can be enabled only for this page from page meta settings. The later part of this article will explain more about it. 

You can edit the Transparent header settings from customizer under Header Builder > Header Types > Transparent Header. 

Here is a video that explains how to customize the header –

1. Add Logo – Click on the middle left box – this is a primary header』s left section. A popup will open up with all available elements. Choose Logo from this list. Now click on the logo element, add the logo and adjust the width. 

If you want a different logo on Transparent Header, you can set it under Header Types > Transparent Header. 

2. Add Primary Menu – Create a menu that you wish to display in the header. Now click on the middle section of the primary header and from the popup select Primary Menu. You can set colors for the menu from the design tab.

3. Add Social Icons – Click in the right section of the primary header, and from the popup select Social from the popup. Add Facebook, Twitter, Instagram, or any other social icons you need. Set style from the design tab. 

Add Page Content

There are two sections on the page. Edit the page with Gutenberg editor and start building these sections.

Design First Row (Your idea matters!)

Step 1 – Add the Cover block offered by the Gutenberg editor.

Step 2 – Edit the Cover Block. Set the height 0f 740 px and overlay color with gradient. (If you need exact color codes fro gradient here they are – #07018f and #8404ce).  

Step 3 – In the Cover section, add a Group block.  

Step 4 – Inside Group block add Media & Text block. In this block select layout to display media on the right and content on left. 

Step 5 – In the content section, add the Heading block, set the H1 heading, and add text. Set color from block settings. 

Step 6 – Below the heading, add Spacer block with 20 px height and then add Button block. For button set text, link, and colors from block settings. 

Step 7 – In the right section – media section, add an image. 

Design Second Row

Step 1 – Add a Group block. Inside it add a Columns block with 4 columns. 

Step 2 – Inside each column add Image, Heading, and Paragraph blocks. Then add image, heading, and text in a paragraph. 

Page Settings 

Astra offers page-specific settings that help you to control the display of page meta for individual pages. 

In the right settings sidebar, find section – Astra Settings. 

From here set – 

Sidebar – No SidebarContent Layout – Full Width/ Contained  Disable Title Disable Breadcrumb Disable Featured ImageTransparent Header – Enabled 

This will merge your page content with your header designed with Header Builder. 

Done! 

Publish the page and visit the frontend to see the design.