BigCommerce Customization Guide: What Can You Do?
BigCommerce for WordPress (BC4WP) works for all common WordPress themes right out of the box and provides complete support for the Genesis theme system. The plugin comes with templates and stylesheets that allow you to make all of the elements and pages you’ll need to merchandise your items and guide customers through the checkout process, including Checkout Page, Product Cards, Product Detail Pages, Product Listing Pages, Product Archive Page, Registration, Cart Page, Customer Account, and Order History Pages, Shipping & Returns Page, Gift Certificate Page.
Although the plugin can work with any theme, you can choose to provide BigCommerce for WordPress support as a theme creator by styling the pages and elements generated by the plugin to match your theme’s style.
BigCommerce for WordPress is also available as an open-source project on GitHub, where plugin developers may fork it. Developers are encouraged to customize BigCommerce for WordPress to suit some unique use cases. Consider sending a pull request on GitHub to add your custom feature to the code base if you’re creating a feature that you think will help the wider community.
This guide will walk you through the various options for developing themes that help BigCommerce for WordPress and customizing the plugin.
Styling BC4WP Templates
The template files included with BC4WP are used to view BigCommerce data on your WordPress storefront. You may modify the content displayed as well as the styling of that content by editing these templates.
Templates location
The templates/public folder contains all of the BC4WP template files that render on the frontend. The following two templates in the templates/public/components subfolder make smaller content blocks within your theme’s template, while the templates in the templates/public/components subfolder dominate the entire page:
Single-bigcommerce_product.php: This template is used to create a single Product post.
Archive-bigcommerce_product.php: The template is used to make the archive of Product post types.
These models need to be tweaked to suit your theme’s style. Both templates use the functions get header() and get the footer to make your theme’s default header and footer().
The wrapper template contained in components/page-wrapper.php can be used to render the page material. You can provide consistent styling across your site by changing this wrapper template to fit your theme’s template’s HTML markup.
CSS
BigCommerce for WordPress makes use of PostCSS, a JavaScript tool that takes special CSS syntax and compiles it into standard CSS. PostCSS, when combined with PostCSS plugins, provides many of the key features of CSS preprocessors like Sass but with less overhead.
PostCSS modules can be found in the asset/pcss directory. The minified and uncompressed versions of the CSS files generated during the PostCSS build process are both stored in the assets/css directory.
Template overrides
When you upgrade a WordPress plugin, the latest version replaces any existing plugin files. It’s necessary to use overrides in your theme files rather than editing plugin files directly to ensure that your customizations last through updates.
Build a BigCommerce directory in your theme and copy the template file there to bypass any template.
When WordPress first loads, it looks for a custom template override in your theme’s /bigcommerce directory; if none exists, WordPress will use the built-in plugin template instead.
Required element classes
For JavaScript features, BC4WP relies on specially named element classes, and we strongly advise you to keep the default class names while creating custom templates. However, you are free to build additional classes.
Accessing BigCommerce Data
BC4WP helps you to access much of your BigCommerce data from your WordPress account. The steps below will walk you through gaining access to your goods, variations, platforms, clients, and customer classes.
Products
You can get a Product object if you have a WordPress post ID (which you can get by calling to get the ID() in the form of a template). If you own a BigCommerce product ID, you can use that to get the Product object:
$product = \BigCommerce\Post_Types\Product\Product::by_product_id( $product_id );
The $product variable is already available in the sense of several models. To see specified variables in that scope, look at the docblock at the top of the template file.
If the Product object is open, you can use the BigCommerce Catalog API to get all of the product’s cached details.
A list of methods available on the Product object can be found in the code reference.
To get the value of any data that isn’t explicitly revealed via a dedicated tool, use $product->get property().
The __get() process, which is already available on the Product object, can be used to retrieve the same properties. On the client side, the product ID will appear in a variety of locations. The ID you use is determined by the situation. Here are a few places to start:
On an Add to Cart button: var product_id = $(‘.bc-btn–add_to_cart’).attr(‘data-js’) On the product price: var product_id = $(‘.bc-product__pricing’).attr(‘data-product-price-id’)
The WordPress plugin is designed to work with post IDs rather than product IDs. On the client side, the latter is rarely needed.
In the browser, a REST API endpoint can be used to get more details about the product. Its main function is to support the WordPress admin’s product block GUI. You can also use it to get a limited subset of the product’s details from everywhere. /wp-json/bigcommerce/v1/products is the endpoint.
Variants
As described in the Products section, retrieve a Product item. After that, you’ll be able to get details about versions: $variants = $product->variants;
The returned objects will fit the BigCommerce API’s schema. Variant information is available in the product form on the client side. The schema does not exactly fit the data in the API. It’s been tweaked to suit the product’s requirements. The following are some of the properties: variant_id, price, formatted_price, SKU, disabled, disabled_message, image, option_ids
Channels
A Connections object provides access to the current channel. The answer is a WP Term object with the channel ID in the meta. On the client hand, the channel ID isn’t visible anywhere.
Customers
A logged-out user has no access to customer data. You can get information about a customer by creating a Customer object for a logged-in user. WordPress caches no customer information other than the customer ID. An API call will be made to get more details. On the client hand, the customer ID is nowhere to be found.
Customer groups
The customer group ID is accessible via the Customer object, just like the customer ID. WordPress does not cache any additional information about the customer community. The BigCommerce API, on the other hand, can provide you with more information. On the client side, the customer group ID is not visible.
Customizing CSS
Rather than editing the plugin stylesheets directly, add your CSS to your theme’s stylesheet to style BigCommerce for WordPress elements with custom CSS. The CSS in your theme will have specificity over the plugin’s styles and will override the default styles.
Opting out of BigCommerce styles
If you want to disable the built-in plugin styles entirely, you have the option to do so. Access the WordPress theme customizer and navigate to BigCommerce > Colors & Theme, and select Disable Plugin Styles from the CSS dropdown menu.
Hooks
Hooks are places where a developer can inject custom code during the WordPress execution process. There are two kinds of hooks: behavior and filters. During the WordPress lifecycle, both enable developers to run custom code. The distinction is whether or not the function returns a value: Actions run a function that produces no output. It would be overlooked even though a value was returned and Filters change a variable and return a value that is the original variable’s changed version.
BigCommerce for WordPress comes with over 100 hooks that can be used to configure and expand the plugin. Visit our Code Reference for a full, searchable list of all available hooks.
Architectural guidelines
All of the plugin’s behavior and filters begin with the bigcommerce/ prefix (for example, bigcommerce/init). If the hook has a dynamic aspect, use an equal sign before it (e.g., bigcommerce/template=’. $template. ‘/path).
Closures wrapped around calls to classes instantiated through a dependency injection container power the entire plugin. There are many methods for getting access to these closures if you need to change the plugin’s core actions.
The bigcommerce/init operation is called after the plugin has finished initializing and connecting all of its service providers to WordPress. The primary plugin controller (an example of the BigCommercePlugin class) and the dependency injection container itself are passed as arguments. After initialization, the former can be accessed at any time by calling the function bigcommerce().
Using the keys defined in BigCommercePlugin::load service providers(), this plugin controller can access an instance of each of the service providers contained in the src/BigCommerce/Container directory. For example, you might use bigcommerce()->cart to get an instance of the BigCommerceContainerCart service provider. Each behavior or filter callback created by one of the service providers is given an identifier so that it can be retrieved and unhooked from WordPress if necessary.
Localizing strings displayed on the storefront
The language used by BC4WP to view messages on your storefront can be customized. All strings used by assets/js/dist/scripts.js to view messages on the front-end are stored in the array $js i18n array specified in src/BigCommerce/Assets/Theme/JS Localization.php:19.
Let’s adjust the message shown to a user when they add an object to their cart as an example of how to localize strings. The message “Product successfully applied to your cart.” appears by design. Let’s replace the language with a connection to your store’s cart instead.
- Declare a function called update add to cart message() that accepts $js i18n array as an argument using either a child theme or a child plugin.
- Set the new value for the ‘ajax add to cart success’ key in the nested ‘cart’ array to ‘Item added to cart’ inside update add to cart message(). View Cart!/a>’, a href=”/cart”>a href=”/cart”>a href=”/cart”>a href=”/cart Note that /cart is just an example; your store’s cart might have a different slug.
- Use a return statement, get the filtered $js i18n array array.
After calling the update add to cart message feature, use the WordPress Plugin API to call the add filter() function. add filter() associates a function or process with a particular filter action. Hook the bigcommerce/js localization filter hook given by the BC4WP plugin to update add to cart message().
When an object is added to a cart after you save the file, WordPress can now localize the changed string by doing the following:
- add filter() calls update add to cart message() with $js i18n array as an argument while using the bigcommerce/js localization filter hook.
- Until being returned on the next line by our return comment, filter $js i18n array and change the value for ajax add to cart success to ‘Ttem added to cart. a href=”/cart”>View Cart!/a>’.
- When a user adds an object to their cart, Scripts.js shows this modified string.
Styling checkout
Depending on if the WordPress platform has an SSL certificate enabled, BigCommerce for WordPress provides two different checkout experiences.
If no SSL is detected, WordPress directs customers to your BigCommerce checkout page, where they can complete their transaction securely. If you’re using the redirected checkout, check out our Stencil documentation to see all of the styling choices for the checkout tab.
If an SSL certificate is detected, BC4WP seamlessly integrates BigCommerce’s safe one-page checkout into your WordPress checkout page through an iFrame.
Embedded checkout
The WordPress theme customizer includes settings in Embedded Checkout that allow you to change colors to blend the checkout page with your theme. The Checkout Config hook allows advanced users to filter all available Embedded Checkout config choices (Github). Because of the method for loading the Embedded Checkout inside the iframe, styling the checkout must be done by filtering the available $checkout config options rather than using CSS to target element classes or IDs.
We define myCheckoutFunction() as a function that takes $checkout config as an argument. The feature generates a set of checkout config styles that turn the checkout step header text red, the step number icons blue, and the checkout body text green. Finally, we call the Checkout Config hook with myCheckoutFunction. To try it out, add the following snippet to your theme’s functions.php file.
Other components, such as buttons, input fields, and checkboxes, can be styled using this format. In the Embedded Checkout Styles documentation, you’ll find a complete list of checkout elements you can style and the properties you can alter (Github).
It’s worth noting that styles refer to all elements on the checkout page. Styles applied to steps, for example, will refer to all steps rather than just step 2 or 3.
Conclusion
Even the plugin’s ability to work with any themes, as a theme designer, you can choose to provide BigCommerce for WordPress support by styling the plugin’s pages and elements to fit the style of your theme. These tutorials walk you through the various options for creating BigCommerce for WordPress themes and customizing the plugin. We hope they will fully support you on the way to develop your style.
