Why this is happening?

Basically, we have added theme support for Rank math breadcrumb in Astra which is why the plugin makes the breadcrumb setting disable in the latest version of the Astra theme.

How to fix this?

To fix this issue, you will need to add the following filter to the functions.php of your website. If you are not sure how to add custom PHP codes to your website, here is an article that will guide you.

add_filter( 'astra_rank_math_theme_support', '__return_false' );

Please note that we highly recommend you take a backup of your site before making any changes to your functions.php. Here is an article that will help you take a quick backup of your website.

You can modify this tag to any other HTML tag by adding a filter to the functions.php file of your Astra Child Theme. If you don’t have a Child Theme installed and activated on your website, please check this article on how to do this. 

How Can I Do This?

You can use the filter below to change the Post Title’s Tag of the Related Post Section to any other tag. Please follow these steps:

Step 1 – Navigate to Dashboard > Appearance > Theme Editor and select the Child Theme;

Step 2 – Add the filter below to the functions.php file of your Child Theme. You can check this article on adding code to your Child Theme to help you out;

add_filter( 'astra_related_post_title_tag', 'update_related_posts_title_tag' );
function update_related_posts_title_tag(){
    return 'span';
}

Step 3 – The span in the code above can be changed to any preferred tag. If you add return ‘h4’; , click the “Update File” button to apply changes. The filter will change the default <h3> tag to the <h4> tag.

Default Tag

Post Title’s Tag of the Related Post Section after adding the Filter

If you have a WooCommerce website built using the Astra theme, and whenever you are logging into the WooCommerce – My Account, you need to provide the Username/ email address and Password. A password field provides a way for users to securely input a password by showing the * character instead of the actual characters.

However, it is likely that some users will type the wrong password. To help them see the password that they’re currently entering, the eye icon beside the password field will toggle the password visibility. This is a very useful feature you should have on your login form.

Previously the eye icon for show password was not visible.

So, to make the show password eye icon visible, you need to place the following code in the functions.php file.

add_filter( 'astra_get_option_woo-show-password-icon', '__return_true' );

After adding the above filter, the Show Password eye icon will be visible.

This is a premium feature available with the Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Prior to the Astra Pro v3.9.2, you can see 5 Gallery layout options for WooCommerce Single Product. Have a glance at the below-attached screenshot once for a better understanding.

On a fresh new installation, with Astra Pro v3.9.2, the first two Gallery Layout are missing.

This is because we have deprecated legacy layouts. To get the Single Product’s legacy Gallery layouts back, you can make use of the below-attached filter. On adding the following filter in the functions.php file, you can see the 5 Gallery layout options.

add_filter( 'astra_get_option_astra-product-gallery-layout-flag', '__return_false' );

Navigate to Appearance > Customize > Header builder > Cart. Here, you can select the cart icon from the available 3 options.

In case you want to add the CSS Astra cart icons, you need to add the following custom code to the functions.php file.

add_filter( 'astra_woocommerce_cart_icon', '__return_false' );

After adding the above filter, the cart icons customizing options would look like this.

If you previously prepared any “Single Product” layout (v3.9.0), you could face the gallery layouts missed on the front-end single product page. Keeping in mind the popular page builder themer layouts, we fixed this issue in our last v3.9.2 update. But if you still come across the situation where this gallery layout is not required on your single product layout on the front end, you can use the newly added filter.

So here is the filter to disable those custom galleries and let the layout/custom layout work as per their way.

add_filter( 'astra_addon_override_single_product_layout', '__return_false' );

To fix this add the following code to child theme’s functions.php file.

/**
* Function to disable the transparent header below 800px screen
*
* @return void
*/
function disable_transparent_header_mobile() {
    ?>
    <script type="text/javascript" >
    jQuery(window).on('resize', function(){
        if ( '800' >= jQuery( window ).width() ) {
            if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );
            }
        } else {
            if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );
            }
        }
    });
    jQuery( document ).ready(function() {
        if ( '800' >= jQuery( window ).width() ) {
            if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );
            }
        } else {
            if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );
            }
        }
    });
    </script>
    <?php
}

add_action( 'wp_footer', 'disable_transparent_header_mobile' );

Important Note: Please replace 800 with the Menu Breakpoint width you setup in the customizer.

Now, there are several ways that you can use to insert custom CSS and javascript in your website; however, in this document, we will share some of the best practices.

What is custom CSS?

Cascading Style Sheets, or CSS, is a way to add styling directives to the back-end code of your website. It’s a crucial component of your website that establishes its appearance and feel. Your website will just be a collection of unattractive scripts without CSS.

When you install a theme or import a template, a Style.PHP file is created on your website. This is where the code that tells WordPress on how your website should look, will be saved. When you override the existing look of your website by using customized code and save it in the style. css file, those codes are called custom CSS.

What is a JavaScript Query?

Javascript is a scripting language that enables you to do just about everything, including creating dynamically updated material and managing multimedia. It is remarkable what you can accomplish with a few lines of JavaScript code. To answer simply. Javascript adds the functions to your website.

Method 1: Inserting the Custom CSS and JavaScript to your website directly

By default, WordPress creates <Style> tags for the CSS and <Script> tags for the JavaScript Queries. So, if you are inserting any internal CSS, you will need to wrap that up within the <style > tag and for the internal JavaScript queries, you will need to wrap it up within the <script> tag. For example, the WordPress will understand that the following code is a CSS and will make all the header 1 and header 2 have a background color of the color code #7bdcb5.

Add_action( ‘admin.head’, ‘custom_internal_css’);
Function custom_internal_css(){
<style>
.h1, h2 {
background-color: #7bdcb5;
}
</style>;
}

Now if this is a JavaScript query, we will need to wrap it up with the <script> and </script> tags. For example, 

add_action( 'astra_entry_before', function() {
	<script>
	add_filter( 'astra_get_option_enable-related-posts', '__return_true' );
	</script>;
} );

WordPress will understand that this is a Javascript code and it enables the related post option on your website.

If you are inserting an external code which is not there on your theme or website, you must use the action hook

wp_enqueue_scripts

You can not just print <script> or <link> tags inside these hooks, you have to use special functions, such as

• wp_register_script() / wp_register_style()
• wp_deregister_script() / wp_deregister_style()
• wp_enqueue_script() / wp_enqueue_style()
• wp_localize_script()
• wp_add_inline_script()

There are more functions like this on the WordPress directory; however, generally using these hooks are enough. For an example, 

add_action( 'wp_enqueue_script', function() {
	Wp_enqueue_script( add_filter
{'astra_get_option_enable-related-posts', '__return_false' 
};
} );

Method 2: Using the Astra Hooks plugin

You can also do this using a simple plugin named Astra Hooks that we have developed. You can download this amazing free plugin from here. Astra uses the WordPress Hooks API to insert actions throughout the theme. This plugin allows you to “hook” your custom Content, Shortcodes or Java Script code in the various hook locations. You can learn more about this plugin here.

If you are looking to disable the spacing and would like to get the old look of the streched layout, you will need to add the following filter to the function.php file of your child theme.

add_filter( 'astra_stretched_layout_with_spacing', '__return_false' );

This is how it will look after adding the above code to the function.php file of your child theme.

If you are not sure how to add the code to the function.php file, here is an article that will guide you through. If you are not aware what is a child theme and how to install a child them, here is an article that will be helpful.

How To Remove Google Fonts Suggestions?

To remove Google Fonts suggestions from the Customizer.

You can insert the following filter in your child theme’s functions.php file –

add_filter( 'astra_google_fonts', '__return_empty_array' );

If you don’t have your Child Theme installed, please check this article on how to do it.

If you are not sure how to add this code, please check this article.