Astra 文档

Astra by default displays the date when a post was published to your website visitors. Plus it adds the date when the post was last updated in the code – for SEO and Schema Markup.

Published date is displayed in the front end

Both, published as well as updated dates are available in the markup.

If you want to display last updated date for the post to your visitors, use the following custom code –

/**
* Display only last modified date in the post metadata.
*
* @param String $output Markup for the last modified date.
* @return void
*/
function your_prefix_post_date( $output ) {
$output = '';
$format = apply_filters( 'astra_post_date_format', '' );
$modified_date = esc_html( get_the_modified_date( $format ) );
$modified_on = sprintf(
esc_html( '%s' ),
$modified_date
);
$output .= '';
$output .= ' ' . $modified_on . '';
$output .= '';
return $output;
}
add_filter( 'astra_post_date', 'your_prefix_post_date' );

It hides the published date and makes updated date visible.

Note:

Add the above code into the child theme』s functions.php file.

Depending on your settings, your Blog Archive page might have multiple pages. In this case, the navigation links are being used to switch between different pages. These navigation links are displayed at the bottom of the page as 「Previous Page」 and 「Next Page」.

You can change these labels with any custom text by adding a custom code (filter). To do this, you would need to add the following filter to the functions.php file of your Child Theme:

add_filter('astra_default_strings' , 'call_back');
function call_back( $default ){
$default['string-blog-navigation-previous'] = '← ' . __( 'Custom Previous Page', 'astra' );
$default['string-blog-navigation-next'] = __( 'Custom Next Page', 'astra' ) . ' →';
return $default;
}

This code will rename your navigation links to 「Custom Previous Page」 and 「Custom Next Page」. You can replace these link labels with any other text by modifying the bolded part of the code above.

If you don』t have your Child Theme installed, please check this article on how to do it. Also, If you are not sure how to add this code, please check this article.If you need to do modify navigational links on your Single Posts, please check out this document.

The Astra Theme comes with the Related Posts feature, which helps you engage your visitors for a longer time. This feature displays posts within the related category, suggesting that your visitors read more content related to their topic of interest. 

Further, you might want to change the Related Posts section title and show the Post Category name instead. You can do this by adding a custom code (filter). 

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

add_filter( 'astra_related_posts_title', 'astra_related_poat_title' );
function astra_related_poat_title() {
return sprintf(
'

',
'h2',// enter your custom string here
esc_html__( get_the_category()[0]->name, 'astra' )
);
}

Once the filter is added, the Related Posts section title will display the category name of the current post:

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.

If you have the WooCommerce or EDD cart added to your websites』 mobile header, you might want to modify the cart title. Since Astra Theme version 3.5.0, this can easily be done.

With Astra Theme versions 3.5.0 and above you can change the default 「Shopping Cart」 text to anything you need to. 

To do this, you would need to add a filter to the functions.php file in your Astra Child Theme. Please add the following code:

add_filter( 'astra_header_cart_flyout_shopping_cart_text', function() {
return 'My Shop Flyout Cart';
} );

You can change the title to any text you want – just modify My Shop Flyout Cart text in the code above.

Note:

For additional details on how to add a custom code to the functions.php file please see this article: How to Add Custom PHP Code?

Are you looking to add Global Button Settings Support for the WooCommerce Buttons? Now with the Astra Theme version 2.5.0, will be resolved –

For New Users:

On your fresh or new installations, compatibility of Global Button Settings will be provided for the WooCommerce Buttons by default.

For Existing Users:

You can use the following filter in the child theme』s functions.php to provide Global Button』s Support for the WooCommerce buttons.

add_filter( 'astra_global_btn_woo_comp' , '__return_true' );

Note

Refer this doc on How to Add Custom PHP Code?

Astra』s Header Footer Builder comes with the WooCommerce Cart element that allows you to add the mini-cart to your header. By default, the mini-cart displays a number of items added to the cart together with the icon.

The mini-cart will show the number 「0」 until the first product is added to the cart. 

In case you would like to hide this number, you can do it by adding a custom code (filter). Adding the filter will hide the number of products while the mini-cart is empty.

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

add_filter('astra_woo_header_cart_total', 'remove_cart_count');
function remove_cart_count( $default){
if(0 == WC()->cart->get_cart_contents_count()){
return false;
}else{
return $default;
}
}

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.

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.

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 may find yourself needing to add Custom CSS in your WordPress site. There are easier ways to add CSS on your site. In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files.

In Customizer

Since WordPress 4.7, users can now add custom CSS directly inside the Customizer which you can find in Customize → Additional CSS. This is super-easy and you would be able to see your changes with a live preview instantly.

It should be noted that the CSS added in this area is theme-specific, so if you switch themes, you』ll lose your CSS.

Using external plugin

Use the external plugin like Simple Custom CSS to add custom CSS.

Using a Child Theme

If you』re already using a child theme, you can use the style.css file to add your custom CSS. Read How to edit style.css in the child theme?

Liked how the menu is styled on hover in the above GIF? You can add a similar dim effect to the content on the menu hover with the following CSS. With this, visitors will have an increased focus on the navigation menu and it』s better for conversion.

/* Dim content on menu hover */
#masthead:hover~#content {
opacity: 0.1;
transition: all 0.5s linear 0.1s;
}

#content {
transition: all 0.5s linear 0.1s;
}

Above CSS can be added to the customizer under Additional CSS tab or in the child theme』s style.css file.