Adding a New Product to a WooCommerce shop/catalogue

1. Introduction

WooCommerce is a highly customisable shop/cataloguing plug-in.  Details on usage are provided directly via the following references

The text below is an overview which may be helpful, however if in doubt, refer to the official WooCommerce documentation

Having logged into your WooCommerce enabled WordPress CMS site the Woocommerce features/options are found in the left hand menu.

  • The WooCommerce menu item covers overall configuration and available options.
  • The Products menu item covers the shop/catalogue content.

To add or edit the products, select Products to expand the available options, followed by the Add Products menu item.

WooCommerce add new product menu add product

  • select Products to see a list of all products currently loaded into the shop/catalogue
  • select Add Product to add an individual product to the shop/catalogue will be listed.
    • note:  WooCommerce does not include bulk import by default, however import plugins are available to  enable bulk import from csv.

2. Navigating the Add Product menu item

Having selected add product you are presented with a number of fields to add product information.

WooCommerce add new product: Add new product page view

  1. Content Area: This is the main content for the product description
  2. Hover over a product to show the possible actions: edit, quick edit and view

edit: takes you to the details page for the selected product, enabling you to update product details as required.

quick edit: takes you to a subset of fields such as price, product category, product availability to enable fast management of the list of products

view: provides a preview of how the product is listed in your shop/catalogue.

3. Adding a new Product

To add a new product either click on Add Product shown at the top of the image above, or click on Add Product from the menu. You are presented with a number of field options and menus:

  1. Product Data type drop down menu: enables the product to be defined as Simple, Grouped or Variable
    • Simple Product: a self contained, single item,
    • Grouped Product: whereby the individual product is detailed, but will be sold as part of a defined group.
    • Variable Product: enables a product to be defined with variations; for example a t-shirt having different colours, or shoes with different sizes.  The product data for a variable product will automatically become the umbrella data for 2 or more additional products – the variants. Selecting Variable product automatically adds a new tab “Variations”. The screen shot below shows the options available for variations – for example product colour.
      To add the variation product, select the attributes tag, adding your variations (for example different colours), then visit the variations tab to select the colour and add the variation, giving the colour variation a unique sku:WooCommerce add new product: variable product variations
  2. Product Data management tabs menu: enables product information to be added under a fixed set of categories:  General, Inventory, Shipping, details on Linked Products and Attributes (specific product details).
    • General: set the price which you will charge for the product.WooCommerce add new product: general
    • Inventory: Add a SKU (Stock Keeping Unit) reference entry to uniquely identify your product. The Stock Status entry may be used to indicate stock level, from  “in stock” to an actual number, using the Manage Stock option.
    • WooCommerce add new product: inventory
    • shipping: Package size for shipping. Leave alone unless you wish to define the shipping box of the product.
    • WooCommerce add new product: shipping
    • Linked Products:  Linked products allow other products to be shown according to the selected item – perhaps similar items or “often bought with” items.  Linked products works in 3 ways:
      • Up-sells – enabling a more expensive product to be highlighted as an alternative to the selected product.  To add up-sell products:
        • create your product as a simple product
        • then create a new product which will incorporate these
        • under product data select simple product and the linked products tab, add products into up-sells
      • Cross-sells – a chance to sell an additional product. Bought a phone – why not add a case?
      • Grouping – set this to group the product with other items.
    • WooCommerce add new product: linked prodcts
    • Attributes:  An option to define additional custom properties.  If you specialise in a particular range of products then additional details may be appropriate. For example a painting may warrant water colour, oils, width /height and canvas.
    • WooCommerce add new product: attributes
    • Advanced: Additional options to enable a note to be sent to the customer with the purchase, to set the menu order and to enable customers to review products.

WooCommerce add new product: advanced

3. Generic product details

Accessed from the right hand panel, the generic product details are important to categorise and display your product information in the shop/catalogue

Product Categories: Enable you to associate your product with a particular category(ies).  These categories are used when displaying products.

Product Tags: A way to add an extra level of categorisation. Tags can be a great way of promoting products/website pages.

