1

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?

0

2 Answers 2

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?

2
  • I have already the various templates inside my theme folder, part of them are modified by hooks and for some file I've added the bs 4 classes manually. I have trouble only with sidebar positioning and form styling
    – sialfa
    Jan 17, 2020 at 18:25
  • Can you target the main container, float it left, then target the sidebar and float it right - then just make sure the size of both equals no more than 100% and apply box-sizing:border-box? Jan 17, 2020 at 18:39
0

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.

1
  • Thanks for your reply. I've started the editing of the files and by using the hooks I was able to add the main bootstrap classes to part of the templates. The trouble are with the forms and the sidebar, I need to add the form-control class and style the labels for the forms, and with the sidebar I need to place it to the right of the screen then style it, but I haven't found no docs about
    – sialfa
    Jan 17, 2020 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.