The Problem
Woocommerce recently released version 3.1.0 on 2017-06-28 which added a new feature allowing users to view the terms & conditions inside of a scroll box on the checkout page, rather then opening the selected page in a new window.
Feature – Display (toggle-able) terms inline on the checkout rather than showing a link.
This is a great new feature from a website usability and conversion perspective, since the user no longer gets redirected to a new tab if they decide to read the terms & conditions. Unfortunately, for sites using frameworks that rely on visual builders, this generates shortcodes when building pages, which ends up including all of those shortcodes in the terms box for the user to see. This isn’t a big deal if you are using a basic page with the WordPress built in wysiwyg editor to create your terms & conditions page, as that editor doesn’t render shortcodes, like the Divi builder does. However, if you still want to maintain a styled page using, again for example, the Divi builder, to create your terms & conditions page, then you will end up seeing something like the screenshot below.
UPDATE – Woocommerce released version 3.1.1 which seems to have corrected part of the issue. Instead of showing the shortcodes it now shows the page with all its styled elements. This is still a bit awkward since its showing additional elements that you may only want to see if your on the actual terms & conditions page. The fix below still works to remove these extra elements to show a stripped down version of the page.
UPDATE – Woocommerce released version 3.4.0 which contained an updated terms.php file that would no longer work with the fix we created. One of our commenters @contemplatedsgn let us know of a simple fix for this problem if you are using WOOCOMMERCE 3.4.0 or higher
How to fix the issue for Woocommerce 3.4.0 or higher
Add the following code to your theme or child themes functions.php file.
/*** Strip Shortcode from Terms & Conditions Box *****/
remove_action( 'woocommerce_checkout_terms_and_conditions', 'wc_terms_and_conditions_page_content', 30 );
add_action( 'woocommerce_checkout_terms_and_conditions', 'wc_terms_and_conditions_page_content_custom', 30 );
function wc_terms_and_conditions_page_content_custom() {
$terms_page_id = wc_terms_and_conditions_page_id();
if ( ! $terms_page_id ) {
return;
}
$page = get_post( $terms_page_id );
if ( $page && 'publish' === $page->post_status && $page->post_content && ! has_shortcode( $page->post_content, 'woocommerce_checkout' )) {
echo '<div class="woocommerce-terms-and-conditions" style="display: none; max-height: 200px; overflow: auto;">' . wp_kses_post( wc_format_content(preg_replace( "~(?:\[/?)[^/\]]+/?\]~s", '', $page->post_content ) ) ) . '</div>';}}If you are using the DIVI theme
Replace
echo '<div class="woocommerce-terms-and-conditions" style="display: none; max-height: 200px; overflow: auto;">' . wp_kses_post( wc_format_content(preg_replace( "~(?:\[/?)[^/\]]+/?\]~s", '', $page->post_content ) ) ) . '</div>';
With
echo '<div class="woocommerce-terms-and-conditions" style="display: none; max-height: 200px; overflow: auto;">' . wp_kses_post( wc_format_content( preg_replace( "/\[\/?et_pb.*?\]/", '', $page->post_content ) ) ) . '</div>';
How to fix the issue for Woomcommerce versions older then 3.4.0
The good news is there’s a simple way to fix this issue. To your benefit, it doesn’t require setting up two separate terms pages, as this would not be ideal for maintaining the content and best practices for SEO/Google’s search index. Here’s how it works:
Step 1
Setup your own terms.php file within your theme or child theme. To do this, you first create a directory within your theme or child theme called “woocommerce”. Next, you create a sub-directory within the “woocommerce” directory called “checkout” (woocommerce/checkout). The sub-directory is needed because you must mirror the same directory as it exists in the plugin files. Now you need to download the terms.php file from the woocommerce plugin and upload it to your new woocommerce/checkout/ directory.
For more information on overriding theme files visit the official woocommerce documentation.
Step 2
Once you have the terms.php override in place open the file in your choice of code editor and find the line below (line 17).
$terms_content = has_shortcode( $terms->post_content, 'woocommerce_checkout' ) ? '' : wc_format_content( $terms->post_content );
Replace it with the new line that I have posted here.
$terms_content = has_shortcode( $terms->post_content, 'woocommerce_checkout' ) ? '' : wc_format_content( preg_replace("~(?:\[/?)[^/\]]+/?\]~s", '', $terms->post_content));The change you are making is to the 2nd instance of $terms->post_content within this line. The new line changes $terms->post_content to preg_replace(“~(?:\[/?)[^/\]]+/?\]~s”, ”, $terms->post_content).
If you are using Divi Builder you can use this line instead
$terms_content = has_shortcode( $terms->post_content, 'woocommerce_checkout' ) ? '' : wc_format_content( preg_replace('/\[\/?et_pb.*?\]/','', $terms->post_content));Final Step
Upload your file changes to your theme and test to make sure that the shortcodes have been stripped from the terms & conditions box. If you succeeded you should now see only the HTML content from your terms page within the woocommerce terms section.
Final Thoughts
Hopefully anyone who has had a similar issue with the latest woocommerce release will find this article useful. We believe this fix is something the woocommerce development team should build into the settings to give the user the ability to simply click a checkbox and remove any shortcodes from their terms & conditions page. There is always the potential for it to happen in an upcoming release, but for now this workaround has worked for us and hopefully it can help you too. If you found this useful our have any questions, please let us know in the comments below. If you need help with custom wordpress or woocommerce design, please don’t hesitate to contact us.
