Astra 文档

Fix for- cURL error 51: SSL: no alternative certificate subject name matches target host name 『websitedemos.net』

Facing the cURL error 51: SSL: no alternative certificate subject name matches target host name 『websitedemos.net』 while importing the Astra Sites?

Here is the fix.

If the SSL library installed on your server is outdated (OpenSSL/0.9.8b) you might come across this error while trying to download templates from our cloud. More details about the issue below:

The ProblemWhen the template cloud installed your site sends a request to our server, it goes through secure connections. These connections run through a firewall, which keeps our server safe from attacks such as DDoS. To be able to do that, we use a system called Server Name Indication (SNI). Every browser after IE6 supports this, and every major CURL version released after March 2008 supports this.

If your server is still using software older than that, this issue will be obvious.

The SolutionJust ask your hosting provider to update OpenSSL library and you should be OK. The OpenSSL version used should be 1.0 or higher that supports SNI. You may share this article with your host.

Technical BackgroundTo be able to use SNI, you need:

A version of CURL that supports it, at least 7.18.1. The CURL 7.18.1 was released on March 30th, 2008.This version of CURL should be compiled against a library that supports SNI, usually, OpenSSL 1.0 or higher as that enables TLS by default.

How to add Google Analytics code with Custom Layouts Module?

Custom Layouts module is available with Astra Pro. It provides hooks so that you can insert custom code at various locations on the website without editing the theme』s core files.

Please follow the steps to add Google Analytics code-

Activate the Custom Layouts module from Astra Pro. Insert the code in the Code Editor.Select Hooks layout and add wp_head action.Choose to display it on the Entire WebsitePublish the layout.

How to Remove Previous and Next Link from a Single Blog Post?

If you wish to remove the navigation (Previous and Next) links from the single blog post, this article is for you.

The navigation links can be removed with the filter. Below is the code for the required filter-

add_filter( 'astra_single_post_navigation_enabled', '__return_false' );

Where should I put this code?

We recommend you to put the filter code in the child theme』s functions.php file. Below are the steps that explain how to put the custom code into the child theme』s functions.php-

Install and activate Astra Child Theme.Open your WordPress site via FTP. We would recommend you to use FileZilla. Navigate to wp-content > themes > astra-child Right click functions.php and select View/EditAdd your code at the bottom of the file and save it.

It will remove the navigation link from all single blog post.

How to Add Background Images?

Astra version 1.3.0 and above provides a feature to add background images to various sections of the site.

You can enhance the design of the Body, Header, Content, Sidebar, and  Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.

Where can I find the option?

From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images

Where can I add a background image to Astra theme?

With Astra theme, you get an option to add a  background image to following areas-

Body (?)Footer Widgets (?)Footer Bar (?)

Background image for Astra Pro Modules

In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –

Primary Header (?)Above Header (?)Below Header (?)Content (?)Sidebar (?)Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.

Options for Background Image

Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following  CSS properties for the image –

RepeatBackground Image PositionBackground SizeBackground Attachment

You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.

 Important Notes:

After adding a background image, make sure to adjust the opacity of background color with color picker.Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.

How to Edit style.css in Child Theme?

If you want to add custom CSS to the theme you can add it to the child theme』s style.css

Initially, you need to install and activate the Astra child theme. You can edit child theme』s style.css  in following ways-

Through WordPress Dashboard

Navigate to Appearance > Theme Editor.Select Astra child theme to edit, from the upper right corner.Select Stylesheet (style.css) to edit and paste the code at bottom of the file.Save the changes.

Through FTP

Open your WordPress site via FTP. We would recommend you to use FileZilla.Navigate to wp-content > themes > astra-childRight-click style.css and select View/EditAdd your code at the bottom of the file and save it.

Colors & Background options for WooCommerce

This is a premium feature available with 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.

You can customize color and background options for WooCommerce Pages using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

Activate the WooCommerce Module from Astra Options.

Colors & Background options will be available under Appearance >  Customize > WooCommerce > Product Catalog and also under Appearance >  Customize > WooCommerce > Single Product

Below are the available tabs –

Base ColorsProduct CatalogSingle Product

Base Colors

From here you can apply color to the text (Text Color), and to the links (Link Color) which would apply a color to the five-star rating, Shop page title, Filter link and other links which appear with the products on all pages. Also, the Heading Color will be applied to Product titles.

Product Catalog

Product Title Color: Applies color to product title on the shop page.Product Price Color: Applies color to product price on the shop page.Product Content Color: Applies color to product short description and category on the shop page.

Single Product

Product Title Color: Applies color to product title on the single product page.Product Price Color: Applies color to product price on the single product page.Product Content Color: Applies color to product description on the single product page.Breadcrumb Color: Applies color to Product Breadcrumb on the single product page.

Getting error – The package could not be installed. The theme is missing the style.css stylesheet?

While trying to upload Astra Pro Addon plugin did you see following error-

If yes, below is the solution –

This error appears when users consider Astra Pro Addon as a theme and try installing it like any WordPress theme. However, Astra Pro Addon is a plugin that extends the Astra theme and adds more features to it.

So to fix this error, install Astra Pro Addon as a plugin through the WordPress backend as described below.

To upload a plugin zip, navigate to Plugins > Add New > Upload Plugin from the WordPress dashboard.

It will install the Astra Pro to your site. After installation, you will find settings under Appearance > Astra Options.

Typography Options for WooCommerce

This is a premium feature available with 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.

You can customize Typography options for WooCommerce using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

Activate the WooCommerce Module from Astra Options.

Typography options will be available under Appearance >  Customize > WooCommerce > Product Catalog > Typography and Appearance >  Customize > WooCommerce > Single Product > Typography

Below are the available tabs –

Base TypographyProduct CatalogSingle Product

Base Typography

From here you can set the Base Typography of your website』s content and the same would apply to the WooCommerce content.

Product Catalog

Product Title: Applies typography to product title on the shop page.Product Price: Applies typography to product price on the shop page.Product Content: Applies typography to product short description on the shop page.

Single Product

Title: Applies typography to product title on the single product page.Price: Applies typography to product price on the single product page.Breadcrumb: Applies typography to product breadcrumb on the single product page.Content: Applies typography to the product description on the single product page.

How to Merge Above/Below Header Menu with a Primary Menu in Responsive?

Above Header/ Below Header section with Header Sections module is a premium feature available with 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.

If you have set menu with either section in above/below header, you will see a separate hamburger for it in responsive devices.

If you are displaying a primary menu and above/below header menu- both, then you will see two separate hamburger menus in responsive.

If you do not wish to show two separate hamburger menu, you can merge them with a simple setting.

From dashboard navigate to Appearance > Customize > Header > Above/ Below Header. Scroll down to the end of the settings and enable the setting Merge Menu on Mobile Devices.

It will merge the header section』s menu with a primary menu in responsive. Primary menu items will be displayed on top of the header section』s menu items.

How to add Google Analytics code with Astra theme?

Google Analytics code can be added to the Astra theme with Astra Hooks plugin. It provides hooks so that you can insert custom code at various locations on the website without editing the theme』s core files.

Please follow the steps to add Google Analytics code-

Download  Astra Hooks plugin. Install it like any other WordPress plugin and activate it.From the WordPress dashboard navigate to Appearance > Customizer >  Hooks > Header > wp_head.Add the code with wp_head action.Publish it.

Other Notes:Astra Pro Addon plugin users can add Google Analytics code with Custom Layouts Module. (Recommended)