How to Override Template Files in BigCommerce for WordPress
- Updated on: 2019-08-29
- Read original article here
The template files that ship with the BigCommerce for WordPress plugin are intended to cover most needs for most people. It could never cover all needs for all people however, so we followed the standard WordPress template override system to allow you to easily modify the templates to fit your needs. This makes BigCommerce for WordPress flexible enough to allow merchants to make the plugin elements match the rest of the site design and branding. I’ll show you how to override a template to make it do something new.
In this post we’ll reference some excellent resources, listed here:
My store is selling Minions, those little yellow chaps from the movie Despicable Me. I have some Custom Fields in BigCommerce that list Specifications. The template for Single Products can see those custom fields and automatically render them, but it does it nearly at the bottom of the page and in a format that I don’t desire.
Instead I’m going to reformat those fields into a nice HTML table and put it right below the image gallery where there’s currently an empty space.
I made four custom fields. You can read how in our custom fields documentation. I found my product in WordPress and then clicked the Open in BigCommerce link.
Then in the menu at the top I chose Custom Fields and created my four.
Then I went back to WordPress and again in the admin listing I found my product and clicked the Re-Sync link.
This gets the new information for that product without having to resync the entire catalog. Now our data is ready.
All of the template files are in the BigCommerce for WordPress plugin folder, but you don’t want to edit those. If you do then the next time there’s a plugin update all of your changes will be overwritten. So we need to move them into your theme.
Note: You don’t have to move ALL of the template files, only the ones you change.
The plugin folder is called bigcommerce, so you’ll find the template files in . The ones you probably want are in The components folder holds all of the small pieces of each page. You almost never want to work with the template files above components, they assemble all the small pieces. The ones we’re specifically going to be working with in this post are and
To copy these to your theme, make a folder in your theme called bigcommerce. Then we want to replicate paths starting with components. So we’ll copy our files into in our theme.
Here’s a screenshot of it in the twentyeleven theme.
Once the files are in the right place we can begin editing them.
At the top of you’ll see a list of variables that are available in this file. One of them is . Near the bottom of the file you’ll find it echoed. That’s all there is to the original method of printing them out. The data controller that serves this template does the work of getting the fields and organizing them all into one string held by .
We’re going to ignore that variable and pull the data out of the product data class ourselves. Find the line that looks like this:
and either comment it out, or remove it altogether.
You’ll also note that one of the variables is called $product. This is an object that holds all of the product data. The data itself is marked Private, which means you can’t access it directly, but the Product class provides methods for accessing that data. You can see all of these methods in the Product documentation (pro tip: scroll to the bottom).
The place I want my new code is right under the images. So I’m going to find the code that looks like this:
This actually calls the template, so we’re going to go edit that one.
We want to put our new code just inside the last