Product Image: A single large image is shown to represent the product. The image is uploaded in the usual way, either my selecting from the media images already in the library or by adding a new image from the local computer.

Product Gallery: If you wish to show more than one image then add more here.

Product Short Description: Does what it says, provides a short summary description about the product on list pages. Shown prior to clicking through to the full product details.


Link your Twitter Android app to your Twitter Account

Create a Twitter application to link your Android Twitter app with your Twitter account, enabling the posting of tweets from your Android phone or tablet.

Most of the Android Twitter apps make use of their own Twitter application by default.

Whilst this makes the configuration of the app easy, Twitter imposes a limit on the number of clients using a given application. A number of these clients have previously reached their client limit.

With your own Twitter application you are not reliant upon the configuration and maintenance of details by someone else.

Also the security keys which you use are unique to your application – much safer. And as many of the Twitter Android apps are at, or near the limit imposed by Twitter using your app allows someone else to make use of the default.

Create your own Twitter application, linking your Twitter Android app. Its easy to do and avoids any potential issues from using the default application associated with one of the Android apps.

The Twitter application provides two encrypted keys to enter in the Twitter app.

In this example I used Twidere, of coarse other apps are available.

In the Twidere app slide in from the left edge of the screen to show the configuration options.

From the settings select network, then scroll down to select default API settings.

On this page it is the consumer key and consumer secret which we shall be entering from our Twitter application.


Rather than the usual Twitter public website, we’ll start from wish the development website

At the top of the page click on my apps in the navigation at the top. This goes to No doubt you have a Twitter account – sign in with the details..

Create Twitter Application: Login

After logging in the shown page has a list of your existing Twitter apps.


Click on Create New App button


Enter the relevant details. It’s worth describing your app properly in the description, in case you wonder what it is in 6 months time. Ensure that your website link contains the full reference, including the http://


Select the tab for Keys and Access tokens


The consumer key and consumer secret values and shown.

Create Twitter application: Keys and Access Token

Whilst not needed at the moment I often create the access tokens at this time. Click on the button Create my access token to populate the values of the token and token secret.

Copy the application setting values of consumer key (API key) and  consumer secret (API secret) into the Twitter Android app. In our example we are using Twidere. Click OK to save.

Create Twitter Application: Twidere Android Client API Authorisation Settings

Your Android Twitter client app should now be good to go. Return to the list of tweets and try adding a new one.

Website Error 406 Not Acceptable

