I’m comfortable with building out custom themes based on Bootstrap and pulling in content via WordPress functions. Generally this is because I can build out all the page/CPT templates and template parts such as cards etc.
I’m now starting a new WooCommerce project which will also make use of Bootstrap and I’ll need to customise things like the single-product, shop listings, category pages etc. I’ll want to build out cards and pages using the Bootstrap grid and styles.
What’s the best way of doing this? I’m aware that I can copy templates from the plugin directory into my custom theme and override, but this isn’t the best for maintenance as I’ll need to redo when there’s updates made by WooCommerce.
The alternative is to use hooks and filters to make the tweaks. But given how nested some Bootstrap components are (divs inside divs inside divs), is that more trouble than it’s worth?
The hooks seem to be more useful for things like adding new sections, tweaking text etc.
Delving deeper into the single-product.php file, I can see that it loads lots of little partials in /templates/single-product/ like price.php, title.php. Is it best to create custom override files for these, rather than creating a whole page template?
I know there’s a few places where the default WooCommerce CSS and Bootstrap will clash, such as the login form using col-1 and col-2 for left and right content, which breaks if using Bootstrap as that equates to 1/12 and 2/12 of the grid columns.
Thanks in advance!