分类： 入门

Single Product WooCommerce

In this document. we will be using the WooCommerece Addon from Astra Pro allow you to design Single Product page of WooCommerce.

Quick Steps on How to Style WooCommerce Store Page Using the WooCommerce ModuleStep 1: Make sure you have the Astra Pro Addon and WooCommerce plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the WooCommerce module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > WooCommerce ] to edit module settings

Gallery Layout

You can set product gallery images in vertical view / horizontal view.

Image Width

You can easily adjust the image width with the slider.

Disable Breadcrumb

You can manage to show/hide the breadcrumbs on the single product page.

Single Product Structure

You can manage to show/hide the following information-

TitleRatingsPriceShort DescriptionAdd To CartMeta

Enable Ajax Add To Cart

Enabling this option will restrict the page from refreshing when a product is added to the cart.

Enable Image Zoom Effect

Enabling this option will zoom the product image on hover. Contrary, if you disable it, the zoom effect will be removed on your product images. This way, your images will remain the same when you hover over them.

Product Navigation

This will allow you to set different designs for product navigation arrows.

Product Description Tabs

It will allow you to show/hide product description tabs. You can also set tabs to display vertical or horizontal.

Related & Up Sell Products

This will allow you to show/hide Related & Up Sell products. You can set a column to display these products. Also, you can choose a number of related products to be displayed on the page.

Parent document –

WooCommerce Module Overview

Fix Woocommerce Cart Becoming Transparent With Header Builder

If you decided to switch from the old Astra header to a new Header Footer Builder, you might have noticed that your WooCommerce mini cart became transparent. 

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 WooCommerce cart added to your old Astra header had the background set to white color by default. 

Switching to Astra』s Header Footer Builder caused the cart to become transparent.

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 fix 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_background_to_outline_cart_builder_element', '__return_true' );

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

How to Translate Categories, Tags, and Astra Strings with Polylang

With Polylang, you can manually translate post categories, tags, and strings added with Astra. This document will show you how to do this.

Before we start, you will need to install the Polylang plugin on your website and do the setup. If you need help turning your Astra website multilingual with Polylang, please check this article.

How To Translate Post Categories and Tags?

Similar to translating posts or pages, you can translate post categories and tags.

We will show you how to translate a category using Polylang as an example.

Please follow these steps:Step 1 – Navigate to Dashboard > Posts > Categories;

Step 2 – In the category list, find the category you wish to translate. You will see Polylang translation options on the right side of each category. There will be columns for each available language translation. Flags mark the language of the original category (most often default language). Languages without translations are marked with the 「+」 icon; 

Step 3 – Start translating the category by clicking on the 「+」 icon for the desired language. This will open the category editor;

Step 4 – To translate the category, add your translation to the 「Name」 field;

Step 5 – Click on the 「Add New Category」. This will create a new category linked as a translation to your original category. You will also notice that the 「+」 icon changed to the 「pencil」 icon to mark the existing translation;

Step 6 – Repeat steps 3 to 5 for each of the available languages.

Similarly to these steps, you can also translate any other category and your tags.

How To Translate Astra Strings?

In this article, as an example, we will show you how to translate Astra Theme custom texts. You can follow a similar method for translating any other string in Astra.

We added a Button Header element to the Primary Header and added the label 「Register」. We will add a translation for this label using Polylang string translations.

Please follow these steps:

Step 1 – From the WordPress dashboard, navigate to Dashboard > Polylang > Strings translation page;

Step 2 – Browse the string list and find the string you wish to translate. You can also use the search bar on the top right side of the page. You can type in any term (e.g., 「astra」) to sort the list to related strings only;

Step 3 – We searched for the term 「register」 and found our button string. On the right side of that string line, you will see the Polylang translation fields for each available language;

Step 4 – To translate the string to any language, just click the appropriate translation field and add your translation.

Step 5 – Scroll down and click on the 「Save Changes」 button once you』re done.

You can repeat this process for each string and language.

Now, that you know how to translate categories, tags, and strings with Polylang, you can make your Astra website entirely multilingual.

FAQs – Astra Pro 3.2 – Custom Layout Inside Pages/Posts

