if ( ! function_exists( 'display_product_additional_information' ) ) {

    function display_product_additional_information($atts) {

        // Shortcode attribute (or argument)
        $atts = shortcode_atts( array(
            'id'    => ''
        ), $atts, 'product_additional_information' );

        // If the "id" argument is not defined, we try to get the post Id
        if ( ! ( ! empty($atts['id']) && $atts['id'] > 0 ) ) {
           $atts['id'] = get_the_id();
        }

        // We check that the "id" argument is a product id
        if ( get_post_type($atts['id']) === 'product' ) {
            $product = wc_get_product($atts['id']);
        }
        // If not we exit
        else {
            return;
        }

        ob_start(); // Start buffering

        do_action( 'woocommerce_product_additional_information', $product );

        return ob_get_clean(); // Return the buffered outpout
    }

    add_shortcode('product_additional_information', 'display_product_additional_information');

}

Usages:

1. with a defined product id: [product_additional_information id=’37’] or in php: echo do_shortcode("[product_additional_information id='37']");
2. In an existing product page (when “additional information” product tab is removed for example): [product_additional_information] or in php: echo do_shortcode("[product_additional_information]");

Remove WooCommerce Breadcrumbs

I’m gonna use a more SEO friendly breadcrumb that uses Schema markup, so the default WooCommerce breadcrumb located on the product page needs to be removed.

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Remove Category (Product Meta) on WooCommerce Product Page

add_action( 'after_setup_theme', function() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
} );

Remove Short Description on WooCommerce Product Page

add_action( 'after_setup_theme', function() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
} );

Remove Product Price on WooCommerce Product Page

add_action( 'after_setup_theme', function() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
} );

Disable Shopping Functions / Remove Add to Cart Button

This filter below works for simple product. I’ve tried to use it on external/affiliate product, but the Buy Button is still there. So the best practice is to use simple product in your product type.

add_filter( 'woocommerce_is_purchasable', '__return_false');

Or use this one if you want to remove Add to Cart/Read More button on product archive page

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); //Remove Add to Cart/Read More Button on Product Archive Page

Remove Single Page Product Gallery Images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); //Remove Single Product Image

Remove Single Page Product Tabs: Description, Additional Information, Reviews

add_filter( 'woocommerce_product_tabs', 'diko_remove_product_tabs', 81 );
function diko_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );
	unset( $tabs['additional_information']);
	unset( $tabs['reviews']);
    return $tabs;
}

Remove Related Products Output from Product Page

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Remove WooCommerce Title

add_filter( 'woocommerce_show_page_title', 'diko_remove_woo_title');
function diko_remove_woo_title(){
    if(is_shop()){
        return false;
    }
}

Sources

1. https://woocommerce.com/document/customise-the-woocommerce-breadcrumb/
2. https://wpbeaches.com/removing-the-product-meta-categories-in-a-product-page-woocommerce/
3. https://rudrastyh.com/woocommerce/make-products-non-purchasable.html

Remove Archive Title

When you think you need to remove page heading (h1) on the archive page, like category or tag page, use this one.

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_archive_title', 'generate_archive_title' );
} );

Let’s say you are using elementor and wanting to show a fontawesome icon on the page. Instead of downloading the font when the browser finds the css rule of font-family while rendering, we can tell the browser to download the font before the page starts to load. Thus, when the browser finds the css rule, the icon will show up instantly.

Okay, here you go. I’m using Code Snippets plugin to install the php function. I’ve explained it on my previous post, check it out on this link.

1. Go to Code Snippets -> Add New

2. Give your snippet a name, “Preload Key Requests”
3. Add below function to the content area, don’t forget to change the website name.

function dikopreload(){
	?>
<link rel="preload" href="https://neve.pagespeedboss.com/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff" as="font" type="font/woff" crossorigin />
<?php
}
add_action('wp_head','dikopreload',-69420);

That’s it! So easy right?

You can preload other things beside fonts. Currently it supports font, images, javascripts, css files, audio, video, more of it can be read at here.

At first I were having a problem with inconsistent Largest Contentful Paint (LCP) metric. I found out that the LCP area is changing along with the browser loading time. It was finally fixed by adding height value to elements on the above the fold area.

At the time of fixing it, I found an image considered as an element contributing to the LCP metric. No problem, I can add height and width to its css style, inline.

However, it still complained that LCP metric is too high. I tried everything, until I realized, the image is being lazy-loaded. Okay, let’s fix it, exclude the image from being lazy-loaded.

I’m using A3 Lazy Load plugin by a3rev.

A3 Lazy Load is a great plugin, it can work alongside autoptimize, it can lazy load iframes too. However, it can exclude images from being lazy-loaded by its class only, unlike autoptimize which can exclude by filename.

As Attila said in his post, images attached on a post that is created programmatically (means built by a page builder such as elementor, beaver, etc.) will not include its attachment ID as its class. This is quite problematic when using a3 Lazy Load. Like I said, it can only exclude by its class.

To resolve the issue above, add this to your theme’s functions.php or create one snippet on Code Snippets :

