WordPress Tutorials
for Website Developers & Designers
Do you want to change “You may also like” headline text on WooCommerce pages? You can easily add custom headline in place of “You may also like” title that displays above the WooCommerce products grid section at the bottom part. Preview: Title above the products grid PHP Snippet: Change the default title textt In the WordPress Dashboard, go to Appearance…
Do you want to remove description text from category archive pages when using the Astra Theme? This can be implemented with a filter hook targetting using the code shared below. Code Snippet: Remove category description text In the WordPress Dashboard, go to Appearance > Theme Editor and open the functions.php file of your Astra child theme. Then add the following…
Want to add the H1 tag to website logo in the Astra theme for SEO reasons? While inner pages have their page title as H1 tag, you may want to wrap logo with H1 tag for homepage only when using Astra theme. This can be achieved via custom code. Code Snippet: Add H1 tag to Homepage Logo In the WordPress…
Do you want to display advertisement after a specific number of posts on the blog page? This can be achieved in the Astra theme using custom code. Besides executing ad code, you can use the same code logic to display any content between posts listing on the blog page. Display ads between posts on Blog Page In the WordPress Dashboard,…
Do you want to display a quick “Add to Cart” button on hover over WooCommerce product images while using Astra theme? This small change can make your WooCommerce store more user-friendly by allowing easy “add to card” action. Preview: Add to Card button on hover Minimum Requirements: Astra Theme Astra Pro add-on WooCommerce Enable Quick View Button Go to Appearance…
Custom layouts in Astra theme is a very handy feature allowing you to display layout or content at a specific location or parts of the theme layout. By default, Gutenberg block editor is not enabled for custom layouts in the Astra theme. However, you can enable it to use blocks editor for creating content using custom layouts in the Astra…
Do you want to display content in Beaver Builder layout based on visitor country (code) location? Beaver Themer addon provides a lot of conditional options but such location-based targeting is not available by default. However, this can be implemented via Conditional Logic API. To implement this, we shall build conditional logic “User Country Code”. Preview: User Country Code conditional First:…
Do you want to output ACF custom field value manually using a shortcode in a Beaver Builder layout? By default, modules in Beaver Builder allows you to connect to specific custom fields of your choice with simple click routines. However, for an even more custom approach, you can output custom field values manually using easy shortcodes. Example Shortcode for ACF…
Show ‘reviews’ tab as the first tab among ‘description’ and ‘additional information’ tabs on a WooCommerce website to give more visibility to reviews. We have already seen the different approach for more reviews visibility by showing reviews separately out of the tabs section. Now, let move the ‘reviews’ tab position in the tabs section on WooCommerce product pages. Preview: Before…
By default description, reviews and additional information show in one ‘tabs’ section in WooCommerce. Want to display ‘reviews’ outside this ‘tabs’ area separately for more user engagement and visibility? You can quickly implement this, and it also looks cool. Preview: Reviews outside WooCommerce Tabs PHP Code: Separate Reviews section In the WordPress Dashboard, go to Appearance > Theme Editor and…
The website field is a common component of the Comment Form in any WordPress theme including Astra Theme. Removing the website field may be required in cases when you want to prevent the commenting user from adding their website URL. A few users do it for SEO reasons and here is an easy way to achieve this. PHP Snippet for…
By default labels in input fields of Fluent Forms is left aligned. There is a no default option to center align but it can be achieved easily with a few lines of CSS code. Ideally, center align of labels would look odd from the user experience perspective. However, if you still want them center align, here goes. CSS for all…
By default images displayed on WooCommerce product pages have a zoom effect. An image will zoom on mouse hover by the user. You can easily disable this zoom effect using a few lines of code. PHP Snippet: Removes Zoom Effect With your Beaver Builder child theme active, go to Appearance > Themer Editor in the WordPress dashboard. Then open the…
Change ‘Leave a comment’ title H3 to H4 tag in Astra Theme
By default ‘Leave a Comment’ title is H3 tag in the Astra theme. You can easily change this to a different headline tag say H4 using custom code. Following code will change ‘Leave a Comment’ title tag from H3 to H4. PHP Snippet: Leave a comment from H3 to H4 tag In the WordPress Dashboard, go to Appearance > Theme…