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.
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.
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');
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.
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.
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:
%22%20transform%3D%22translate(1.8%201.8)%20scale(3.57422)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23c6c6c6%22%20cx%3D%2267%22%20cy%3D%2293%22%20rx%3D%2243%22%20ry%3D%22234%22%2F%3E%3Cellipse%20fill%3D%22%23a8a8a8%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(46.4%20-120.7%20145.3)%20scale(25.80892%2024.00646)%22%2F%3E%3Cellipse%20fill%3D%22%23fff%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-63.3357%2043.34615%20-66.35241%20-96.95155%20196.1%2094.6)%22%2F%3E%3Cellipse%20fill%3D%22%23fff%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-22.6948%20-2.6348%2014.86208%20-128.01413%200%2082.4)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
This uses WordPress hooks to add admin columns. Learn more in WordPress Hooks Explained.
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
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:
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%230d0d0d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(108.62291%20236.02014%20-363.27193%20167.18766%201288.3%20171.6)%22%2F%3E%3Cellipse%20fill%3D%22%234d4d4d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(512.7786%20-518.17671%20297.59087%20294.49071%20411.7%20181.6)%22%2F%3E%3Cpath%20fill%3D%22%23494949%22%20fill-opacity%3D%22.5%22%20d%3D%22M797.2%20415.3L906.3%20300l-12-91z%22%2F%3E%3Cpath%20fill%3D%22%23111%22%20fill-opacity%3D%22.5%22%20d%3D%22M1203.4-94l-194%20127.3%206-78.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
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.
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.
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.
%22%20transform%3D%22translate(2.3%202.3)%20scale(4.59766)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23919191%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(70.87015%20-5.8002%201.98842%2024.29563%2040.3%20212.5)%22%2F%3E%3Cellipse%20fill%3D%22%23cdcdcd%22%20cx%3D%22126%22%20cy%3D%229%22%20rx%3D%22255%22%20ry%3D%2221%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M-16%2053l287-27-46%20208z%22%2F%3E%3Cellipse%20fill%3D%22%23c9c9c9%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-65.88504%20-13.37744%205.03916%20-24.8183%2071.6%20192.8)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
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' );