The Astra Button Presets are premade sets combining different Customizer settings, which you can use to style your buttons. Furthermore, you can apply these presets to any of your website』s buttons with just one click. This feature is available with the Astra Theme version 3.7.0 and later.

You can find the Button Styles section at Appearance > Customize > Buttons.

What Are Button Presets?

Each preset contains different button settings like padding and border radius, text, background, and border color. These presets provide different button styles for you to choose from.

Once a preset is applied, it will automatically apply all settings for that button. Thus, you don』t need to do the settings over and over nor add CSS manually to design multiple buttons. Just choose a style you wish to apply, and that』s it.

How To Use Button Styles?

Follow these steps to apply your button styles:

Step 1 – Navigate to Appearance > Customize > Buttons

Step 2 – Click on the desired Button Style. You can try them all. Applying the new presets will change all button settings to adjust it to the selected style.

Step 3 – If needed, you can modify these buttons after the style is applied.

Step 4 – Click the 「Publish」 button to save the changes.

If you need to revert the button style, you can use the 「Reset」 button:

As a shop owner, you might want to change the Quick View text. In this article, we will be seeing how to change the Quick View text using a filter.

In our WooCommerce Addon, as you can see we have the option to display the Quick View text based on the position which you have selected from the Astra settings.

So below are the filter based on the position to change the Quick View text –

1] For 「On Image」 position, you can use the following filter –

/**
* Change Quick View text from the shop page (for on image button option)
*
*/

add_filter( 'astra_woo_add_quick_view_text_html', 'astra_woo_add_quick_view_text_html_func', 10, 3 );

function astra_woo_add_quick_view_text_html_func( $button, $label, $product_id ) {

global $product;
$product_id = $product->get_id();

$label = __( 'Buy Now', 'astra-addon' );
$button = '' . $label . '';

return $button;
}

Here』s how it would display Before and After using the above filter –

Before –

After –

2] For After Summary position, you can use the following filter –

/**
* Change Quick View text from the shop page (for after summary option)
*
*/

add_filter( 'astra_woo_add_quick_view_button_html', 'astra_woo_add_quick_view_button_html_func', 10, 3 );

function astra_woo_add_quick_view_button_html_func( $button, $label, $product_id ) {

global $product;
$product_id = $product->get_id();

$label = __( 'Buy Now', 'astra-addon' );
$button = '

';

return $button;
}

Here』s how it would display Before and After using the above filter.

Before –

After –

Note:

1. The above filter will change the 「Quick View」 text to the 「Buy Now」 text. You can update it as per your requirement.2. Paste the above code in the child theme』s functions.php file.

Sometimes you might need to change the navigation (Previous and Next ) links to text on the single blog post. Default strings for navigation links will be – Previous Post and Next Post. You can change it using the following filters.

1. Replace default navigation strings with next/previous post titles

The following filter will fetch the Previous and Next post title and will display them as navigation links.

add_filter( 'astra_single_post_navigation', 'astra_change_next_prev_text' );

/**
* Function to change the Next Post/ Previous post text.
*
* @param array $args Arguments for next post / previous post links.
* @return array
*/
function astra_change_next_prev_text( $args ) {
$next_post = get_next_post();
$prev_post = get_previous_post();
$next_text = false;
if ( $next_post ) {
$next_text = sprintf(
'%s →',
$next_post->post_title
);
}
$prev_text = false;
if ( $prev_post ) {
$prev_text = sprintf(
'← %s',
$prev_post->post_title
);
}
$args['next_text'] = $next_text;
$args['prev_text'] = $prev_text;
return $args;
}

2. Replace default navigation strings with custom text

The following filter will replace Previous and Next links with your custom text. You can replace your text with – 『My Previous Custom Text』 and 『My Next Custom Text』 in the following filter code.

add_filter( 'astra_single_post_navigation', 'astra_change_next_prev_text' );

/**
* Function to change the Next Post/ Previous post text.
*
* @param array $args Arguments for next post / previous post links.
* @return array
*/
function astra_change_next_prev_text( $args ) {
$next_post = get_next_post();
$prev_post = get_previous_post();
$next_text = false;
if ( $next_post ) {
$next_text = sprintf(
'%s →',
'My Next Custom Text'
);
}
$prev_text = false;
if ( $prev_post ) {
$prev_text = sprintf(
'← %s',
'My Previous Custom Text'
);
}
$args['next_text'] = $next_text;
$args['prev_text'] = $prev_text;
return $args;
}

Note: Add the above code in the child theme』s functions.php file.

Astra Pro Addon offers the option to set a background image for the header. This image is added using CSS background-image Property. This property does not have an option to add an alt attribute to the image.

So as an alternative to the alt attribute, we can add a title attribute to the div. This will act as an alt text in the background-image property.

The following filter will add a title attribute to the div of the header, where the background image is added using CSS property.

add_filter( 'astra_attr_main-header-bar', 'astra_function_to_add_title' );

/**
* Add Attribute to the Header.
*
* @param array $attr Default attributes.
* @return array $attr Modified attributes.
*/
function astra_function_to_add_title( $attr ) {
$header_bg_obj = astra_get_option( 'header-bg-obj-responsive' );
$image_alt_text = get_post_meta( attachment_url_to_postid( $header_bg_obj['desktop']['background-image'] ), '_wp_attachment_image_alt', true );
$attr['title'] = $image_alt_text;
return $attr;
}