I like to run WordPress websites showing their URL as friendly URLs. The permalink setting of Post name ( is selected for this.

However, on a new WordPress website after clicking on Save changes I was getting a screen showing a 406 not acceptable error.

406 not acceptable

I investigated making this setting manually, editing the file .htaccess.

The section relevant to the permalinks was empty:

# BEGIN WordPress

# END WordPress

I was expecting something more akin to this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

As a workaround I added in the rewrite code and uploaded to the website. Refreshing the permalink page there was no difference. Reviewing the .htaccess file once more the content between the WordPress lines was once more empty.

Other content within the file was retained an actioned.

Searching the Internet for more details I found reference to ModSecurity.

And here it is on the control panel:

406 not acceptable :control panel modsecurity

Whats the default setting for ModSecurity? Is it active and can it be turned off?

To begin I clicked on the ModSecurity icon.

406 not acceptable :control panel configure modsecurity

In the top row click on the Disable button

406 not acceptable :control panel disable modsecurity

Confirm Disable all.

There you have it: Correcting the 406 Not acceptable error by disabling ModSecurity.

WooCommerce Sort by Custom Field

Modify the WooCommerce catelogue ordering to sort using your own custom field.

Rather than taking the products by alphabetical order, or whatever, I wanted to be able to fine tune the ordering and be more specific.

I chose to add a custom field to the WooCommerce shop products. This would then be used as my sort argument.

WooCommerce sort by custom field

Shown in the image above is the extra field called seq_num. To fit products in between each other the number given can be to a fine graduation.

To give the custom ordering based upon the custom field value I tweaked the WooCommerce function woocommerce_get_catalog_ordering_args.

Here’s the addition to the functions.php file

add_filter('woocommerce_get_catalog_ordering_args', 'woocommerce_get_custom_ordering_args');

function woocommerce_get_custom_ordering_args( $args ) {
$args['order'] = 'ASC';
$args['meta_key'] = 'seq_num';
$args['orderby'] = 'meta_value_num';
return $args;

Why add ALT Text to an Image?

Adding ALT text to a website image is good for SEO, but is that all?

The image alt text is the short phrase that pops up when you hover over an image.

The alt text can also be shown when the image fails to load or download.

The alt text parameter associated with a website image is best known for its SEO requisite. However, it’s also important for Braille, screen readers and in case the image fails to download.

Oh, and if someone is viewing your website with the Lynx web browser.

Reasons to add Image alt Text

To summarise, adding descriptive text to your images is good for:

  • SEO
  • Search engine indexing
  • Braille readers
  • Screen readers
  • Disabled image download


SEO ranking is acheived through a number of factors. Amongst these is the quality of the underlying HTML code.

SEO includes adherence to the standards defined for website design and build.

Badly written website HTML code can adversely affect a website’s search engine ranking.

Included within badly written HTML code is the omission of the alt text from an image. So yes, not supplying this text can impact on your website.

Good alt text may also be used in promoting the web page and the image on the search image results. The text may help to have your image shown on the Google search results, image listing.

Search Engine Indexing

The search engine robots, crawling the Internet, are not able to interpret an image, understanding how you perceive it to be used.

For example, you have included a picture of a building on a web page. The alt text may be used to clarify its context. Perhaps you provided the interior design; your company is based here; as an architect it interests you; or maybe it’s simply a lovely building which inspires you.

Adding alt text to the image will clarify, to the search engine robot the context in which you are using the image.

Otherwise the only available reference info is the file name, and dependent upon the context within the surrounding text.

Screen Readers

A screen reader will convert the text on a web page to synthesised speech, or braille, allowing those with limited sight to browse the Internet, hearing the content of web pages.

Screen readers operate by converting the text content of a web page to either speech or braille. The text content for conversion includes not only the visible sentences of text but some of the underlying code to. To best understand a web page’s content a screen reader will handle elements such as tables and images by cleverly giving more information such as highlighting the table headers.

A screen reader will work best where the underlying HTML code is correctly structured. Making use of the less visible parameters such as the image alt text.

Simply having an image with no description, or the original camera file name won’t be of help.

Image Download Disabled

Disabling image download is the correct setting for best security, when configuring an email client.

Although not a page on your website it does illustrate the importance of adding a descriptive text to your images.

Why add alt Tex to an Image: Lynx Browser

A basic editor, such as Lynx doesn’t handle images. A useful tool if your desktop windowing system has crashed, or you are accessing via a terminal session.

Adding the alt Text

It’s really easy to add the alt text associated with an image.

The common CMSs all offer an easy option to add the descriptive text to the images.

For example WordPress, when editing an image in the media pages or on a page or post offers the alt text as a text box to be completed when editing an image. As shown in the image below.

Image alt Text WordPress Attachment Details

The WordPress CMS offers the appropriate text fields, when editing an image. Other CMSs do likewise.

If you are interested in how it’s implemented in HTML. It’s simply the addition of the parameter alt, as shown in the simplified version below, of the phone box image:

<img  src=”” alt=”Image alt Text WordPress Attachment Details” />

Further Reading

For more information about why you should add alt text to your website images there’s a wikipedia screen reader article and RNIB has info about assistive technology, also read about the BBC’s view on accessability of their website with screen readers and WebAIM has details about designing for screen reader compatibility

DNN FAQ Unknown Server Tag dnn:DnnListBox

Catching up with DotNetNuke site updates I observed an error on a page with the FAQ module installed.

The website had been updated to DNN 8.0.4.

Bellow is the DNN FAQ module error

DotNetNuke.Services.Exceptions.ModuleLoadException: Unknown server tag 'dnn:DnnListBox'. ---> System.Web.HttpParseException: Unknown server tag 'dnn:DnnListBox'. ---> System.Web.HttpParseException: Unknown server tag 'dnn:DnnListBox'. ---> System.Web.HttpException: Unknown server tag 'dnn:DnnListBox'. at System.Web.UI.TagPrefixTagNameToTypeMapper.System.Web.UI.ITagNameToTypeMapper.GetControlType(String tagName, IDictionary attribs) at System.Web.UI.MainTagNameToTypeMapper.GetControlType(String tagName, IDictionary attribs, Boolean fAllowHtmlTags) at System.Web.UI.ControlBuilder.CreateChildBuilder(String filter, String tagName, IDictionary attribs, TemplateParser parser, ControlBuilder parentBuilder, String id, Int32 line, VirtualPath virtualPath, Type& childType, Boolean defaultProperty) at System.Web.UI.TemplateParser.ProcessBeginTag(Match match, String inputText) at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding) --- End of inner exception stack trace --- at System.Web.UI.TemplateParser.ProcessException(Exception ex) at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) --- End of inner exception stack trace --- at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseFile(String physicalPath, VirtualPath virtualPath) at System.Web.UI.TemplateParser.ParseInternal() at System.Web.UI.TemplateParser.Parse() at System.Web.Compilation.BaseTemplateBuildProvider.get_CodeCompilerType() at System.Web.Compilation.BuildProvider.GetCompilerTypeFromBuildProvider(BuildProvider buildProvider) at System.Web.Compilation.BuildProvidersCompiler.ProcessBuildProviders() at System.Web.Compilation.BuildProvidersCompiler.PerformBuild() at System.Web.Compilation.BuildManager.CompileWebFile(VirtualPath virtualPath) at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.UI.TemplateControl.LoadControl(VirtualPath virtualPath) at DotNetNuke.UI.ControlUtilities.LoadControl[T](TemplateControl containerControl, String ControlSrc) at DotNetNuke.UI.Modules.WebFormsModuleControlFactory.CreateModuleControl(TemplateControl containerControl, ModuleInfo moduleConfiguration) at DotNetNuke.UI.Modules.ModuleControlFactory.LoadModuleControl(TemplateControl containerControl, ModuleInfo moduleConfiguration) at DotNetNuke.UI.Modules.ModuleHost.LoadModuleControl() --- End of inner exception stack trace ---

