I had a problem where customers could not see or not wanted to see “SOLD OUT” by scrolling down on mobile and instead calling or messaging for product availability or in stock. So I wanted to show the “SOLD OUT” or “STOCK OUT” or sale badge in mobile with CSS so visitors don’t get confused and see stock out when visiting a single product woocommerce page.
Why choose CSS to make or add changes for woocommerce product badge?
I chose CSS rather than Javascript because CSS is easier to apply and does not interfere too much and for me, CSS is easy to apply and less hassle. You can use javascript but too much javascript is not good as per my experience. CSS does not break a website or create critical errors like javascript if applied by mistake.
How to choose which class to take for applying CSS?
WooCommerce default classCSS :before
Check my screenshots you need to find out the CSS container where you need to put the “SOLD OUT” text and you can put text using :before or :after with content: " "
.product and .outofstock are default classes by WooCommerce that are auto-generated so I took those as references and applied the CSS. As per your given theme’s structure, your CSS class will have different configurations and child classes so it is better to play around with classes.
If you found the perfect CSS class just copy and paste the code below by replacing your CSS class and you will have a badge with your text, for me it’s SOLD OUT.
For quite a long time, I was having problems with my server and have been optimizing since then and have taken different steps to minimize my woocommerce e-commerce website to eat less resources. We all know WordPress is heavy and woocommerce makes it much heavier, therefore my real-life experience will surely help you to maximize your server resources which is good for website loading speed and will improve google crawl budget by preventing search engine bots to not take an excessive amount of resources to crawl the website. Follow to the end to learn how to stop search engines from crawling “add_to_wishlist” link to save server CPU resources.
Why should I restrict or disallow crawling bots of search engines?
links that are taking more resources and making the server slow
Bots use the resources of the server like a real human visitor, therefore if you have limited resources on your server it will use those resources CPU RAM to crawl and go link by link. In our case, we “Disallow” bots to crawl “add_to_wishlist” links on our woocommerce ecommerce website so that our server has enough resources to handle real visitors who are visiting our website and not making the website down or slow.
google crawled but did not index such links
Here google bot was crawling “add_to_wishlist” links which are of no use in terms of SEO moreover google is not indexing those links so I decided to “Disallow” bots to crawl links “add_to_wishlist” using robots.txt.
What is robot.txt and how it can help to stop search engines from crawling links?(main step)
This is txt inside root folder of a website, that tells search engines to crawl or not to crawl. To check your robot.txt file from google search console go to this link. Below is an example of what can be inside robot.txt file.
Here we are disallowing google or search engines to crawl that specific type of link. Therefore unnecessary usage of resources from the server will be saved. After adding Disallow you can check it in action like the screenshot below from search console.
screenshot from search console
To Edit and save robot.txt, you need to download the file and upload it to your website’s root folder.
How to check robot.txt file from Rank Math SEO plugin?
screenshot for Rank Math plugin to see robot.txt
Let us continue our article and read below to know more about server usage and find the issue.
How did we find that specific type of link crawled by google bot is causing the CPU usage 100% ?
At first, we were seeing extremely slow website and nothing was loading showing database connection errors on certain periods when our visitors were low on the website reported by google analytics. Then we checked our hosting provider Cloudways they are very good as per their customer service and hosting quality and really fast comparatively offer great packages for WordPress. Most of the time we don’t have downtime unless there is a sudden spike in traffic but as we can’t see any visitors on google analytics, we check cloudways slow pages of our website like the screenshot below. Thanks to Cloudways support team and their panel.
We got a hint that add_to_wishlist link is being accessed at abnormally high rate which is not normal for any organic human visitors and must be of some type of bot. We dig deep and found IP location from google is accessing those links.
screenshot from Cloudways IP location panel
With help from IP locator tool we ensured this is a bot and planned to stop any bot from accessing the link of the wishlist.
Conclusion
When in any slow website situation, always first contact hosting support, most of the time they will give you hints or solve your problem but if something arises that looks abnormal like this crawling issue that hosting support can not solve, hire a web developer or contact an expert and in most cases, there can be multiple cases of such server CPU RAM issues. I look forward to solving problems for my clients and myself. This is my hobby to tweak and work with web development and internet. If you are facing situation that is hard to navigate, throw me an email and share this article to help friends and family.
Easy tutorial with video showing step-by-step process how to install WordPress free on PC in localhost using XAMPP. WordPress is the most popular blogging, website making software you can find nowadays. One of the most easiest and versatile Content Management System for websites. Plug and Play. Making and maintaining a complex website has never been easier than before with thousands of ready-made plugins and themes.
I hear from clients and saw queries with types of questions regarding Installing WordPress. One of the most common questions is:
How do I install WordPress for free on my PC and learn how to develop my WordPress website without spending on hosting, domain? Answer: Just follow this tutorial to the end or skip to the tutorial video at the end of this article.
The beauty of WordPress pulled you to this tutorial video. You already know what is WordPress and I am going to show you how you can install WordPress with few easy quick steps.
From their website, you can find detailed FAQs and Answers related to XAMPP software. XAMPP also helps to run Joomla, PHP scripts on a computer for Free. With XAMPP you can turn your PC into a mini server and can run a web-based application on your PC which normally takes paid servers, hosting like cloudways, GoDaddy to run.
It is better to install XAMPP on a different Drive and not on C drive, as XAMPP will run on your PC it will make pressure on C Drive causing PC to slow down from time to time, this is from my experience I am saying. All WordPress and websites lives inside “htdocs” folder inside XAMPP installed folder on your drive.
Step 2: Download WordPress
Go to https://wordpress.org/download/ and download the latest version of WordPress. Always use the official website for WordPress download
Extract the ZIP folder manually and copy the “wordpress” folder and paste it inside the “htdocs” folder of XAMPP
Rename the “wordpress” folder inside “htdocs” that you just copy pasted to your desired name
Step 3: Start the Installation process from the browser
Go to XAMPP control panel and click “start” on all services
Go to browser and type “//localhost/projecttwo/” here “projecttwo” is the folder name in my case inside “htdocs” folder therefore you need type the folder name of gave
Note: correct folder name and XAMPP must be running to start the installation with a browser, any mistake will not let you go to the next page from where the language selection starts.
After going to the correct URL from the browser, select the language, in my case it’s English and click “Continue”
on the next page, click “Let’s go, here you can read the instruction from the WordPress but as you are following this tutorial you don’t need to read it now and just follow the steps and proceed.
On the next page you will see you need to input Database Name, Username, Password – these details are necessary to connect the WordPress files with the database from XAMPP and you will get these details like Username, Password during XAMPP software installation. This Username, Password is universal for any installation you do inside XAMPP like WordPress or Joomla, so you must remember Username, Password and for Database Name, you need to create a new database every time from “phpmyadmin” and input the database name in “Database Name” field
To make a new Database go to browser and type “//localhost/phpmyadmin” this is also an universal URL for your XAMPP where you need to go to find all other databases of all wordpress, joomla installation. After going to “//localhost/phpmyadmin” follow the next screenhot
Go to “//localhost/phpmyadmin”
Click “Databases”
Write your desired Database name
Click “Create”
Copy the Database name for using next step
Paste the Database name you just created in “phpmyadmin” and Username, Password from XAMPP. For now keep Database Host, Table Prefix as it is default. Click “Submit”
Click “Run the installation”
On the next page, you need to enter personal information regarding your website
Site Title – as per your wish
Username – your own username to login into admin of WordPress
Password – any secure password to login to wp-admin of WordPress
Email – must use valid email here this email is very important, WordPress will use this email as primary email for communication with plugins, themes, or admin
Search Engine Visibility – is important when you let google to crawl your site keep it ON for SEO purpose
Click “Install WordPress”
On this step WordPress Successfully recorded your input and you are ready to login to WordPress dashboard or backend that is wp-admin of your new WordPress website, click “Log in”
Input your given details that you just gave above and click “Log in”
After logging in you will see Dashboard of wp-admin, this dashboard is visible to website’s admin and secured with your given username and password
You can type in your website URL to see what the new WordPress looks like, in my case, the URL will be “http://localhost/projecttwo/ “ this is what visitors will see when they visit the website (there is a video tutorial below)
Finally, WordPress installation is done, you can now rest a bit and enjoy your new WordPress website ☺
Video step by step on how to install WordPress free on PC guide you can follow of this whole tutorial
This tutorial covers following questions from my readers, followers, clients:
