How to Customize the Pricing Display on BigCommerce for WordPress
Clearly displaying your pricing tiers can not only help improve the shopper’s experience but also potentially lead to higher conversion rates. If you’ve ever been curious about adjusting the way the pricing looks on your BigCommerce for WordPress storefront, I’m glad you made it here. In this tutorial, we’re going to do just that, together! No matter what your technical background is, the goal of this tutorial is to provide you with code snippets and screenshots that guide you to make the changes you hope to see on your store.
TL;DR:
A WordPress local development tool, a code editor in addition to the ‘c’, ‘v’ & control/command keys is all you need to modify how the sale price is displayed on your BigCommerce for WordPress storefront.
Our objective is to make this pricing component (default):
Look like this pricing component (customized):
You can find the code I used to make these changes to the price component in the ‘Add the Code’ section of this article. Scroll down to copy/paste this into your product-price.php template. 😉
Pre-Requisites
Before we get started, there are a couple of must-haves you’ll need to follow along with this walkthrough.
- Having sale prices listed on your products.
- Syncing these to your WordPress storefront.
- A local development environment (I will be using Local to manage my local instance & VSCode for my code editor of choice.)
Local is a free local development tool that allows WordPress developers to work on their local WordPress instance and access the WordPress database. If you are not using Local, you can unzip the downloaded theme files and upload them to the ‘themes’ folder in your code editor to have access.
Tutorial
Add Sale Prices & Sync Products
Before modifying the WordPress templates, make sure you have all of your desired sale prices listed via the BigCommerce Control Panel. If you do not have those set up yet, check out these options:
Need to update a lot of products? (Very common option when updating more than a few products.)
- You can mass import products that have your desired prices using the Bulk Edit Template via Products > Export & Products > Import in the Control Panel. Instructions on how to mass import/export products can be found in this Knowledge Base Doc. After you have your products imported to BigCommerce, you’ll need to sync them over to your WordPress instance.
Need to update only a few products? (What we’ll be doing today!)
- Navigate to the BigCommerce Control Panel > Products. You can get here directly from BigCommerce or through the ‘Manage Product in BC’ option in your WordPress Dashboard. Once here, manually update the price then head back to your WordPress dashboard to re-sync this/these product(s).
Download & Activate the Child-Theme
Now that we have prices set up in BigCommerce for our products, the next step is to download or create a child theme for your current theme.
A child theme is what allows you to use template overrides for your customizations. When you customize the files for the theme’s ‘child-theme,’ your changes are safe from being reverted when BigCommerce releases a new version of the plugin. Depending on your theme, you may have to create your own child-theme, to host your template overrides. Template overrides are basically a copy of the original template which allows you to edit your theme files while keeping a ‘source of truth.’ If you’d like to learn more about the WordPress Hierarchy, you can do so here.
To follow along with me, download the Kadence Child-Theme by visiting this link. If you need to create your own child theme, you can use the Child-Theme Generator Plugin for assistance. If you’d rather manually create the child theme, there are some resources linked below which can guide you. Once you download the theme from your browser, add and activate the child theme to your WordPress Storefront.
Open your site in VSCode
Navigate to your website’s code base in your terminal. If you have the VSCode terminal extension configured, use the command ‘code .’ to open the files in VSCode. If not, you can manually open your site’ folder in VSCode directly.
A folder called ‘Local Sites’ is placed on your computer to house your WP Theme’s Templates, when you are utilizing Local. All themes you have will be listed under the name of your store, nested inside of app > public > wp_content > themes. In my example, this is BC4WP > app > public > wp_content > themes > Kadence-Child.
Start your Site
- Open the Local dashboard and select “Start Site”.
- Once you start your site, navigate to the site by selecting “Open Site”
Create your File Structure
To create successful template overrides, you will need to copy the original template that you’d like to modify and paste it into the child theme’s appropriate folder structure. The original templates can be found on the BigCommerce for WordPress Github. Once you have the contents of this file copied, paste it inside your child-theme (in this example: Kadence-Child). The file path will almost be the same, the only difference is there should be no ‘public’ folder.
To break it down —
To override the file located in /bigcommerce/templates/public/components/products/product-price.php,
the child template folder structure, needs to be: kandence-child/bigcommerce/templates/components/products/product-price.php
To create this file structure in vscode, you can right-click on the child theme folder (Kadence-Child) and select ‘add file’ then paste this into the file name: bigcommerce/templates/components/products/product-price.php
The reason we’re updating this file is that the pricing block you see here is a component. Meaning that this is reused anywhere product pricing is displayed.
Add the Code
Inside the template override, you can either copy & paste the following code (this is the entire template file) or review it and decide what you’d like to take.
Note: The following code snippet is from my example using the Kadence child-theme. If you’re using an alternative theme, the code here may need to be modified slightly as the changes may not be 1:1 on your storefront.
<?php/*** Component: Product Price** @description Display the price for a product** @var Product $product* @var string $visible HTML class name to indicate if default pricing should be visible* @var string $price_range* @var string $calculated_price_range* @var string $retail_price* @version 1.0.0*/use BigCommerce\Post_Types\Product\Product;?><!-- data-js="bc-cached-product-pricing" is required. --><p class="bc-product__pricing--cached <?php echo sanitize_html_class( $visible ); ?>" data-js="bc-cached-product-pricing"><?php if ( $retail_price ) { ?><!-- class="bc-product__retail-price" is required --><!-- class="bc-product__retail-price-value" is required --><span class="bc-product__retail-price"><?php esc_html_e( 'MSRP:', 'bigcommerce' ); ?> <span class="bc-product__retail-price-value"><?php echo esc_html( $retail_price ); ?></span></span><?php } ?><?php if ( $product->on_sale() ) { ?><!-- class="bc-product__original-price" is required. --><span class="bc-product__original-price"><?php echo esc_html( $price_range ) ?></span><!-- class="bc-product__price" is required. --><span class="bc-product__price bc-product__price--sale"><?php echo esc_html( $calculated_price_range ); ?></span><?php } else { ?><!-- class="bc-product__price" is required. --><span class="bc-product__price"><?php echo esc_html( $calculated_price_range ); ?></span><?php } ?></p><!-- data-pricing-api-product-id & data-js="bc-api-product-pricing" is required. --><p class="bc-product__pricing--api" data-js="bc-api-product-pricing" data-pricing-api-product-id="<?php echo esc_attr( $product->bc_id() ); ?>"><?php if ( $retail_price ) { ?><!-- class="bc-product__retail-price" is required --><!-- class="bc-product__retail-price-value" is required --><span><?php esc_html_e( 'MSRP:', 'bigcommerce' ); ?></span><span class="bc-product__retail-price"><span class="bc-product__retail-price-value"></span></span><?php } ?><span>Original: </span><!-- class="bc-product-price bc-product__price--base" is required --><span class="bc-product-price bc-product__price--base"></span><!-- class="bc-product__original-price" is required --><span class="bc-product__original-price"></span><!-- class="bc-product-price bc-product__price--sale" is required --><?php if ($product->on_sale()) { ?><span> Sale Price: </span><?php } ?><span class="bc-product__price bc-product__price--sale"></span></p><style>.bc-product__pricing--api {display: flex;flex-direction: column;}</style>
In Local, select ‘Open Site’ to reflect your changes!
Final Outcome
Conclusion
This tutorial is designed to be a starting point to setting up your local WordPress environment and separating the pricing component. From this point, you are now able to add additional customizations to your storefront and to add as much CSS to the pricing values as your heart desires!
Keep in mind that if you’re having a hard time modifying a specific section of your store, check to see if it’s possible that the section in mind is a reusable component. If that’s the case, you will need to create a template override for that specific component instead.
If you found this tutorial helpful or would like to provide feedback for us to improve, let us know in the comments below or by tweeting @BigCommerceDevs.
Resources
In addition to this tutorial, here are some resources that can be helpful to you as you modify your templates HTML, PHP & CSS.