I visited the DNN FAQ module on github, downloaded and installed the more recent updated version 08.04.00.

The error was gone!



Website Screenshots

I use website screenshots to explain details, show an example of previous work or highlight aspects of a web page.

Annotating a screenshot may help to convey information regards prospective work or actions and changes made.

Screenshots may also be used to record configuration and settings, for example email account setup.

Website screenshots may be taken either from within the browser using one of the extensions available or by capturing the whole browser view using a feature of the operating system.

The screen capture facility may capture the whole of the screen, active window, or offer the selection of a party area.

Dependant upon the device and operating system which you are using there is are number of options available.

Operating System

If you wish to take a screenshot of a programming window this allows the screen capture, either full screen, or one of the open windows.

Useful for capturing configuration details of email accounts and configuration. This can then be kept for prosperity, providing future reference.

Or the screenshot of the email configuration can be passed to/from your web hosting company when reviewing email account configuration and operation.

Apple and  Android allow screnshots to be taken directly with the use of keys.

Programming based

Programs are available which enable the capture of the screen’s content.

There is likely flexibility in the area which can be captured.

I use the program Spectacle which allows a time to be set before the capture is triggered. I can then navigate to a window and perform an action, for example hovering over a selection causing a drop down menu to appear. Two seconds later and the screenshot triggers capturing the window together with the mouse selection action.

Website Screenshots: Spectacle

Browser Based

If you wish to use the browser to capture the view of the page. Search the browser’s extensions for

  • Screengrab (FireFox)
  • Awesome Screenshot App (Google Chrome)
  • Nimbus Screenshot App (Google Chrome)
  • Marqueed Screenshots (Google Chrome)

I use Screengrab on Firefox.

A browser based Screengrab allows the the capture of the browser window, or a part thereof. But it is restricted to the browser and didn’t give access to the other programs opened.

