Insertng HTML and jQuery into a page that uses the Defaut template

Question

I have a checkout page that was built with the the Default template and has a WooCommerce shortcode. I want to insert a line at the top that looks like a link and when you click the line a box pops up that gives more information.

I've done this kind of thing on WordPress pages that were built with a custom template that I wrote. I was writing the HTML then and I was able to stick a script section at the end with the jQuery I needed to do the pop up.

But I'm not sure how to pull this off with a page that uses a default template and has a WooCommerce shortcode. Thanks for any ideas.

Answer 1

There are 2 options:

1. Copy the WooCommerce file into your theme, then make whatever changes you like. Since you're using a default theme, you'd need to create a child theme. In this case, you'd copy /wp-content/plugins/woocommerce/templates/checkout/for-m-checkout.php (the whole file) into /wp-content/themes/yourchildthemename/woocommerce/checkout/form-checkout.php and do whatever you like - the child theme will also need a style.css to be recognized by WP and activated.

Always keep the WooCommerce comments at the top of the file - that way if WooCommerce makes changes to its default template it will warn you that your theme copy of its file is out of date, and you can update it so the site won't break. This is usually the best solution for large changes.

2. Use a hook. WooCommerce provides tons of these; the best way to find them is to look through its template files (in this case the same form-checkout.php file) until you find do_action. In this case, there is an action called woocommerce_before_checkout_form. You can hook onto that action to inject the HTML and jQuery you need. Since hooks change much less often than templates, if there is a hook available, this is the easiest method because you won't have to keep updating your copy of their template - plus you don't have to create a child theme.