Checkout: Using a child theme folder

Using a child theme folder in the WordPress Shopping Cart plugin.

By default, the Tribulant Shopping Cart plugin includes a default theme folder at wp-content/plugins/wp-checkout/views/default/ which contains all of the template files (PHP), styles (CSS), JavaScript (JS), etc. for the front-end that your users/customers see on the site.

You may want to change some of the template files, the styling, switch out images or even modify JavaScript which can be done in that folder but the main problem is that these custom changes will be overwritten when you upgrade/update the Shopping Cart plugin. We built a child theme folder system so that you can host your changes outside of the actual plugin folder.

Creating and using a child theme folder is quick and easy for anyone. Let’s use an example as reference so that you can follow the instructions below. In this example, we want to make CSS changes to the wp-content/plugins/wp-checkout/views/default/css/style.css file and we also want to change some HTML in the subscribe widget, which is wp-content/plugins/wp-checkout/views/default/widget.php

1. Create your child theme folder

Your child theme folder is named checkout and it will be created inside the folder of your WordPress theme. For example, if the folder name of your WordPress theme is twentyfourteen, then you’ll go to the wp-content/themes/twentyfourteen/ folder in your WordPress installation and create a checkout folder in there so that you now have the wp-content/themes/twentyfourteen/checkout/ directory.

If you are using a WordPress child theme of your parent theme, it works the same way. For example, if your WordPress child theme’s folder name is twentyfourteen-child, you’ll go and create the checkout directory, like this: wp-content/themes/twentyfourteen-child/checkout/

2. Copy files over to the child theme folder

In this example, we want to make modifications to two files in the Shopping Cart plugin‘s default theme. The two files are wp-content/plugins/wp-checkout/views/default/style.css and wp-content/plugins/wp-checkout/views/default/widget-cart.php

(Note that for display purposes, not all files are shown in the screenshot above. The plugin has many other files in the wp-checkout folder, we are just showing the two files for the example)

Go into FTP and copy the two files files from the above mentioned two locations and paste them in wp-content/themes/twentyfourteen/checkout/. Only copy over the files that you want to modify, not everything inside the Shopping Cart plugin’s wp-content/plugins/wp-checkout/views/default/ folder. So in this example, you’ll only copy two files over. Also, keep the same structure inside the child theme folder as it is inside the default theme folder.

You’ll end up with wp-content/themes/twentyfourteen/checkout/style.css and with wp-content/themes/twentyfourteen/checkout/widget-cart.php

3. Modify the child theme folder files

You can now go and make changes to the two files you copied over and you’ll see that these files are served by the plugin and that the changes will take effect on the site.