write custom woocommerce templates and forms

Question

I've started to customize the woocommerce default templates by using the hooks as is suggested on the documentations.

I have two question about this aspect, I want to understand if I can write my own templates using only the conditional tags, or if i need to maintain the actual structure of the templates that include a lot of do_action() and less markup, I've not modified them, just copied inside the mytheme/woocommerce/ folder of my theme for now.

Another question is about the forms styling in woocommerce, I need to implement bootstrap 4 with the related classes for the forms tables ecc, but I'm not able to find a template or an hook to do this. Can anyone help me clarify my doubt?

Answer 1

To answer your second question you'll have to properly enqueue the Bootstrap 4 styles and scripts: Including CSS & JavaScript | Theme Development

From there you either have to add existing WooCommerce classes to your BootStrap CSS or add BootStrap classes to your WooCommerce templates (preferred/recommended).

As for the templates, it really depends on which template you're building and what you're attempting to achieve. The actions and filters in the default WooCommerce templates are there for a reason, so it's best to determine what they do and if you need them (you probably do)... ...a lot of this also depends on what the starting point is. Each theme's templates are structured different, so this is a very vague question in that regard. My recommendation would be to copy over an existing template into your mytheme/woocommerce/ and then start modifying from there. Perhaps start testing it out by simply adding BootStrap 4 classes?

Answer 2

I want to understand if I can write my own templates using only the conditional tags, or if i need to maintain the actual structure of the templates that include a lot of do_action() and less markup, I've not modified them, just copied inside the mytheme/woocommerce/ folder of my theme for now.

WooCommerce extensions all make extensive use of those do_action() calls, so you will need to keep those &dmash; in roughly the same place — if you want to be compatible with most extensions.

Regarding the markup itself, a lot of WooCommerce's JavaScript is based on the classes (and sometimes elements) used in the default markup, and things will break if that markup is changed. The problem is that which classes are required for WooCommerce's JavaScript is not well documented (if at all). You basically need to look in WooCommerce's JavaScript files to know. JavaScript in WooCommerce extensions might also expect certain classes, and they may or may not be undocumented.

Another question is about the forms styling in woocommerce, I need to implement bootstrap 4 with the related classes for the forms tables ecc, but I'm not able to find a template or an hook to do this. Can anyone help me clarify my doubt?

There isn't a single hook or template for this. There are numerous functions and templates that output elements that may need Bootstrap classes, and they're not all thoroughly documented. For example, there's the woocommerce_form_field() function that outputs many types of inputs, which you would need to basically rewrite, but there's numerous templates that don't even use this function for form fields, so you'd also need to change those for consistency. It will be a similar situation for tables, layout, buttons

If you want to use Bootstrap to style WooCommerce, you will end up needing to re-write the HTML for just about every template (there's over 100) to use the correct classes, as well as filter numerous functions to produce compatible output. It will be a gargantuan effort, and one that you will need to maintain for every WooCommerce update. It's not worth it. You will have a far easier time just writing your own CSS. Sometimes relying on frameworks is not actually helpful.