Back to: BigCommerce 101
If you prefer complete control over the look and feel of your store layout, you may want to create custom child templates inside your theme. In this tutorial, we’ll show you how to create custom child templates that override the default templates used by BigCommerce for WordPress.
NOTE: This tutorial is a little more advanced than our usual format, and we’ll dive into some code editing. If you’re not comfortable editing code, don’t sweat it! Feel free to watch the video lesson anyway, then mark this complete and move on to the next video, where we talk about how to find expert BigCommerce developers who can customize your BigCommerce store layout for you!
To get started, log into your web server using your favorite FTP client, and open the BigCommerce for WordPress folder in your favorite code editor.
If you look inside the “templates” directory, you’ll find another directory named, “public.” This is where all of the customer-facing templates are kept.
Copy the entire directory to your active theme, and rename it to, “bigcommerce”.
Now, you’ll have complete control over every single template that BigCommerce uses.
However, if you do this, you will be responsible for maintaining every single BigCommerce template, which may be cumbersome if changes are required. So instead, we recommend only creating child templates for the layouts you want to modify.
With that in mind, let’s customize the product single template. The template in our example is named, “product-single.php” and can be found inside the public templates directory, nested in “components” and then inside “products.”
Be sure to match the directory and file-name structure inside the “public” directory exactly. Inside your theme, begin by creating a new directory named “bigcommerce.”
Inside the “bigcommerce” directory, create a subdirectory named “components.”
Then, inside the components directory, create another named “products.”
Now, you can copy the template file from BigCommerce into your theme.
One final note of caution: It’s incredibly important that you do not remove the class names or data attributes inside your custom child templates. These are required for the plugin, and therefore your store, to function properly.
In our example, we’ll add a simple customer service banner to the top of the single product template, by pasting some custom HTML directly after the first closing PHP tag — starting on line 16 — and then save the changes.
After making changes, you can switch to your web browser to review the changes.
You can repeat this process for any template you want to customize. Just be careful to keep the directory and file names the same!
Finally, if you only need to make simple alterations, like the one in this example, you may prefer using hooks to inject the content. In some cases, these are easier to maintain than entire template files. View the official documentation on creating hooks.