A browser based screenshot program had the familiarity across different operating systems, for example if you are using Chrome on Windows and Mac.

How to Disable KWallet Popups when Starting Programs

Opening some programs in KDE also causes the KDE wallet popup window to appear.

Indeed when I close Vivaldi browser it opens once more.

I have found that the programs which open the KDE wallet dialogue are: Vivaldi browser; Google Chrome browser; and Choqok micro blogger.

I wanted to find the method to prevent the opening of the KDE wallet popup dialogue window. I began by searching on the internet for ideas. However, I finally found the answer in the system settings.

Disable KDE Wallet Popups

Having clicked to open the programs the KDE wallet dialogue window opens.

The kwalletrc file

I found reference to the kwalletrc file.

The dialogue being controlled in the file


Edits may be done either from the command line or by using an editor such as Kate.

Open the Dolphin file browser. This is in a hidden directory. To show it hold down the <alt> key and press the full stop. You can now navigate to the directory .kde/share/config.

Once there open the file kwalletrc for editing.

I chose to edit the file from the command line.

Sample contents of the file:


Close When Idle=false
Close on Screensaver=false
Default Wallet=kdewallet
First Use=false
Idle Timeout=10
Launch Manager=false
Leave Manager Open=false
Leave Open=false
Prompt on Open=false
Use One Wallet=true

To the above add a [Auto Deny] section with the programs which you wish to disable the use of KDEWallet. For example:

[Auto Deny]

The service will need restarting for the configuration file to be re-read. Its easier to do this from the command line.

To find the KDE wallet process(s):

ps -A | grep wall
3683 ?        00:00:00 kwalletd5
10228 ?        00:00:01 kwalletd5

Therefore to restart the service use:
killall -9 kwalletd5

Alternatively logging out and back in again will ensure that the service is restarted.

But, I found that this hadn’t corrected my issue.

I decided to look to see if there was another configuration file. I found


which had the following content:


First Use=false

I added the lines previously added, giving:


First Use=false

[Auto Deny]

I restarted the kwallet service as previously

I had still failed to stop the popups.

System Settings

Really simple, I found reference to KDE wallet in system settings.

Open system settings, account settings and then disable the KDE wallet system.

Disable KDE wallet popups KDE wallet configuration

In the image above see checkbox – Enable the KDE wallet subsystem

I unticked the checkbox and this popup was shown

Disable KDE wallet popups allow saving wallet configuration settings

I entered my user password, NOT root.

I tried opening the programs again (Vivaldi and Chrome), with the same kwallet pop-up on opening and closing.

Left for further consideration. And did consider that maybe all will be resolved following  either a restart of logout/login.

When I next started the computer and tried opening these browsers no kwallet.

The opening of the kwalletrc dialogue box when opening some programs had been resolved.



Bootstrap3 One and a Half Offset

With 3 1/3 width columns, col-md-3, to be centred within a bootstrap3 col-md-12 I was looking at adding an offset at the left something similar to col-md-offset-1.

Centring 3 Bootstrap3 col-md-3 divs within a row requires an offset which is 1.5 times a single column width. ie. two of these widths, one each side, but we don’t need the one at the right end as we are using an offset.

The situation: for a website footer I was including a widget area which I wished to have 3 columns of links and corporate references.

To give a better looking footer I was looking to have larger side margins and use the bootstrap col-md-3 for each of the columns.

However, the one and a half width doesn’t exist in Bootstrap.

As a percentage this is 100% * 1.5/12 = 12.5%.

Looking at the percentage width assigned to a single width column this is given as 8.33333333%.

Working from the single column width to 1.5 times gives a width of 12.499999995%.

I looked at the other column widths to see a consistent under valuing of the percentage.

I chose to use this width as it gives a small space between the columns, and less chance of the widths summing up to cause the floats to drop onto the next line.

With the 12.499999995% width I created a new offset specific to the larger width devices of col-md-offset-1-half.
thus giving

