Quite often I recommend template overrides for customizing WooCommerce. Using template overrides provides a way to exercise a great deal of control over the layout and presentation of your WooCommerce shop, but they also come with the responsibility of maintenance – if functions are deprecated or removed from WooCommerce your template overrides are likely to break, or worse, cause fatal errors and your entire shop will stop working. It is considered best practice and highly recommended to only override the template files that are needed.
The documentation Template Structure + overriding templates via a theme states:
If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.
So if at all possible, and to maintain maximum compatibility, it is preferable to use WooCommerce hooks reference to make changes to your WooCommerce shop layout. There is some documentation which explains the basics of action and filter hooks here: Introduction to hooks: actions and filters.
With all of that said, earlier I had posted a way to add quantity inputs to your WooCommerce Shop Page using a template override. After having thought about that for a bit, I came up with a way to do it without using a template override (the example I gave altered the action hooks used inside the template override file) Using this method offers two distinct advantages over doing it the template override way.
- The template override file that I used in the earlier example uses a file that may very well already be overridden in your theme making it more difficult to know where, exactly, to make the edits to the file.
- Gives you a much greater chance of forward compatibility. If a hook gets renamed or removed, your shop will simply fall back to the default output rather than causing fatal errors.
Without further ado, here is the code snippet that will accomplish this:
And, similar to the template override method, you will likely need some custom CSS to tweak the layout a bit. This will not work with all themes but may serve as an example.
Not sure what to do with code snippets? See What Do I Do With These Code Snippets?