Want to customize the shop page using page builders such as Elementor, Beaver? Check this guide out.
WooCommerce shop page is like a category page in WordPress, there is no built in tool (like the editor) to customize its look. If you have been trying to customize WooCommerce shop page without any success, you are at the right place. At the end of this post, you will know everything you need to customize your shop page to your liking. Let’s get started.
Here are the steps we are going to do to customize the shop page:
Create a child theme of your current theme (if you haven’t)
Create the folder structure for the WooCommerce shop page template in your child theme
Creating content for your WooCommerce shop page
Create a child theme of your current theme (if you haven’t)
Creating a child theme is necessary to customize woocommerce shop page. Actually, if you want to do any customization to your theme or other plugins (such as WooCommerce), create a child theme. It is the safest way to add functions or change styles in WordPress. Creating a child theme isn’t hard. I’ve made a tutorial here so you can follow easily. It will not take you more than a few minutes to read:
Create the folder structure for the WooCommerce shop page template in your child theme
IMPORTANT! Your editing interface might be different to what I’m showing here. However, the files are under yoursite/wp-content/themes/your-theme
So I assume that you have created the child theme. In this example, I’ll use a child theme that I’ve created for storefront. The theme folder is storefront-child-theme:
Let’s navigate to the theme folder and create a folder named woocommerce:
Inside that folder, we are going to create a file called archive-product.php
This archive-product.php is the WooCommerce shop page template file.
Now, if you have followed and done all the steps mentioned above (with the child theme activated), when you visit your shop page, you should see a blank page.
Congratulations, you have successfully customized your WooCommerce shop page.
Creating content for your WooCommerce shop page
Now, it is totally up to you to customize the design of the shop page. If I open the file archive-product.php in a text editor and put the following content:
<h1>Hello this is the shop page</h1>
Then, if I go back to the shop page, sure enough, I’ll see this:
It doesn’t look really attractive though. If you are confident in your design and HTML skills, you can stop reading here and start working on your shop page. However, if you just need something that has similar layout to your post’s and allows you to control the products that display on it, read on.
Create shop page template from post’s template
Now, let’s see how quickly you can customize your store shop page using your post’s template. Let’s go to the parent theme of the child theme you’ve created and copy a file named single.php. If that isn’t available, you can copy index.php instead. In my case, I have both single.php and index.php available so I’ll choose single.php.
Let’s go to our child theme folder, paste the file into woocommerce folder:
Now, let’s delete the archive-product.php file and rename the single.php file to archive-product.php. Basically, we’ve replaced the archive-product.php file with the post’s template file.
If I go to the shop page now, I’ll see something like this:
The products are listed basically displayed as posts are.
So, for example, I want to display products from all categories in 3 columns, 12 products max. The shortcode will be:
But where do you put the shortcode? In the archive-product.php file of course.
Let’s open archive-product.php file (inside your child theme folder/woocommerce). Different theme has different structure. This is mine:
You should delete the part between <main and </main. Then, put the following code right at the position of the code you deleted:
The content of archive-product.php looks like this:
Save the file and go to the shop page, here is what I got:
You can see, it looks a lot like a shop page now. If you know HTML, you can add additional code in to make the page more lively. In my experience, I just need to play with shortcodes to accomplish my desired design.
Conclusion
That’s it! That’s how you customize WooCommerce shop page. As always, I hope you find the tutorial helpful. Don’t hesitate to ask if you have questions.
So recently I decided to move my server from HostGator to DigitalOcean droplets. In comparison, DigitalOcean has so many benefits over HostGator, especially for developer. The most notable are:
Full root access
You can install anything you want on DigitalOcean
Free SSL (Let’s encrypt)
Cheaper
More powerful server (2GB of RAM, 50GB SSD, 2TB transfer for just $10/month)
My website was running on Apache server at HostGator. As I’ve heard so many good things about Nginx, I decided to make the change. Installing Nginx was easy. However, as I’m not familiar with Nginx, I spent more than a day to solve these two issues:
Website is not accessible. I got 502 Bad Gateway error every time I try to access my site.
When I was able to access my site. All pages/posts are 404 except the home page.
So, to save you time, I’m going to share my configurations so you can follow and get your site up and running fast on Nginx.
Configure PHP FPM
First, let’s edit you php-fpm www.conf file. I’m running php7.2 so the file is located here:
/etc/php/7.2/fpm/pool.d/www.conf
However, if you are running a different php version, you may have different path. The trick is to cd from /etc the ls to see the list of folders. For example, if you have php 7.3, the path would be:
/etc/php/7.3/fpm/pool.d/www.conf
Edit the file using your favorite editor. I’m using vim so I type:
vim /etc/php/7.2/fpm/pool.d/www.conf
Let’s navigate to the line says:
listen = /run/php/php7.2-fpm.sock
Comment that line by placing a ; at line start and type the following line below:
listen = 127.0.0.1:9000
Now it will look like this:
Save your file and restart php fpm. I’m on ubuntu 18.04 so my command to restart php fpm is this:
systemctl restart php7.2-fpm
However, if you are on a different server, the command could be different. You can google for the exact command for your system.
Configure your site’s server block
Let’s go to:
/etc/nginx/sites-available/
And create a file match your domain name. For example, my site is excelautocomplete.com, I’ll create file called excelautocomplete.com
vim excelautocomplete.com
then enter the following content to the file:
# WordPress single site rules.
# Designed to be included in any server {} block.
# Upstream to abstract backend connection(s) for php
upstream php {
server unix:/tmp/php-cgi.socket;
server 127.0.0.1:9000;
}
server {
## Your website name goes here.
server_name domain.tld;
## Your only path reference.
root /var/www/wordpress;
## This should be in your http block and if it is, it's not needed here.
index index.php;
location = /favicon.ico {
log_not_found off;
access_log off;
expires max;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location / {
# This is cool because no php is touched for static content.
# include the "$is_args$args" so non-default permalinks doesn't break when using query string
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
#NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
include fastcgi.conf;
fastcgi_intercept_errors on;
fastcgi_pass php;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires max;
access_log off;
log_not_found off;
}
}
You need to pay close attention to two fields:
server_name
root
in server_name, type in your website address (without http or https). In the root field, enter the location of your site’s file (the folder that contains wp-content, wp-admin…)
Save the file and reload nginx.
systemctl reload nginx
Now, your site should be up and running without an error.
Conclusion
Moving my website from Apache to Nginx was a challenging but exciting experience for me. I lost a sales due to my customer cannot get to the download page of the product. However, I’ve learned a lot from this experience and next time when I need to move other sites, the whole process would be much faster and easier.
Hopefully, the post has been helpful to you. If you have questions, don’t hesitate to ask.
If you are reading this post, you may have heard of the good things that a child theme bring. Most of the time, you like the look and feel of the parent theme, however, you still need to modify a bit to your liking. This is the perfect case to create child themes in WordPress. Another example is when you want to alter some functionalities of the parent theme such as change the WooCommerce shop page design. Once you know how to create a child theme, there are many great things you can do. Without further ado, let’s learn how to create child themes in WordPress.
There are two ways you can create a child theme in WordPress. If you are comfortable with creating folders and files, then take a look at the second method below. However, if you want an easy way, maybe using a plugin to create your child theme is the right way.
Create child themes in WordPress using plugin
We are going to use a plugin called Child theme wizard. Let’s go to Plugins->Add new and type Child theme wizard in the search box:
Let’s click on Install now and wait until the text on the button change to Activate. Click on Activate.
Now, go to Tools->Child theme wizard:
If you are creating a child theme, chances are you want to add styles or function to the current active theme. Thus, you should leave the parent theme as the currently active one (however, you can create a child theme for any theme available in your themes folder).
Next, let’s enter some details. You can enter anything you like in these boxes. When you are done, click on Create Child Theme.
After a few seconds, you should see this notice:
The child theme was created successfully.
Now, let’s go to Appearance, you should see the child theme listed there:
Now you can activate the child theme and write additional styles and functions to your site.
Create WordPress child theme by manually creating the theme files
If you want to create the folder structure for the child theme yourself, let’s follow the instructions below:
Here are the steps we are going to do to create a child theme
Locate the parent theme that you want to create a child theme for
Create a folder to host the child theme’s content
Create the style.css file inside child theme folder to declare its information
Activate the child theme in WordPress dashboard
Let’s go through the steps above. In this post, I’m going to use my local development server (which runs Windows). However, you can apply the same concept to create child themes on cPanel or even through linux command line. If you need help, please let me know.
Locate the parent theme that you want to create a child theme for
The first thing you need to do is to find out which theme you want to create a child theme for. Let’s go to your wp-content/themes folder. Here I have some themes available:
I’m going to create a child theme for the theme storefront, which is the default theme of WooCommerce. It’s totally depend on you to pick the parent theme.
Create a folder to host the child theme’s content
Our next step is to create a folder to host the child theme’s files. I’m going to create a folder called storefront-child-theme. You can give the folder any name you want. However, the name should (not must) make it obvious to see the parent-child relationship. Some other good examples for child theme’ names are:
storefront-child
storefront-extend-theme
Now, in our wp-content/themes folder, we have these folders:
Create the style.css file inside child theme folder to declare its information
Our next step is to go to the child theme’s folder and create a file named style.css. This is the must-have file of any WordPress theme. Let’s enter the following details in style.css:
/*!
Theme Name: Storefront Child Theme
Theme URI: https://binarycarpenter.com/?p=1158&preview=true
Author: Dat
Author URI: https://binarycarpenter.com/
Template: storefront
Description: This is the storefront child theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child-theme
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
*/
There are quite some fields here (each field stays on one line). However, there are two fields you need to pay attention to. Those are Theme Name and Template.
These two fields are required and they have some strict rules you must follow:
For the “Theme Name” field, you can put anything you like in here but it must be unique across all your themes (on your site).
For the Template field, the value of this field must match the FOLDER NAME of this theme’s parent theme. In this example, the parent theme’s folder is storefront so I put storefront in the Template field. You should put this value according to your parent theme.
Let’s save the file and go to the next step.
Activate the child theme in WordPress dashboard
Now we have successfully created the child theme for storefront. Let’s go to Appearance->Themes inside WordPress dashboard to activate it:
As you can see, we now have a new theme called Storefront Child theme. Let’s hover on it and click on activate. The site is now running our new child theme. Now you can start working on writing custom CSS styles, additional functions in the functions.php files…
Conclusion
Child themes bring a lot of flexibility to your WordPress site. Knowing how to create and work with child theme is important, even when you are not a developer. Child themes let you customize the styles and also add new functions to the parent theme. Hopefully the post has been helpful to you. If you have any questions, please let me know in the comment below.
It’s 2019 and nobody likes a slow website. With Google launching the AMP project, websites now can load in less than 1 second and that number has become the expectation of web users. Website with load time more than 3 seconds are considered slow. If you are like me, you’ve been trying a lot of methods to make your website load faster. However, with many factors contribute to the total picture, it is so difficult to do it manually, even though you are a developer.
Before we begin, let me share with you the screenshot of this website (https://binarycarpenter.com/) on GTMetrix.com after being optimized:
This is the result I achieved without using a CDN. If I used one, the YSlow score should be higher.
Now, let’s walk through steps that I did to achieve this.
Optimize all images with Smush Pro
Nearly 68% content of the web are images. This fact sound crazy but if you think about it a bit, you will see it’s quite reasonable. On blogs like this one, the content are text and images. Text doesn’t contribute much in term of size. Images are more prevalent in e-commerce sites where sites’ owners need to show many products’ images. If you don’t optimize your images well, your web page can be pretty big, up to several MB or even more.
Heavy websites load slower, no matter how fast the connection and powerful your server is. Slow websites drive visitors away, no matter how good your content or product are.
As you can see from my blog, I write a lot of tutorials. Many of them use screenshots to demonstrate the steps. That’s why I need to optimize my images badly. Downloading the images and optimize them then upload back to the server is not an option. Thus, I use Smush pro from WPMU dev. The plugin goes through all my images and optimize them to make their size small while preserve their quality:
All images are optimize with just a simple click.
Minify CSS, JS, HTML, enable caching with Hummingbird Pro
Honestly, there are many plugins can minify CSS, JS, HTML and combine them. One good example is W3 Total Cache. However, no other tools come close to Hummingbird Pro in terms on user interface. I love the design and the simplicity it brings to the users. I just need a few clicks to make the assets (CSS, JS, HTML) on my site minified. The plugin also support caching (again, you can achieve this with other plugins too but probably takes you more time).
Avoid unnecessary image, iframe loads with a3 Lazy Load
If your site has many images, enable lazy loading for your images is super important. Lazy loading is a technique that prevent images from loading if they are not needed. Sounds complicated? Actually, it is very simple. For example, you have 10 images on your blog post. One visitor comes to your post and read a few seconds then quit. He sees only two images before quitting. If you don’t have lazy loading enabled, all 10 images on that blog posts are loaded.
However, if you enable lazy loading, only the visible images are loaded. As a result, you save the bandwidth for that 8 images that the visitor never sees.
Enabling lazy loading also reduce page’s size, which makes your site load faster.
Hummingbird pro does a good job minifying css and js and even combine some of them together. However, Fast velocity minify goes a step further. You can see from the screenshot below:
Number of requests when Fast velocity minify is NOT enabled:
There are 41 requests total.
Let’s see the number of requests when I have this plugin enabled:
The number of requests dropped to just 15. That’s awesome!
Deactivate plugins that you don’t really need to save requests
One of the most effective way to improve your site’s speed is to get rid of plugins you don’t need. Plugins can add some cool features to your site. However, you should go through your plugin list and find out the one that isn’t vital to your site to get rid of them. One good example is the Add this plugin (that displays a floating social bar on your website). While it makes your site look nice and help your visitors share your content on social network easily, it contains heavy javascript and css resources that make your site load slowly. In addition, you should consider using a SEO optimized theme. Not all WordPress themes are created equal. From my experience, there are themes that have an amazing look but under the hood, they use so many external libraries that make the site super heavy, even without images. You definitely want to avoid those themes.
Conclusion
This is my personal experience with my site. The concept works in general. However, you may not achieve the exact result. I hope you can apply the tips in this post and make your site load much faster.
All plugins in this post are free except Hummingbird pro and Smush pro. The membership from WPMU Dev cost $49/month. However, if you are interested, I can set you up a super sweet deal that cost only $49/year with 2 months free test. Let me know if you are interested in the comment below.
Are you a dev? Checkout programming tutorials here: datmt.com
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