@media (min-width: 992px) {
   .col-md-offset-1-half { margin-left: 12.499999995%;}

I was unable to add the offset within the layout, it being a series of WordPress widgets. As I was managing the content I made the assumption that all 3 widget areas would be occupied.

So having created the above additional column and handled the responsive offsets, whilst writing this I was considering my original implementation decisions.

I found it easier to add this offset to the first element

@media (min-width: 992px) {
   .footer .widget:first-child{margin-left: 12.499999995%;}    

I could increase the left margin to get the desired insert.

For smaller width screens the insert can be appropriately reduced, if desired.

Based on this view I returned to my work to redesign it using row padding rather than affecting the column offset.

I had investigated the idea of creating a one-and-a-half offset for use in centring 3 columns in a bootstrap3 row. However, as I was unable to edit the particular row layout chose to add a margin to the first child element, when viewed on larger devices.

Wi-Fi Authenticated and then Disconnected with DEAUTH_LEAVING

To connect a laptop to a Wi-Fi network I was using one of the USB devices.

I found that the network could be configured but the connection wasn’t being made.

To understand why the computer was failing to connect to the Wi-Fi iI looked at the syslog using

tail -f /var/log/messages

I found that it was authenticating and then aborting the authentication with the reason DEAUTH_LEAVING.

aborting authentication with 22:11:bb:ee:77:99 by local choice (Reason: 3=DEAUTH_LEAVING)

Here’s the messages log:

Jan 17 07:38:10 comp56 NetworkManager[447]: <info>  [1484638690.0736] Config: added 'ssid' value 'mywifi'
Jan 17 07:38:10 comp56 NetworkManager[447]: <info>  [1484638690.0736] Config: added 'scan_ssid' value '1'
Jan 17 07:38:10 comp56 NetworkManager[447]: <info>  [1484638690.0737] Config: added 'key_mgmt' value 'WPA-PSK'
Jan 17 07:38:10 comp56 NetworkManager[447]: <info>  [1484638690.0737] Config: added 'psk' value '<omitted>'
Jan 17 07:38:10 comp56 NetworkManager[447]: <info>  [1484638690.0769] sup-iface[0x80ccb680,aax000f79546295]: config: set interface ap_scan to 1
Jan 17 07:38:10 comp56 NetworkManager[447]: <info>  [1484638690.2228] device (aax000f79546295): supplicant interface state: inactive -> scanning
Jan 17 07:38:11 comp56 kernel: [  451.709320] aax000f79546295: authenticate with 22:11:bb:ee:77:99
Jan 17 07:38:11 comp56 NetworkManager[447]: <info>  [1484638691.1161] device (aax000f79546295): supplicant interface state: scanning -> authenticating
Jan 17 07:38:11 comp56 kernel: [  451.752904] aax000f79546295: send auth to 22:11:bb:ee:77:99 (try 1/3)
Jan 17 07:38:11 comp56 kernel: [  451.755677] aax000f79546295: authenticated
Jan 17 07:38:16 comp56 kernel: [  456.754570] aax000f79546295: aborting authentication with 22:11:bb:ee:77:99 by local choice (Reason: 3=DEAUTH_LEAVING)
Jan 17 07:38:16 comp56 NetworkManager[447]: <info>  [1484638696.1383] device (aax000f79546295): supplicant interface state: authenticating -> disconnected
Jan 17 07:38:26 comp56 NetworkManager[447]: <info>  [1484638706.1465] device (aax000f79546295): supplicant interface state: disconnected -> scanning
Jan 17 07:38:26 comp56 kernel: [  467.617419] aax000f79546295: authenticate with 22:11:bb:ee:77:99
Jan 17 07:38:27 comp56 NetworkManager[447]: <info>  [1484638707.0208] device (aax000f79546295): supplicant interface state: scanning -> authenticating
Jan 17 07:38:27 comp56 kernel: [  467.657640] aax000f79546295: send auth to 22:11:bb:ee:77:99 (try 1/3)

lsusb to find the chipset.

In my case it was RTL8188CUS.

Bus 001 Device 004: ID — Realtek Semiconductor Corp. RTL8188CUS 802.11n WLAN Adapter

I found a number of articles on the Internet which reference the GitHub rtl8192cu-fixes chipset driver by pvaret.

Here’s the one which I followed: