Category - Uncategorized

1
Woocommerce Custom Sidebar on Shop Page (Without using a plugin)
2
Fix Blurry Product Thumbnail Images in the Divi Shop Module
3
Kodi Not Working On Sky Broadband? Here’s How To Fix It.

Woocommerce Custom Sidebar on Shop Page (Without using a plugin)

After working with Woocommerce recently, I discovered that out of the box, Woocommerce displays the main blog sidebar on the shop pages.

Since the main WordPress sidebar contains blog-related widgets by default, this is clearly far from ideal.

I wanted instead for the Woocommerce shop page to have it’s own sidebar, with widgets related to searching and filtering products, not posts.

After digging through the code looking for a clean solution, I found that the solution is easy, and it’s as clean as copying a single template file and making a minor edit.

1. Create your new Widget Area

In your website’s filesystem (using your OS’s file explorer if it’s local to your machine, or via SFTP if it’s a remote webserver), navigate to your theme’s directory (/wp-content/themes/THEMENAME/) and edit the functions.php file.

At the end of the file, add the following code:

function custom_widgets_init() {
	register_sidebar(
		array(
			'name'          => esc_html__( 'Shop Sidebar', 'sirius' ),
			'id'            => 'sidebar-shop',
			'description'   => esc_html__( 'Add widgets here.', 'sirius' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h4>',
			'after_title'   => '</h4>',
		)
	);
} 
add_action( 'widgets_init', 'custom_widgets_init' );

If you already have a function attached to the widgets_init action, you can just add the call to register_sidebar into it.

2. Add widgets to your new widget area

Drag some widgets into your new widget area. Here are a few relevant Woocommerce widgets you might find appropriate:

  • Product Search
  • Filter Products by Attribute
  • Product Categories
  • Product Tag Cloud
  • Products By Rating
  • Recent Viewed Products

Adding widgets to the widget area

 

3. Create a custom shop sidebar template

Now we’re ready to create the template file which will output the new sidebar on the frontend of your website.

In your website’s filesystem (using your OS’s file explorer if it’s local to your machine, or via SFTP if it’s a remote webserver), navigate to your theme’s directory (/wp-content/themes/THEMENAME/) and copy the sidebar.php file to sidebar-shop.php

Edit the new sidebar-shop.php template using your favourite text editor and change any references to ‘sidebar-1’ to ‘sidebar-shop’

Here is the content from my sidebar-shop.php file.

<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Sirius
 */
 
if ( ! is_active_sidebar( 'sidebar-shop' ) ) {
	return;
}
?>
 
<aside id="secondary" class="widget-area">
	<?php dynamic_sidebar( 'sidebar-shop' ); ?>
</aside><!-- #secondary -->

And you’re done!

Now when you visit the shop page on the frontend of your website, you should see your shop sidebar instead of the main sidebar which is displayed when visiting the rest of your site.

If that was helpful, I’d really appreciate you taking the time to share this post on social media. You may also like to check out some of my other Woocommerce and WordPress related posts.

Fix Blurry Product Thumbnail Images in the Divi Shop Module

If you have built an eCommerce store using Woocommerce and Divi, you will probably know how powerful these plugins are and just how rapidly you can build a professional, SEO optimised storefront almost entirely in the browser with a minimal amount of coding.

Having said that, there are few shortcomings in Divi, particularly with regards to getting things right for SEO.

One such issue being the low resolution thumbnail images in the Divi shop module.

Blurry, Low Resolution Images

The product photos in the grid listing of the Divi shop module are rendered at just 150px by 150px byt the WordPress Thumbnail function. This means that they have to be scaled up by the browser. The net result being blurry photos.

This might be okay if you have 5 products per row, but if you decide to change the module to show 3 products per row, then those 150px images have to be scaled up to 320px wide by the browser. I’m sure that you’re already aware that scaling up an image to more than double it’s original size is obviously going to reduce image quality, quite a lot. The end result is blurry product photos. Not good if you want a nice looking website or online store:

Blurry Product Photos

 

Increasing Image Resolution

To correct this problem, we will have to tell WordPress (or Divi) to output the images at a higher resolution than 150px. After some digging through the Divi code to trace how the image tags are generated, I found a clean way to set image sizes for product images in archive listings, using WordPress filters.

To increase the size of your shop’s product images, add the following code to the functions.php file within your theme:

function theme_setup() {
 
function theme_size_of_product_thumb($u)
{
return array(332, 332,true);
}
add_filter('single_product_archive_thumbnail_size', 'theme_size_of_product_thumb');
 
}
 
add_action( 'after_setup_theme', 'theme_setup' );

After you have added the code, refresh the frontend of your website and the product images should appear sharp:

Sharp High Resolution Product Photos

 

In the example here, I used 332×332 for the image dimensions as that was sufficient for the 3 items per row I was displaying.

If your images are displayed larger than 332×332, perhaps if you are showing fewer than 3 items per row, then you might want to render your images at a higher resolution.

Bear in mind though that larger images means larger image filesizes, which in turn leads to slower page load times. As long as you don’t go huge, this shouldn’t be too much of an issue.

Kodi Not Working On Sky Broadband? Here’s How To Fix It.

Kodi Streams Stop Working On Sky

If you use Sky Broadband and Kodi has not been working recently, then you are not alone. A lot of people have reported problems watching Kodi streams whilst using Sky broadband.
You may have noticed that more and more movie or TV show streams seem to be down these days. You search for the latest move and click ‘Play’, only to be shown a ‘stream unavailable’ or ‘connection error’ message. You try the next available stream, only to be confronted with the same message.
Eventually, you may have become unable to find any working streams at all.

Sound familiar?

Many Kodi Streams Are Blocked On Sky.

Yes, it’s not just your Kodi installation that is broken. Sky, just like many other ISP’s in the UK have blocked a lot of Kodi streams.
At the time of writing, the following Kodi streams are known to be blocked by Sky Broadband:

  • FreeMusic
  • HDPopcorn
  • M4UFree
  • MVLinks
  • ExtraMovied
  • AnimeToon
  • SeeHD
  • WatchEpisodes
  • OceanOF

That’s far from an exhaustive list however, it is likely that many move video streaming services will be blocked by Sky into the future.

Why Does Sky Block Kodi Streams?

Sky don’t block streams just to be mean. They do it as they were forced by the courts to prevent copyright infringement by blocking people’s unrestricted access to copyrighted content. In an attempt to comply with the courts, Sky have actively blocked their customers from accessing a growing list of domain names and IP addresses.

As well as blocking access to video streams, Sky are also prohibiting access to torrent and filesharing websites.

Does My Current Broadband Provider Block Kodi Streams?

The simplest test you can do to see if there are active blocks on your current broadband connection is to try to visit a website that they are likely to have restricted.
At the time of writing, Sky are actively blocking access to www.thepiratebay.org and redirecting visitors to a warning message. Click on the button below to attempt to view www.thepiratebay.org.

Check For Block

If you see a Sky ‘Access Blocked’ message or other ‘access denied’ type messages, then you are being prevented from accessing at least that website, and quite likely popular movie video streams too.

If The Pirate Bay loads up, or any website loads at all that isn’t a block, then you’re probably not being blocked and video streams probably aren’t being actively blocked either.

If the web browser connection times out or if you see a DNS error of some sort, then access to pirated material may or may not be blocked.

How Can I Access Kodi Video Streams?

If your connection is being blocked by Sky or any other broadband ISP, then there are some ways around the block.

Disable Sky Broadband Shield

The first thing to rule out is Sky Broadband shield. Fortunately, you can just turn this off. Sky Broadband Shield is a parental firewall aimed to help parents prevent their children from accessing adult content.

Here’s how to turn Sky Broadband Shield off, in case it’s blocking access to your Kodi streams.

  1. Visit broadbandshield.sky.com and log in to your Sky account with your credentials.
  2. Find the option to ‘Switch Off’ the broadband shield altogether. You can select age ranges, but in this case we want to remove the shield facility altogether to make sure there is minimal chance of it effecting Kodi.
  3. Check to see if Kodi is working correctly.

Switch Broadband Providers

Possibly the most reliable way around Sky’s firewall is to switch broadband providers completely.

To find out if any particular ISP blocks video streams, try calling their customer service number and asking “Do you block any online websites or video streams?”. You can ask this without giving away any personal information if you’re worried about being identified.

Invest in a VPN

There are a wide array of private VPN providers on the market, each with their own particular perks and features. They’re all pretty much the same though, at least if you’re just looking to avoid your ISP from blocking traffic.

When subscribing to a VPN service, compare monthly rates between subscription lengths. Sometimes registering for a few years in one go can achieve big savings per month compared to smaller plans.

Tether Your Phone’s 4G Connection

This is only worth doing if you have a generous data limit on your mobile plan, or if you’re fortunate enough to have an unlimited 4g plan.

Most modern smart phones have a built-in ‘Wi-Fi Hotspot’ mode which creates an ad-hoc wireless network. You can connect to this from your laptop and try connecting again to video streams. Unless of course your 4G provider is blocking video streams too.

Other Computer Problems

There are many other computer problems that can affect Kodi, directly or indirectly. Since Kodi is software, most problems you encounter will be software and connectivity based. If however yu have a problem with your hardware, maybe you have a problem with your screen or your laptop trackpad isn’t working, then you may need to send your laptop in to a laptop repair service.

When you send your laptop in to be repaired, the electronics engineer working on it will inspect the condition of the electronics inside to asses the possibility of a fix. Parts are then replaced (or repaired if possible) to restore your PC’s full functionality.

 

Copyright © 2018. Created by Hayden Kibble.