Alt text added for image –

Alt text will appear as title for the image in HTML markup –

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 is not loaded anymore by default. You can find out more information details in this article.Thus, adding the filter mentioned in this document is no longer needed unless you decide to disable the SVG support.

Astra by default loads a very tiny font icon library from an Astra.woff file. You can see a list of font icons here.

Here is a filter which can be used to disable loading this font – `astra_enable_default_fonts` You can add this filter in the child theme』s functions.php file as shown below. Just copy the following code and paste into the functions.php file.

Example usage –

add_filter( 'astra_enable_default_fonts', '__return_false' );

Read more about adding custom PHP code here.In case you need help with installing a child theme, refer to a link here.

Are you facing any of the following issues listed below? We tried finding the probable cause but this being a rare scenario we have provided a filter to disable the cause and resolve such issues.

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

Class is not found – WP_Image_Editor_ImagickCall to undefined method WP_Image_Editor_Imagick::get_error_message()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' );

Note

Refer this doc on How to Add Custom PHP Code?

By default, when visitors use the Search option on your website, the results will show posts, pages, products, etc. that fit the term searched.

If you』re running an online store, you might want to limit the search only to WooCommece products. This can help users find products faster and increase the conversion rate on your website.

To do this, you would need to add the following filter to the functions.php file of your Child Theme:

add_filter( 'get_search_form', 'astra_get_search_form_callback' );
function astra_get_search_form_callback( $search_form ) {
$search_form = str_replace( '-1">', '-1"/>', $search_form );
return $search_form;
}

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.

Do you see the default link on the Featured Image of the Posts on Blog Page?

Why?

The Featured Images added to each post are set a link to the same post.

How to clear?

From the Astra Theme version – 2.2.2 we providing a filter using which the link to the post can be removed.

Filter: The filter has been added to remove the featured image link on the blog page.

/**
* Remove HTML before tag for link.
* @param string $markup markup of post.
* @return string
*/
function astra_remove_link_before( $markup ) {
$markup = __return_empty_string();
return $markup;
}

/**
* Remove HTML after tag for link.
* @param string $markup markup of post.
* @return string
*/
function astra_remove_link_after( $markup ) {
$markup = __return_empty_string();
return $markup;
}

add_filter( 'astra_blog_post_featured_image_link_before', 'astra_remove_link_before' );
add_filter( 'astra_blog_post_featured_image_link_after', 'astra_remove_link_after' );

Note: Add the above filter to your child theme』s functions.php, here』s an article to help you Add Custom code.

A Page/Post title is usually used to let the users know which page they are currently on. You can enable or disable the Page/Post Title for the website in Astra Settings ( Edit Page / Edit Post > Astra Settings > Disable Sections > Disable Title ). By default this Title has heading tag

assigned in HTML structure.

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?

If you looking to change the tag of a title (like Page/Post title), you can use the below filter to change the tag for all the titles on your website. 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_action( 'wp', 'astra_add_title_filter' );

/**
* Function to add filters to change titles.
*
* @return void
*/
function astra_add_title_filter() {
add_filter( 'astra_the_title_before', 'astra_the_title_before_tag', 1, 10 );
add_filter( 'astra_the_title_after', 'astra_the_title_after_tag', 1, 10 );
}

/**
* Function to change tag in all titles.
*
* @param string $tag This contains default tag used for the titles.
* @return string
*/
function astra_the_title_before_tag( $tag ) {
$tag = '

';
return $tag;
}

/**
* Function to change tag in all titles.
*
* @param string $tag This contains default tag used for the titles.
* @return string
*/
function astra_the_title_after_tag( $tag ) {
$tag = '

';
return $tag;
}

Step 3 – The filter will change the default

tag to

tag. Update this by replacing

in the code with any heading tag (or other) needed. Click the 「Update File」 button to apply changes.

Note:

The following functions, astra_the_title_before_tag, and astra_the_title_after_tag, need to contain the same tag, as one function is for the opening tag, and the other one is for the closing tag (just like we have used

for both in the code above).

Default Tag

Heading Tag after adding the Filter

Featured images are an important feature for every post, page, or any other post type you have on your website. At the same time, when you add a featured image to your post or page, it will appear on top of your content.If you want to disable featured images from appearing on your posts, pages, or any other post type, you can add the following custom code to the functions.php file of your Child Theme:

/**
* Disable Featured image on all post types.
*/
function your_prefix_featured_image() {
$post_types = array('page','post');

// bail early if the current post type if not the one we want to customize.
if ( ! in_array( get_post_type(), $post_types ) ) {
return;
}

// Disable featured image.
add_filter( 'astra_featured_image_enabled', '__return_false' );
}

add_action( 'wp', 'your_prefix_featured_image' );

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.

This code will remove featured images on all of your pages and posts. You can apply this code only to pages, posts, any of your other post types, or all of them by modifying the bolded part of the code above. Here are the examples how this should look like:

To remove featured image on all your posts only:

$post_types = array('post');

To remove featured image on all your pages only:

$post_types = array('page');

To remove featured image on all pages, posts and example custom post type. This is the example which you can use to add any other post types you want the above code to be applied:

$post_types = array('page','post','custom-type-1');

Related Article: How to add PHP Snippets