Table of Contents
  • Docs >
  • 4. WooCommerce + ShimmerCat
Shortcuts

4. WooCommerce + ShimmerCat

WooCommerce + ShimmerCat

  • Do you own an online store developed in WooCommerce?

  • Are you an agency that develops e-commerces using WooCommerce?

  • Are you a WordPress - WooCommerce developer?

  • Would like to have significant loading time improvements on your website or deliver faster websites to your clients?

If you answer “Yes” to most of the questions above, then you have come to the right place. This tutorial is for you!

4.1. Prerequisites

We will assume that you have either:

In any of those cases you should already have created:

You should also have your WooCommerce store deployed somewhere, and note that you don’t need to change anything on your backend to test the tutorial. We have a WooCommerce demo store deployed using the ShimmerCat Accelerator and serving the WooCommerce backend with FastCGI. It is a way of deploying it, but you could also have your WooCommerce store deployed with Apache, and deploy edges servers using HTTP as fetch backend as well. If you need help with a different deployment process don’t hesitate to contact us at ops@shimmercat.com or through our ticket system..

We are sharing most of the configuration we have done on the demo to guide you with a practical example. See below.

4.2. The devlove.yaml file:

Most of the Woocommerce applications will have similar content to the one below, but if you have any questions or feedback, don’t hesitate to contact us at ops@shimmercat.com or through our ticket system.

We used fastcgi as consultant on the WooCommerce demo store, as you can notice below. In the devlove.yaml in the install-dir of your sc_pack, fill-in content similar to the one below, taking care of changing the connect-to and the domain names after elec with values that match your desired configuration:

---
shimmercat-devlove:
    domains:
        elec demo-woocommerce.shimmercat.com:
            root-dir: www
            views-dir: views-dir
            consultants:
                default: {application-protocol: fastcgi, connect-to: 'lookup(store-ip-address):port',document-root: /var/www/html/}
            change-url:
              - /wp-admin/ -> /wp-admin/
              - /wp-admin/<php_file:/([a-z0-9-]+).php/> -> /wp-admin/<php_file.1>/
              - /wp-config.php -> redirect_301 https://www.youtube.com/watch?v=y1dPQBEIixg
              - /wp-login.php -> /login/
              - /.well-known//+/ -> /.well-known/<+>
              - /.well-known//+ -> /.well-known/<+>
              - //+</\.(js|css|jpg|png|gif|bmp|txt|svg|woff2|woff|ttf|json)/> -> <*>
              - / -> /target/+common/
              - //+/ -> /target/+common/<+>
            changelist-settings:
                tOld: 72000
                tNew: 20

Important notes:

  • For simplicity, and because it is common, we have assumed that the pretty permalinks have been enabled (i.e. https://demo-woocommerce.shimmercat.com/%postname%/ ). In another case with a small adjustment in the devlove file we can serve any other structure of the url.

  • root-dir: www: It is where WooCommerce files are stored (relative to deploy folder); it can be a network mount, a local folder or an HTTP fetch backend.

  • document-root: /var/www/html/: The value ShimmerCat should pass in DOCUMENT_ROOT; this is part of the
    CGI specification, and it tells the PHP engine (PHP-FPM or HHVM) how to find a matching PHP file in its local filesystem. The fields document-root and root-dir should have the same value only if PHP and the edge’s deployment share the same view of the filesystem. Note that this is not the case for network mounts for example.

To know more about the fetch backends ShimmerCat supports take a look here.

4.3. A set of views for WooCommerce

Create all the directories, and files we list below under the sc_pack’s install-dir + devlove.yaml’s views-dir directory. For instance, if your sc_pack installation directory is /home/shimmercat/test/shimmercat-accelerator and the devlove.yaml contains views-dir: views-dir, then the first view listed below should be at /home/shimmercat/test/shimmercat-accelerator/views-dir/target/+common/index.html.

  • views-dir/target/+common/index.html

<!--
shimmercat:
    change-url:
       - /target/+common/ -> /index.php
    content-disposition: replace
-->

  • views-dir/target/+common/__index.html

<!--
shimmercat:
    change-url:
       - /target/+common//+/ -> /index.php
    content-disposition: replace
-->

  • views-dir/target/+common/no-slash/__index.html

<!--
shimmercat:
  content-disposition: replace
  change-url:
     - /target/+common/no-slash//+/ -> /index.php
-->

  • views-dir/target/+common/slash/__index.html

<!--
shimmercat:
  content-disposition: replace
  change-url:
     - /target/+common/slash//+/ -> /index.php
-->

  • views-dir/target/+common/pub/static__index.html

<!--
shimmercat:
    change-url:
       - /target/+common/pub/static//+ -> /pub/static/<+>
    content-disposition: replace
-->

  • views-dir/target/+common/login/index.html

<!--
shimmercat:
    change-url:
       - /target/+common/login/ -> /wp-login.php                                                                                                                                                                                                                            
    content-disposition: replace
-->

  • views-dir/target/+common/login/__index.html

<!--
shimmercat:
    change-url:
       - /target/+common/login/ -> /wp-login.php                                                                                                                                                                                                                            
    content-disposition: replace
-->

  • views-dir/target/+common/wp-admin/index.html

<!--
shimmercat:
   content-disposition: replace
   change-url:
     - /target/+common/wp-admin/ -> /wp-admin/index.php
-->

  • views-dir/target/+common/wp-admin/__index.html

<!--
shimmercat:
   content-disposition: replace
   change-url:
     - /target/+common/wp-admin/<filename>/ -> /wp-admin/<filename>.php
-->

If you want to know more about the rules and views we wrote above, please read: URL handling and re-writes and Views and devlove.

To run the service, you can use the command:

$ sc_pack ctl reload shimmercat

You can also start it at boot time.

As usual when testing a website locally:

  • modify your /etc/hosts to have that line: 127.0.0.1 your-domain.com

  • open a browser and visit: https://your-domain.com:4043/, that port depends on what you set on the sc_pack.conf.yaml of course.

Again don’t hesitate to contact us at ops@shimmercat.com or through our ticket system if you need our help with that.

Thanks a lot for your time, and keep reading!