How Translations can be Manually Exported and Uploaded to the Site?

How Translations can be Manually Exported and Uploaded to the Site?

Astra can be 100% translated using GlotPress. Here is a detailed document for How to Translate Astra Theme / Plugins in Your Own Language using GlotPress? As mentioned in the document if you wish to translate the strings, you need to submit a translation then a project validators take a look at them and approve them. This process needs some time.

In case you need to implement this translation in your website immediately, you can export the current translation file in the .mo format and use on your website by uploading it to the languages folder using FTP / SFTP with the correct naming convention.

Below are the detailed steps –

Step 1: Visit the GlotPress Project. GlotPress for Astra Theme is hosted on WordPress Repository here and Astra Pro can be translated here.

Step 2: Login or Register a new account.

Step 3: Choose your language from the list. (Screenshot). Click on the Astra.

Step 4: Click on any string and translate it

Step 5: Once you translate all required strings, scroll the page till the end.

Step 6: From the last line select only matching the filter and Machine Object Message Catalog (.mo), then click on Export.

Step 7: Rename the .mo file as –

For Astra Theme:  astra-{locale-slug}.mo For Astra Pro: astra-addon-{locale-slug}.mo

Note: You can find a local-slug for your language from the list here.

For example – If the language is Hebrew, WordPress Locale Code for it is he_IL, then the theme mo file will be renamed as astra- he_IL.mo

Step 8:  Copy the above-renamed file to –

For Astra Theme:  wp-content/languages/themes/For Astra Pro: wp-content/languages/plugins/

That』s it! This will display unapproved translations on your site.

Display Products from Same Category with Navigation

Display Products from Same Category with Navigation

Astra Pro Addon plugin』s WooCommerce addon allows displaying navigation on the single product page. Refer a document here to see the option in detail. Enabling this option will add previous and next button link on the WooCommerce single product page. 

By default, when you click on the next button, a product will be displayed on the basis of published date. If you want to show next and previous products from the same category only then use filter provided below. This filter will display next/previous product from the same category based on the product published date.  

For example – If category A has 10 products, then starting from 1st product next link will display all 10 products. After 10 products the next link will be disabled.

Paste following filter in child theme』s functions.php file. 

function astra_woo_product_previous_post_nav( $args ) {

$args = array(
'format' => '%link',
'link' => '',
'in_same_term' => true,
'excluded_terms' => '',
'taxonomy' => 'product_cat',
);
return $args;
}
add_filter( 'astra_woo_product_previous_post_nav_args', 'astra_woo_product_previous_post_nav' );

function astra_woo_product_next_post_nav( $args ) {

$args = array(
'format' => '%link',
'link' => '',
'in_same_term' => true,
'excluded_terms' => '',
'taxonomy' => 'product_cat',
);
return $args;
}
add_filter( 'astra_woo_product_next_post_nav_args', 'astra_woo_product_next_post_nav' );

From the above filter link argument can be updated as follows –

link: If you want to update next and previous link icons for navigation, update this argument. You can use  tag from various font libraries. You would then need to upload respective font library to Astra. Here is the article that shows how Font Awesome Icons can be used with Astra.

How To Fix Right Margin for the Footer Widget Element

How To Fix Right Margin for the Footer Widget Element

Astra Theme version 3.6.7 brought a fix for the Footer Widget Element right margin. 

The update came with the fix for this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

Previously the right margin wasn』t applying on the front end for the Footer Widget elements in your Footer Builder. 

Though Astra 3.6.7 update comes with the fix, this won』t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when the theme is updated. 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_apply_right_margin_footer_widget_css', '__return_true' );

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

How to Translate Astra Theme / Plugins in Your Own Language using GlotPress?

How to Translate Astra Theme / Plugins in Your Own Language using GlotPress?

Astra is 100% translation ready, comes with .po / .mo files and can be translated using any softwares such as POEdit, GlotPress, etc. Out of them all, we recommend GlotPress.

GlotPress is an online software that is used by WordPress for translations. The best part of GlotPress is the community. Anyone can login to GlotPress and contribute in translating the project, suggest corrections, validate existing translations. As a outcome of this, projects are usually translated faster and in more accurate manner.

In the post below, I will explain how GlotPress works and how you can use it to translate Astra in your own language.

Step 1. Visit the GlotPress Project.GlotPress for Astra Theme is hosted on WordPress Repository here and Astra Pro can be translated here.

Step 2: Login or Register a new account.

Step 3: Choose your language from the list. (Screenshot)

