[V8.4.0] WC Shortcode [product_page id="xxxx"] Prevents Page Editing, Opens WooCommerce Product Details

[shameemreza]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

After updating to WooCommerce 8.4.0, pages with the shortcode [product_page id="xxxx"] open the WooCommerce product page instead. This problem occurs when editing a normal page with the shortcode.

This bug was reported here: https://wordpress.org/support/topic/update-8-4-0-opens-the-product-page-instead-of-normal-page

7445720-zen

Expected behavior

The page should show the shortcode instead of the product details.

Actual behavior

The issue causes pages with the shortcode [product_page id=”xxxx”] to open the WooCommerce product page directly, making it impossible to edit these pages. The problem was temporarily resolved by reverting back to version 8.3.1.

Steps to reproduce

• Create a new page and insert the [product_page id="xxxx"] shortcode.
• Next, publish the page.
• When you open the page in the editor, you'll notice that the product information is displayed, not the shortcode.

CleanShot.2023-12-13.at.21.54.48.mp4

WordPress Environment

WooC0mmerce 8.4.0
WordPress 6.4.2

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[anastas10s-afk]

Reported here, also (7524753-zen):
https://wordpress.org/support/topic/broken-pseudo-product-editor-view-using-product_page-idxxxx-shortcode/

[twobirdshealing]

What is the cycle for fixes like these to make it to the final release? This is one that has caused us alot of issues as well.

[carolframen]

7721682-zen

[twobirdshealing]

was this fixed? or were there multiple issues with the prodcutpage shortcode?

• Fix - Fix the product_page shortcode not working if "status" is passed in as "any". #44698

[thisissandip]

Another Workaround:

• Add the below snippet (replace the page ID):

function disable_block_editor_for_page_ids( $use_block_editor, $post ) {

    $excluded_ids = array(461); // page ids
    if ( in_array( $post->ID, $excluded_ids ) ) {
        return false;
    }
    return $use_block_editor;
}
add_filter( 'use_block_editor_for_post', 'disable_block_editor_for_page_ids', 10, 2 );

The above snippet will disable the block editor for the specific pages added in the array and you will be able to edit the page using the WordPress classic editor

[thisissandip]

7842224-zen

[shaunkuschel]

Received another report of this on 7929699-zen.

When I tested this on my site using WC 8.7.0, the page that had the product_page id shortcode continued to work as expected on the front end but the edit version of the page would not load at all (it was just a blank, white page).

Workaround: When I used the snippet @thisissandip shared above, that resolved the issue on my site and allowed me to view the edit version of the page as expected.

[whebb]

Just discovered this issue yesterday. I thought it was related to the theme, but it is certainly woocommerce. Also can confirm it is not a problem on the frontend, only when going to edit pages. Can confirm 8.3.1 works. Will try the workaround, but seeing as this originated back in 8.4, what is the timetable for a fix? Is causing headaches on many websites for us.

[carolframen]

8217227-zen

Also tested on my website with 8.9.1 and was able to replicate the issue.

[gwmbox]

I see that this is set to not assigned. Is there a reason why? It has been a bug since December 2023. So I will assume it is a rather big bug :(.

I appreciate the work being done, but I would really like to be able to use the shortcode correctly. I spent significant hours trying to figure this one out as well as trying other options,

Details of my issue is at https://wordpress.org/support/topic/add-full-product-to-page/#post-17773553

"when i use this (the product_page shortcode) and go to edit the page that the shortcode is on, instead of going to that pages edit screen, it goes to the product edit that is used in the shortcode. very odd. I have tried this on various themes and separate WP installs."

[twobirdshealing]

I asked GPT and got a simple fix maybe it will get added one day?

the shortcode code is in woocommerce/includes/class-wc-shortcodes.php

find this code for the shortcode

/**
* Show a single product page.
*
* @param array $atts Attributes.
* @return string
*/
public static function product_page( $atts ) {
if ( empty( $atts ) ) {
return '';
}

	if ( ! isset( $atts['id'] ) && ! isset( $atts['sku'] ) ) {
		return '';
	}

	$product_id = isset( $atts['id'] ) ? absint( $atts['id'] ) : 0;
	if ( ! $product_id && isset( $atts['sku'] ) ) {
		$product_id = wc_get_product_id_by_sku( $atts['sku'] );
	}

	$product_status = empty( $atts['status'] ) ? 'publish' : $atts['status'];
	/**
	 * Filters the list of invalid statuses for the `product_page` shortcode.
	 *
	 * @since 8.6.0
	 * @param array $invalid_statuses List of invalid statuses.
	 * @param int   $product_id       Product ID.
	 * @return array
	 */
	$invalid_statuses = apply_filters( 'woocommerce_shortcode_product_page_invalid_statuses', array( 'trash' ), $product_id );
	if ( in_array( $product_status, $invalid_statuses, true ) ) {
		return '';
	}
	/**
	 * Filters whether to override read permissions for unpublished products.
	 *
	 * @since 8.6.0
	 * @param bool   $force_rendering Whether to override read permissions for unpublished products. `true` to force rendering the product page, `false` to block rendering, or `null` to use the default behavior.
	 * @param int    $product_id                Product ID.
	 * @return bool
	 */
	$force_rendering = apply_filters( 'woocommerce_shortcode_product_page_force_rendering', null, $product_id );
	if ( isset( $force_rendering ) && ! $force_rendering ) {
		return '';
	}

	$args = array(
		'posts_per_page'      => 1,
		'post_type'           => 'product',
		'post_status'         => $product_status,
		'ignore_sticky_posts' => 1,
		'no_found_rows'       => 1,
	);

	if ( isset( $atts['sku'] ) ) {
		$args['meta_query'][] = array(
			'key'     => '_sku',
			'value'   => sanitize_text_field( $atts['sku'] ),
			'compare' => '=',
		);

		$args['post_type'] = array( 'product', 'product_variation' );
	}

	if ( isset( $atts['id'] ) ) {
		$args['p'] = absint( $atts['id'] );
	}

	// Don't render titles if desired.
	if ( isset( $atts['show_title'] ) && ! $atts['show_title'] ) {
		remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	}

	// Change form action to avoid redirect.
	add_filter( 'woocommerce_add_to_cart_form_action', '__return_empty_string' );

	$single_product = new WP_Query( $args );

	if (
		! isset( $force_rendering ) &&
		$single_product->have_posts() &&
		'publish' !== $single_product->post->post_status &&
		! current_user_can( 'read_product', $single_product->post->ID )
	) {
		return '';
	}

	$preselected_id = '0';

	// Check if sku is a variation.
	if ( isset( $atts['sku'] ) && $single_product->have_posts() && 'product_variation' === $single_product->post->post_type ) {

		$variation  = wc_get_product_object( 'variation', $single_product->post->ID );
		$attributes = $variation->get_attributes();

		// Set preselected id to be used by JS to provide context.
		$preselected_id = $single_product->post->ID;

		// Get the parent product object.
		$args = array(
			'posts_per_page'      => 1,
			'post_type'           => 'product',
			'post_status'         => 'publish',
			'ignore_sticky_posts' => 1,
			'no_found_rows'       => 1,
			'p'                   => $single_product->post->post_parent,
		);

		$single_product = new WP_Query( $args );
		?>
		<script type="text/javascript">
			jQuery( function( $ ) {
				var $variations_form = $( '[data-product-page-preselected-id="<?php echo esc_attr( $preselected_id ); ?>"]' ).find( 'form.variations_form' );

				<?php foreach ( $attributes as $attr => $value ) { ?>
					$variations_form.find( 'select[name="<?php echo esc_attr( $attr ); ?>"]' ).val( '<?php echo esc_js( $value ); ?>' );
				<?php } ?>
			});
		</script>
		<?php
	}

	// For "is_single" to always make load comments_template() for reviews.
	$single_product->is_single = true;

	ob_start();

	global $wp_query;

	// Backup query object so following loops think this is a product page.
	$previous_wp_query = $wp_query;
	// @codingStandardsIgnoreStart
	$wp_query          = $single_product;
	// @codingStandardsIgnoreEnd

	wp_enqueue_script( 'wc-single-product' );

	while ( $single_product->have_posts() ) {
		$single_product->the_post()
		?>
		<div class="single-product" data-product-page-preselected-id="<?php echo esc_attr( $preselected_id ); ?>">
			<?php wc_get_template_part( 'content', 'single-product' ); ?>
		</div>
		<?php
	}

	// Restore $previous_wp_query and reset post data.
	// @codingStandardsIgnoreStart
	$wp_query = $previous_wp_query;
	// @codingStandardsIgnoreEnd
	wp_reset_postdata();

	// Re-enable titles if they were removed.
	if ( isset( $atts['show_title'] ) && ! $atts['show_title'] ) {
		add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	}

	remove_filter( 'woocommerce_add_to_cart_form_action', '__return_empty_string' );

	return '<div class="woocommerce">' . ob_get_clean() . '</div>';
}

---

Add a simple check if we are in the admin area and dont render the shortcode

// Check if we are in the admin editor
if ( is_admin() && function_exists('get_current_screen') && get_current_screen()->is_block_editor ) {
    return '[product_page id="' . ( isset( $atts['id'] ) ? $atts['id'] : '' ) . '"]';
}

---

So would look like this.... I tried it and it seems to fix the issue.

/**
 * Show a single product page.
 *
 * @param array $atts Attributes.
 * @return string
 */
public static function product_page( $atts ) {
	if ( empty( $atts ) ) {
		return '';
	}

	if ( ! isset( $atts['id'] ) && ! isset( $atts['sku'] ) ) {
		return '';
	}

// Check if we are in the admin editor
if ( is_admin() && function_exists('get_current_screen') && get_current_screen()->is_block_editor ) {
    return '[product_page id="' . ( isset( $atts['id'] ) ? $atts['id'] : '' ) . '"]';
}

	$product_id = isset( $atts['id'] ) ? absint( $atts['id'] ) : 0;
	if ( ! $product_id && isset( $atts['sku'] ) ) {
		$product_id = wc_get_product_id_by_sku( $atts['sku'] );
	}

	$product_status = empty( $atts['status'] ) ? 'publish' : $atts['status'];
	/**
	 * Filters the list of invalid statuses for the `product_page` shortcode.
	 *
	 * @since 8.6.0
	 * @param array $invalid_statuses List of invalid statuses.
	 * @param int   $product_id       Product ID.
	 * @return array
	 */
	$invalid_statuses = apply_filters( 'woocommerce_shortcode_product_page_invalid_statuses', array( 'trash' ), $product_id );
	if ( in_array( $product_status, $invalid_statuses, true ) ) {
		return '';
	}
	/**
	 * Filters whether to override read permissions for unpublished products.
	 *
	 * @since 8.6.0
	 * @param bool   $force_rendering Whether to override read permissions for unpublished products. `true` to force rendering the product page, `false` to block rendering, or `null` to use the default behavior.
	 * @param int    $product_id                Product ID.
	 * @return bool
	 */
	$force_rendering = apply_filters( 'woocommerce_shortcode_product_page_force_rendering', null, $product_id );
	if ( isset( $force_rendering ) && ! $force_rendering ) {
		return '';
	}

	$args = array(
		'posts_per_page'      => 1,
		'post_type'           => 'product',
		'post_status'         => $product_status,
		'ignore_sticky_posts' => 1,
		'no_found_rows'       => 1,
	);

	if ( isset( $atts['sku'] ) ) {
		$args['meta_query'][] = array(
			'key'     => '_sku',
			'value'   => sanitize_text_field( $atts['sku'] ),
			'compare' => '=',
		);

		$args['post_type'] = array( 'product', 'product_variation' );
	}

	if ( isset( $atts['id'] ) ) {
		$args['p'] = absint( $atts['id'] );
	}

	// Don't render titles if desired.
	if ( isset( $atts['show_title'] ) && ! $atts['show_title'] ) {
		remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	}

	// Change form action to avoid redirect.
	add_filter( 'woocommerce_add_to_cart_form_action', '__return_empty_string' );

	$single_product = new WP_Query( $args );

	if (
		! isset( $force_rendering ) &&
		$single_product->have_posts() &&
		'publish' !== $single_product->post->post_status &&
		! current_user_can( 'read_product', $single_product->post->ID )
	) {
		return '';
	}

	$preselected_id = '0';

	// Check if sku is a variation.
	if ( isset( $atts['sku'] ) && $single_product->have_posts() && 'product_variation' === $single_product->post->post_type ) {

		$variation  = wc_get_product_object( 'variation', $single_product->post->ID );
		$attributes = $variation->get_attributes();

		// Set preselected id to be used by JS to provide context.
		$preselected_id = $single_product->post->ID;

		// Get the parent product object.
		$args = array(
			'posts_per_page'      => 1,
			'post_type'           => 'product',
			'post_status'         => 'publish',
			'ignore_sticky_posts' => 1,
			'no_found_rows'       => 1,
			'p'                   => $single_product->post->post_parent,
		);

		$single_product = new WP_Query( $args );
		?>
		<script type="text/javascript">
			jQuery( function( $ ) {
				var $variations_form = $( '[data-product-page-preselected-id="<?php echo esc_attr( $preselected_id ); ?>"]' ).find( 'form.variations_form' );

				<?php foreach ( $attributes as $attr => $value ) { ?>
					$variations_form.find( 'select[name="<?php echo esc_attr( $attr ); ?>"]' ).val( '<?php echo esc_js( $value ); ?>' );
				<?php } ?>
			});
		</script>
		<?php
	}

	// For "is_single" to always make load comments_template() for reviews.
	$single_product->is_single = true;

	ob_start();

	global $wp_query;

	// Backup query object so following loops think this is a product page.
	$previous_wp_query = $wp_query;
	// @codingStandardsIgnoreStart
	$wp_query          = $single_product;
	// @codingStandardsIgnoreEnd

	wp_enqueue_script( 'wc-single-product' );

	while ( $single_product->have_posts() ) {
		$single_product->the_post()
		?>
		<div class="single-product" data-product-page-preselected-id="<?php echo esc_attr( $preselected_id ); ?>">
			<?php wc_get_template_part( 'content', 'single-product' ); ?>
		</div>
		<?php
	}

	// Restore $previous_wp_query and reset post data.
	// @codingStandardsIgnoreStart
	$wp_query = $previous_wp_query;
	// @codingStandardsIgnoreEnd
	wp_reset_postdata();

	// Re-enable titles if they were removed.
	if ( isset( $atts['show_title'] ) && ! $atts['show_title'] ) {
		add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	}

	remove_filter( 'woocommerce_add_to_cart_form_action', '__return_empty_string' );

	return '<div class="woocommerce">' . ob_get_clean() . '</div>';
}