search ]

Archives: Snippets | Page 16

Disable the Default Lightbox in WooCommerce 3.0+

Here is a quick way to disable the Lightbox in WooCommerce 3.0 and above. Add the following code to your functions.php file:

add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );

function remove_wc_gallery_lightbox() { 
  remove_theme_support( 'wc-product-gallery-lightbox' );
}

For more WooCommerce customization, see Mastering WooCommerce Hooks.

Hide Scrollbars While Allowing Scrolling with CSS

In some cases you may want to hide the scrollbars that appear on an element while still allowing the user to scroll. You can do this with the following CSS when the class .element is the element you want to hide scrollbars for:

.element::-webkit-scrollbar {
    width: 0;
    height: 0
}

.element {
   scrollbar-width: none;
}

Say you want to hide the scrollbars that appear for the <html> tag. You can do this with the following CSS:

::-webkit-scrollbar {
    width: 0;
    height: 0
}

html {
   scrollbar-width: none;
}

Note: This will not work in Safari and likely not in Internet Explorer.

For more scrollbar customization, see Style Scrollbars Using CSS.

Remove WordPress Version from Header

You may want to prevent the display of the WordPress version you are using that appears automatically in the site header. One reason to do this is securing your WordPress site.

If those trying to breach your site know the version you use by looking at the site source, it can guide them and make their job easier because they can easily check for security vulnerabilities in that version.

// remove version info from head and feeds
function sv_complete_version_removal() {
    return '';
}
add_filter('the_generator', 'sv_complete_version_removal');

Redirect New Registered Users to a Specific Page

If your site allows registration to your WordPress site, you may want to redirect new registrants to a specific page after successful registration. For example, a page where they can download a file, or one that shows important information you want that user to see after registration:

function sv_registration_redirect(){
    return home_url( '/finished/' );
}
add_filter( 'registration_redirect', 'sv_registration_redirect' );

Information about redirects related to this topic can be found in the post 301 redirects and their importance for SEO.

Allow Contributors to Upload Images in WordPress

By default, WordPress does not allow users with the Contributor role to upload images to the media library. Of course you could give that user higher-level permissions, but that would allow them to perform additional actions on the site that you may not want them to be able to perform.

The following code lets Contributor users upload images to posts they wrote without any additional permissions:


function sv_allow_contributor_uploads() {
    $contributor = get_role('contributor');
    $contributor->add_cap('upload_files');
}

if (current_user_can('contributor') && !current_user_can('upload_files'))
    add_action('admin_init', 'sv_allow_contributor_uploads');

For more on file uploads in WordPress, see Enable Additional File Type Uploads.

Add Featured Image Column to Posts List in WordPress Admin

Want to know how to display the featured image next to each post and page when viewing the posts or pages list in the WordPress admin?

You can use a plugin for this, but it is unnecessary. Simply add the following code to your theme’s functions.php file.

function posts_columns($defaults){
    $defaults['sv_post_thumbs'] = __('Image');
    return $defaults;
}

function posts_custom_columns($column_name, $id){
    if($column_name === 'sv_post_thumbs'){
        the_post_thumbnail( 'thumbnail' );
    }
}

add_filter('manage_posts_columns', 'posts_columns', 5);
add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);

The result will look something like this:

Adding featured image to posts column in WordPress admin

This uses WordPress hooks to add admin columns. Learn more in WordPress Hooks Explained.

Upgrade and Downgrade WordPress with WP-CLI

WP-CLI is a set of tools that provides functionality for managing WordPress sites. In this guide we describe the benefits of using WP-CLI and demonstrate several advanced commands that will make your life easier in a WordPress development environment. You can use wp-cli to upgrade or downgrade WordPress to a specific version.

Update to the latest WordPress version:

wp core update

Update to a specific WordPress version:

wp core update --version=5.5.3

Install or downgrade to a specific WordPress version:

wp core update --version=5.5.3 --force

Check the installed WordPress version:

wp core version

Or with extra info:

wp core version --extra

Remove DNS Prefetch in WordPress

Making WordPress faster is an ongoing process. One small step with minimal impact is removing DNS prefetching for the following addresses (if you want to remove them):

<link rel='dns-prefetch' href='//s.w.org'/>
<link rel='dns-prefetch' href='//fonts.googleapis.com'/>

In the page source it looks like this:

Removing DNS prefetch loaded automatically by WordPress

To remove these, add the following code to your theme’s functions.php file:

function remove_dns_prefetch () {
    remove_action( 'wp_head', 'wp_resource_hints', 2, 99 );
}
add_action( 'init', 'remove_dns_prefetch' );

If you are not familiar, here is a post explaining what DNS is.

Limit Text to N Lines with CSS

A very useful snippet that lets you limit the number of lines of text using CSS only. Use the line-clamp property in CSS like this:

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

Example markup:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

For more CSS optimization tips, see Optimize CSS for Better Performance.

Disable Payment Gateway for Specific Shipping Method in WooCommerce

A look at the WooCommerce checkout page and specifically how to disable a payment method for a customer based on the shipping method they selected. For example, disable “Cash on Delivery” for the “Local Pickup” shipping method.

WooCommerce - Disable a payment method for a specific shipping method

Here is a snippet that lets you do something like this (functions.php):

/**
 * @snippet       Disable a payment method for a specific shipping method
 * @author        Roee Yossef
 * @website       https://savvy.co.il
 */
  
function sv_gateway_disable_shipping_326( $available_gateways ) {
     
   if ( ! is_admin() ) {
        
      $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
        
      $chosen_shipping = $chosen_methods[0];
        
      if ( isset( $available_gateways['cod'] ) && 0 === strpos( $chosen_shipping, 'local_pickup' ) ) {
         unset( $available_gateways['cod'] );
      }
        
   }
     
   return $available_gateways;
     
}
add_filter( 'woocommerce_available_payment_gateways', 'sv_gateway_disable_shipping_326' );
Savvy WordPress Development official logo