On the language page, you will see the current state of translation of the language and list of other translators who might have already translated contributed in translating the project. You might find some other terms as well which might not be very obvious. So let me explain what they mean.

Untranslated: are the strings that are not yet translated by anyone and need work.Waiting: are the strings that are translated by contributors, but yet need approval by the validators.Fuzzy: is a string is marked a fuzzy if it is translated differently by different translators. The language validator (admins) can choose the best string out of such duplicates to mark it translated.Translated: Strings that are already translated and don』t need any further work.

Step 4: Click on the name of your language to see all available strings (Screenshot)

Step 5: Click on any string and translate it (Screenshot)Once you translate the strings, project validators take a look at them and approve them.

Once the validator approves the translations or makes updates, the latest transnational automatically appears as an update in the WordPress backend if the project is on WordPress.org Repository. For projects that are not on the WordPress.org Repository (like Astra Pro Addon Plugin), project developers usually ship the completed translations through their project files with the updates.

Would you like to become a Translation Validator?

If you』re interested in becoming a validator, please get in touch with us with the details as below –

Your WordPress.org usernameYour username on our GlotPress Portal here.The locale you would like to become validator for.Details of your previous translations, etc if you have any.

Once you submit the request, we can get you added as the translation validator. Translation validators are able to approve the translated strings so they can be shipped to all users.

Need to add translation in your project immediately?

Should you wish to implement this translation in your website immediately, you can export the current translation file in the .po & .mo format and use on your website by uploading it to the languages folder using FTP / SFTP with correct naming convention.

For themes: wp-content/languages/themes/For plugins: wp-content/languages/plugins/

Correct naming convention is very important. This will make sure that WordPress understands what language you are referring to. Be sure to prefix the text domain before the language code. Capitalization is also important here.

For languages codes, please refer this list.Text domain can be found in the style.css file of the theme, or main PHP file of the plugin.

Examples of file names for Astra theme –

For German: 「astra-de_DE.po」 & 「astra-de_DE.mo」For French: 「astra-fr_FR.po」 & 「astra-fr_FR.mo」

Please note, we』re adding translation files in the /wp-content/languages/ directory. Many tutorials on other websites might ask to upload the file inside a theme or plugin』s folder. However, it』s not a recommended way as, with every theme or plugin update, you will lose all the translations and edits you have done.

Starter Templates – Wireframe Blocks

Starter Templates – Wireframe Blocks

Wireframing the structure of any website before beginning the design process is very important. It increases work efficiency, makes the workflow more effortless, and helps you get the final website design ready in less time. Now you can create your page or website mockup faster than ever with Starter Templates Wireframe Blocks.

This document will help you to understand how wireframe blocks work and what benefits they bring. 

What Are the Wireframe Blocks?

Wireframing means having a basic structure of your webpage like some sections, their layout, image position, text position, and so on. This gives you an idea of how you can manage content on any webpage.

But if you ever try creating wireframes using online tools or even with simple pen-paper, you will understand it is not quite easy. You will have to understand and study how online tool works. And well, working with pen-paper is neither convenient nor reliable as the design might end up undone.

Usually, you would create wireframes on external platforms and then transfer the designs to your website. Starter Templates offers ready-to-use wireframe blocks right inside the Gutenberg editor, helping you avoid those extra efforts. You can now create your wireframe design directly on your website.

Benefits of using wireframe blocks:

Provides basic structure to start any website design.Save your time in creating a wireframe with an external tool or traditional pen-paperJust replace image, text and add colors in the wireframe to make the final website design ready in less timeMake website designing smooth and effortless

How To Use the Wireframe Blocks?

The Wireframe blocks can be accessed through the page/post editor. You can add an unlimited number of blocks and create the whole page or post structure in no time.

Note

The Wireframe Blocks are available with Starter Templates version 2.7.0 and above. Once you update your Starter Template plugin, please navigate to Appearance > Starter Templates and sync the templates Library (the 「Sync」 button is located in the top right corner of the Library).

We』ll show you an example of how you can create a page structure that you can share with your team or client:

Step 1 – Navigate to Dashboard > Pages > Add New. In the top menu of the page editor, click on the 「Starter Templates」 button. This will open the Starter Templates Library;

Step 2 – In the top menu of the Library, click on the 「Wireframes」 tab. Here you can find all wireframe blocks available;

Step 3 – Here, you can filter the blocks by color and category and import the wireframe block to your page. You can do this by hovering over the block you need and clicking on the 「Import」 button;

Step 4 – Repeat steps 2 and 3 until you import all the blocks you need;

Step 5 – Once imported, you can reposition and modify blocks as you wish. Once your wireframe design is done, click on the 「Publish」 button to save your changes.

Now you』re ready to review and share your mockup with whomever you want. 

Once the final page design is decided, there is no need to create a new page. You can directly modify the wireframe blocks as needed and replace placeholders with your content.

That』s all. Your wireframe design is turned into the final design in no time.

Fix Swap Sections Not Working on Mobile (Old Astra Header)

Fix Swap Sections Not Working on Mobile (Old Astra Header)

Astra』s old header provides some additional options for mobile header editing with Astra Pro, one of them being Swap Sections. If it happens that this option is not working on your website, this document will help you fix it.

Astra Pro Addon version 3.5.7 corrects this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

The Swap Section feature is available for the Above and Below headers with a two-section layout. The feature allows the headers sections to swap places on mobile viewport if needed.  

If you have this option activated, you might have noticed that the feature is not giving the desired result. If this is the case, the Astra Pro version 3.5.7 comes with the solution for this.

Though Astra Pro 3.5.7 update fixes this issue, it won』t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when you update the plugin (Astra Pro). 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter after updating the plugin. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_apply_swap_mobile_header_sections_css', '__return_true' );

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

Hide the Text by Setting the Font Size to Zero

Hide the Text by Setting the Font Size to Zero

Designing your website to look and work perfectly on all screen sizes is more important now than ever. Sometimes it』s not so easy to do this. If sometimes you would like to hide some text or labels on any screen, you』ll be able to do this by setting font size to zero.

This document will help you do this with the Astra Theme.

Why Is This Important?

This improvement came with the Astra Theme 3.6.9 update. In earlier versions of the Astra Theme setting the font size to zero was not possible.

This will ultimately help you with responsive design.

How To Change This?

For all new websites, these changes will be applied automatically. 

For the existing websites, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To enable this improvement, you need to add the following custom code (filter) to the functions.php file of your Child Theme:

add_filter( 'astra_zero_font_size_case', '__return_true' );

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.

What To Do When Product Count Is Not Visible on Mini Cart With Astra Pro?

What To Do When Product Count Is Not Visible on Mini Cart With Astra Pro?

Did you notice that the product count on WooCommerce or EDD mini cart in your Header is not visible? You might need to modify the Product Count Color for your Astra Pro mini cart icons (any but the default). This document will show you how to do it.

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.

Remove Spacing Around Elementor Pro TOC Widget

Remove Spacing Around Elementor Pro TOC Widget

When building your website with Astra Theme and Elementor Pro you might have noticed a larger spacing around the 「Table Of Contents」 (TOC) widget than needed. 

Astra Theme version 3.6.7 came with the fix for this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

The additional spacing was created as a result of the Astra theme』s CSS for the default 「ul」 tag. The tag was affecting Elementor Pro』s TOC widget. 

You can check the following example:

This is the Elementor Pro TOC widget with Hello Elementor theme:

And here, you can see how the same widget look when used with the Astra Theme:

Though Astra 3.6.7 update fixes this issue, it won』t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when the theme is updated. 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_remove_elementor_toc_margin', '__return_true' );

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

How to Translate Astra Strings with WPML?

How to Translate Astra Strings with WPML?

With WPML, next to translating your website content, you can also manually translate strings added with Astra.

Before we proceed, you need to add WPML to your Astra website and turn it multilingual first. Furthermore, if you need help doing this, you can check this article.

How To Translate Astra Strings?

In this article, we will show you how to translate Astra Theme custom texts. As an example, we will translate the Site Title. Similarly, you can translate any other string on your Astra website.

You can follow these steps to translate Astra strings with WPML:

Step 1 – To begin with, login to your website and navigate to Dashboard > WPML > String Translation page;

Step 2 – Next, in the 「Search」 field on the top of the page, search for 「astra」. This will sort the string list to the Astra related strings;

Step 3 – Further, browse the string list below and find the strings you wish to translate. On the right side of that string line, you will see the WPML options and columns for each available language translation. 

Step 4 – To translate the string to any language, just click on the 「+」 icon to open the translation popup.

Step 5 – Finally, add your translation for the selected language and click on any empty space to close the popup. 

Step 6 – You will notice that the 「+」 icon changed to the 「pencil」 icon to mark that there is a translation saved for that language. 

You can repeat this process for each string and language.