Shop Builder is designed to give you full control over your WooCommerce projects, while at the same time, it follows the recommended customization practices and can be used alongside customizations implemented with code.
WooCommerce adjusts to your HTML layout and styling – not vice versa
Pinegrow lets you create completely customized e-commerce designs. WooCommerce features adapt to your layouts and not the other way around.
Using templates where possible
Customization follows WooCommerce recommended approach of overriding templates that display store elements such as product price and add to cart form.
Avoiding re-implementing WooCommerce functions
That said, WooCommerce does not use templates for all its features. Often, its template functions return a mix of information and hard-coded HTML structure. In such cases, Pinegrow avoids re-implementing their functionality directly, because that would lead to future incompatibilities. Instead, the information is extracted from returned HTML and then shown in your custom layout.
Helpers
A collection of simple helper functions is added to the exported project. These functions implement useful features that are missing in core WooCommerce (such as calculating the saved amount or percentage for sale flash stickers).
Customize just what is needed
You can customize just some parts of the theme and use WooCommerce defaults for the rest.
Multiple template variants
One of the limitations of WooCommerce is that you can have just one version of a template. For example, there can only be one version of loop/sale-flash.php that implement the sale sticker shown in the product list. Pinegrow allows you to define and use multiple versions of a template.
Hooks vs. Freestyle
WooCommerce generates the output by triggering actions such as woocommerce_before_single_product. Various WooCommerce template functions are hooked to these actions and they output their information when their actions are called.
This approach is fully supported in Pinegrow.
That said, this means that the position and order of e-commerce elements is not controlled by the page template directly. To change default grouping and order you have to manipulate action hooks through code.
To work around that, Pinegrow supports a freestyle mode where the position and order of e-commerce elements is directly controlled by the template. This gives you the greatest amount of freedom when designing your store fronts.
The downside is that freestyle approach might not be out-of-the box compatible with plugins that rely on certain WooCommerce actions to be triggered. Such cases can be fixed by adding required actions and adjusting the functions that are hooked to these actions.
Add custom PHP code if needed
Pinegrow gives you the freedom to mix visual tools and code as much as you want. Use custom PHP code to implement features that are not supported by Pinegrow yet.
Use and override default WooCommerce styles
By default, WooCommerce stylesheets are used in the exported theme. Some Pinegrow WooCommerce actions let you remove WooCommerce classes so that the default styling does not interfere with your custom design. For future compatibility sake, it is best to override default CSS rules and remove them.
But we do think that the custom styling process could be improved and are exploring ways to do that in the future.