It seems many people struggle with setting up a Bricks Builder “templated” installation of WooCommerce. It was a long, difficult process for me the first time. It still is with some of the newer features. It is almost perfect, except there is still one page with no template–it’s not styled as the default theme pages are. That page still requires some minimal custom CSS styling.
Currently, there are several places in the WooCommerce templates that need a custom CSS styling to fix badly written or lacking CSS in areas you can’t use element settings to fix. The Cart template needs some hooks and filters in your child theme’s functions.php file to move cross-sell products down under everything so as not to clutter up the checkout process.
This being the case, I have created a full Bricks Builder WooCommerce Template pack that will get you started and help you to understand how the templates should be set up.
This is nothing fancy, just a basic setup. However, I have styled the text and button text with the Google fonts “Inter” and “Nunito”. The images have a radius. The button background colors are dark. This is so you can go in and see in the element settings where all of this has been changed rather than using global styles. Using global styles is probably more efficient.
The Archive template is set up using a loop. The search results template uses a loop. The instructions are for setting up the Shop page to use the Archive template, but the shop page can be any template that you create.
It’s not as easy as just importing the templates and then it’s done. However, there are step-by-step instructions included. It is far easier than figuring it out yourself the first time.
If you want to setup all the templates from scratch, then you do not need it. This is to get you a full working store using the Bricks templates way and then you can go from there.
This removes custom CSS for PayPal checkout alerts from installation instructions that was added in v1.1.8. It interfered with Bricks WooCommerce element alerts.
The Mini-Cart, Cart, and Checkout variation display CSS fix in v1.1.11 was a quick fix, but it left all variation name/values inline on these elemesnts, because the structure of the HTML is unlike the variation displays on other parts of the template elements.
This new version (v1.1.12) uses CSS Grid to format the variation displays on these elements properly.
This has been updated to add better custom CSS for the Payment Methods tab (Stripe). The CSS was also refactored and put in it’s own text file.
You can update from v1.1.12 to v1.1.13 by simply replacing the CSS in Bricks >> Settings >> Custom Code >> Custom CSS with the CSS contained in the “custom css.txt” file.
