How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin

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:

  1. Create a child theme of your current theme (if you haven’t)
  2. Create the folder structure for the WooCommerce shop page template in your child theme
  3. 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:

Step by step guide to create child theme in WordPress

Create the folder structure for the WooCommerce shop page template in your child 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:

create child theme folder

Let’s navigate to the theme folder and create a folder named woocommerce:

create woocommerce folder inside child theme

Inside that folder, we are going to create a file called archive-product.php

 

create shop page templete in woocommerce folder

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:

How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin 2

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.

How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin 3

Let’s go to our child theme folder, paste the file into woocommerce folder:

paste the single file in 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:

new shop page design from post template

The products are listed basically displayed as posts are.

We are going to use the power of WooCommerce shortcodes to make it looks like a real shop page. You can grab woocommerce shortcodes here to match your need.

So, for example, I want to display products from all categories in 3 columns, 12 products max. The shortcode will be:

[products limit="12" columns="3"]

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:

content of archive product

You should delete the part between <main and </main. Then, put the following code right at the position of the code you deleted:

<?php echo do_shortcode('[products limit="12" columns="3"]') ?>

The content of archive-product.php looks like this:

display the woocommerce shortcode in the shop page

Save the file and go to the shop page, here is what I got:

customize woocommerce shop page

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.

 

 

 

The Ultimate Nginx Configuration For WordPress Website

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:

  1. Full root access
  2. You can install anything you want on DigitalOcean
  3. Free SSL (Let’s encrypt)
  4. Cheaper
  5. 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:

  1. Website is not accessible. I got 502 Bad Gateway error every time I try to access my site.
  2. 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:

 

configure php-fpm www.conf

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.