With Astra Pro 3.2 we have released a new option in Custom Layouts addon – Inside Post/Page Content.

This feature let users display custom layout inside Gutenberg page/post. Read about this in detail here.

Here we have listed few objections users might have with this update –

1. Can I display custom layout inside pages/posts built with other page builders like Elementor? [Example – I am an Elementor user and I wish to display a custom layout inside my Elementor pages.]

This is not possible at the moment. The custom layout can be displayed only inside pages built with the Gutenberg block editor.

You can design custom layouts with the block editor, Elementor, or Beaver Builder, but you can display it only on Gutenberg pages/posts.

2. Is there any plan to add support for other page builders?

The team does not have any plan for this as of now. You can keep track of our latest updates from the changelog, blog posts, Facebook group.

How to Change the Heading Tag for the Related Posts Title?

If you have enabled related posts on your Blog posts, you might have noticed that the Related Posts Title has the

heading tag assigned by default.

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 tag for the Related Posts Title 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;

// Filter for changing related posts title heading tag.
add_filter( 'astra_related_posts_title', 'update_related_posts_title_markup', 10, 1 );
function update_related_posts_title_markup( $markup ) {
$markup = '

';
$markup .= '

'; // Replace H4 with the tag you need.
$markup .= 'Related Posts';
$markup .= '

'; // Replace H4 with the tag you need.
$markup .= '

';
return $markup;
}

Step 3 – The filter will change the default

tag to

tag. Update this by replacing

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

Note:

Please keep in mind that you need to replace the h4 tag with your needed tag in both places within the code to make this work – one is the opening tag, and the other one is the closing tag (just like we have used

in both places in the code above).

Default Tag

Heading Tag after adding the Filter

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.

How to Install Astra Theme?

Astra is a free WordPress theme. Therefore, it can be installed and used like any other.

To install it on your site kindly follow the steps-

Login to your WordPress Dashboard.Go to Appearance > Themes > Add NewSearch for – AstraInstall AstraActivate it

Note: If you need the zip file of Astra theme, you can download it from the WordPress Repository here.

Looking for help to install the Astra Pro (Addon) Plugin? Read the article here.

Plugin Installation Failed – Multisite

Starter Templates are built with the free version of page builders and some other plugins. While importing a template, if these required plugins are not available on your website, they will be automatically installed.

In case, the automatic plugin installation process fails, you will see a popup showing an error – 「Plugin Installation Failed「

If you are on a single site, refer this document here.

In case you are on multisite, here is what you can do –

If your user profile has access to install plugins, Starter Templates plugins will automatically do work for you.

But in case your use profile does not access, you would need to contact your website administrator and ask them to install required plugin for your starter templates.

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.

Usage Tracking

We are committed to making our products better every day and it isn』t possible without the help of our users like you. 

By allowing to collect non-personal information about your website and server configuration, you can help us understand different possibilities and test our products better. 

We thank you in advance for enabling this option

What Exactly Do We Track? 

We will anonymously track the following parameters – 

List of active pluginsActive themeProducts by Brainstorm ForceThe version of Curl SSLVersion of CurlURL of the WebsiteIf site is using external object cache?Is GD extension available?BSF Updater VersionIs Imagik Extension availableIf a website is WordPress Multisite installationWhether SSL certificate is installedIf the wp-content directory is writable?The MYSQL versionThe PHP ini setting – php_max_execution_timeThe PHP ini setting – php_max_input_varsThe PHP ini setting – php_memory_limitThe PHP ini setting – php_osThe PHP ini setting – php_post_max_sizeThe php_versionThe server softwareWordPress LanguageTimezone set in WordPressWhether wp_debug is enabledWhether wp_debug_display is enabledThe version of WordPress installedIf the xmlreader existsIf zip_installed is enabledIs script_debug enabled?

By collecting this non-personal information, we develop better, more compatible software and serve our customers better.

How to Enable/Disable Usage Tracking? 

You will see an admin notice that will allow you to enable usage tracking.

You can manually allow tracking anytime from Settings > General > Usage Tracking. Tick the checkbox and save the changes. In case you wish to disable it, you can hit the same checkbox.