/**
 Add attachment ID class to images
 *
 @param array $attr Array of attributes.
 @param object $attachment Attachment Post object, instance of WP_Post class.
 @return array Image attributes array.
 */
 function lwp_attachment_id_class( $attr, $attachment ) {
 $class_attr = isset( $attr['class'] ) ? $attr['class'] : '';
 $has_class = preg_match(
     '/wp-image-[0-9]+/',
     $class_attr,
     $matches
 );
 // Check if the image is missing the class
 if ( !$has_class ) {
     $class_attr .= sprintf( ' wp-image-%d', $attachment->ID );
     // Use ltrim to to remove leading space if necessary
     $attr['class'] = ltrim( $class_attr );
 }
 return $attr;
 } 
 add_filter(
     'wp_get_attachment_image_attributes', 'lwp_attachment_id_class', 10, 2
 );

Despite the fact that WordPress is updated frequently by the team behind it, the possibility of a WordPress site being hacked still exists. The nature of being opensourced makes WordPress also open to be attacked by looking at its codes.

As a regular user who knows php just a little bit, I choose to utilize WordPress plugin to secure my WordPress site. I know a little bit of managing nginx server, I believe combining them both will be strong enough to secure my WordPress site. Anyway, here are some tips on how to secure a WordPress Site I want to share with you.

Use the Latest WordPress

Eventough sometimes the latest WordPress comes with something people do not like, for example Gutenberg, using the latest WordPress is a must.

The reason behind this is simply because of security. Using the latest WordPress script ensures us having the latest security patch from the team. Minimizing the risk of being hacked at its core.

Always Use Up-to-Date Plugins and Themes

Every time you want to install plugin or themes, always check when was the last time it is being updated by the author. Altough we don’t have any knowledge whether it is vulnerable or not, just avoid it.

This thing also applies to paid plugins and themes. Always check when was the last time it’s being updated.

On codecanyon, they include the date of the plugin last updated.

Never Use Nulled Plugins and Themes

This is super important. If you find nulled plugins or themes, never ever ever install it to the live site. I don’t want to encourage this actually, but IF, you desperately want to try a plugin or theme, you better install it on a development site. If you feel it suits your need, BUY from the developer!

On codecanyon, you can try plugins before buying. The developer will create a temporary demo site for you to test out the plugin. The process is automatic, you do not even need to register on the demo site. Check out newsomatic.

Protect Login Form

I recommend you to use “Advanced noCaptcha & invisible Captcha (v2 & v3)” by Shamim Hasan. It has the option to protect your WordPress site’s login form using google Recaptcha. Not only that, it can also be set to show reCaptcha if only maximum login attempts has been reached.

Use Strong Password

You can use sites like PasswordsGenerator.net to generate complicated password for you. Just make sure you save it somewhere as it’s very randomly generated. I personally use the service from lastpass to manage my passwords.

Deny wp-config.php and .htaccess File Access

Last thing is, block or deny direct access to our wp-config.php and .htaccess file. For nginx users, add this rule below on your nginx configuration.

location ~* /(\.|wp-config\.php) { deny all; }

For apache users, put this on your main .htaccess file. The .htaccess file located right under your public_html folder.

# protect wpconfig.php
<files wp-config.php>
order allow,deny
deny from all
</files>
<files ~ "^.*\.([Hh][Tt][Aa])">     
order allow,deny     
deny from all     
satisfy all 
</files>

Okay, that’s it! Actually there are plenty methods available like changing the login URL, but I’m not a fan of it. Sometimes if I’m accessing my site from a public computer, I forgot the login URL, it is a disaster, lmao.

Anyway, if you have other techniques or want to ask more about securing WordPress site, feel free to leave a comment.

In the past, I used to add php functions to the main theme’s functions.php file, I know some of you were also doing this and probably still doing it. I am telling you, this is actually wrong. I’ve had my functions wiped out when the themes got updated, and sadly I didn’t have any backup available at that time.

What I like from using WordPress is that we can customize nearly everything. Tons of plugins and themes has helped me lots of times to build my website just the way I want. At the time of writing, there are currently 57,959 plugins and 8,002 themes available for free in wordpress repository.

Despite the huge number of plugins and themes, in occasion, we need to add our own php function. I believe the most appropriate way to do it is by using a plugin called “Code Snippets”.

What I like about Code Snippets plugin is that I can organize my custom codes and there’s an option to pick the place to execute the code.

How to Install Code Snippets Plugin

Just like installing any other plugin, you can use your WordPress plugin search engine to install it. Here’s the complete steps :

1. Click the Add New link on the left sidebar of admin area.

2. Type in Code Snippets at the search box.

3. Click Install Now, then
4. Click Activate

How to Add PHP Functions using Code Snippets Plugin

Okay, now we have Code Snippets plugin installed, I’m gonna show you how to add your php codes and utilize it. This time I’m gonna preload jQuery file at the header.

1. First, look at the sidebar in admin area, click add new link as shown in the picture below.

2. Add the snippet name, write a function, choose “Only run on site front-end”.

3. Scroll a little bit to the bottom, then click “Save and Activate”.

Okay, that’s it! Quite simple right? Now we have our jquery file preloaded at the header, so whenever a visitor land to our website, they will have jquery on their browser before it’s called on the page.

I hope this is useful for you, if you have any questions, feel free to leave a comment.