Editing Woocommerce Templates

There’s a number of templates in Woocommerce that doesn’t look like it can be easily edited via Cornerstone. This would be most of the endpoint links in the My Account section.

Looking at other sources (https://www.youtube.com/watch?v=dUiGbrEOdiM), Code Snippets is a way to make some changes to these sections but it’s a rough solution at best when what needs to be changed is the template of some of these pages.

For example, the orders link under My Account is something that I would like to be able to modify the template of but it’s unclear where this can be done. Is this something that can be done in Cornerstone? In the above Youtube link, the author provides a code snippet to add a product image to the orders page. However, in our current template the image ends up being on top of the product name but I’d like to move the image thumbnail under the product name.

The code snippet returns the value of $item_name which includes the thumbnail and product name:

            if( $product->get_image_id() > 0 )
            $item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name;

You could reverse the return value and have $item_name . '<div class="item-thumbnail">' . $thumbnail . '</div>' but the quantity value will still be below the product thumbnail so it’s not an optimal solution.

Some guidance would be appreciated.

Hello @dobacco,

Thanks for writing in! What you are trying to do is not possible with Cornerstone. You cannot even edit this with the default WordPress or WooCommerce block editor. This is why the Youtube video is using a snippet code. Be advised that this is the WooCommerce code of the My Account > Orders page:

<?php
/**
 * Order Item Details
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/order/order-details-item.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 5.2.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! apply_filters( 'woocommerce_order_item_visible', true, $item ) ) {
	return;
}
?>
<tr class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'woocommerce-table__line-item order_item', $item, $order ) ); ?>">

	<td class="woocommerce-table__product-name product-name">
		<?php
		$is_visible        = $product && $product->is_visible();
		$product_permalink = apply_filters( 'woocommerce_order_item_permalink', $is_visible ? $product->get_permalink( $item ) : '', $item, $order );

		echo wp_kses_post( apply_filters( 'woocommerce_order_item_name', $product_permalink ? sprintf( '<a href="%s">%s</a>', $product_permalink, $item->get_name() ) : $item->get_name(), $item, $is_visible ) );

		$qty          = $item->get_quantity();
		$refunded_qty = $order->get_qty_refunded_for_item( $item_id );

		if ( $refunded_qty ) {
			$qty_display = '<del>' . esc_html( $qty ) . '</del> <ins>' . esc_html( $qty - ( $refunded_qty * -1 ) ) . '</ins>';
		} else {
			$qty_display = esc_html( $qty );
		}

		echo apply_filters( 'woocommerce_order_item_quantity_html', ' <strong class="product-quantity">' . sprintf( '&times;&nbsp;%s', $qty_display ) . '</strong>', $item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, false );

		wc_display_item_meta( $item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_order_item_meta_end', $item_id, $item, $order, false );
		?>
	</td>

	<td class="woocommerce-table__product-total product-total">
		<?php echo $order->get_formatted_line_subtotal( $item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	</td>

</tr>

<?php if ( $show_purchase_note && $purchase_note ) : ?>

<tr class="woocommerce-table__product-purchase-note product-purchase-note">

	<td colspan="2"><?php echo wpautop( do_shortcode( wp_kses_post( $purchase_note ) ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></td>

</tr>

<?php endif; ?>

If you are going to display the thumbnail below the product name and the quantity, do not use the add_filter function. Using the add_action function should be able to do it.

// Display the product thumbnail in Woocommerce order view pages
//add_filter( 'woocommerce_order_item_name', 'wpsh_display_product_image_in_order_item', 20, 3 );
add_action( 'woocommerce_order_item_meta_start', 'wpsh_display_product_image_in_order_item', 20, 3 );
function wpsh_display_product_image_in_order_item( $item_name, $item, $is_visible ) {
    // Targeting view order pages only
    if( is_wc_endpoint_url( 'view-order' ) ) {
        $product   = $item->get_product(); // Get the WC_Product object (from order item)
        $thumbnail = $product->get_image(array( 50, 50)); // Get the product thumbnail (from product object)
        if( $product->get_image_id() > 0 )
            $item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>';
    }
    echo $item_name;
}

With a few minor tweak to the snipper code, it could display something like this:

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

Interesting. I will give this a go and see if I can make it work as you suggest. Thanks!

Hi @dobacco,

You are most welcome. Please let us know if you need any further help with this.

Just wanted to reply and say that it worked perfectly, thank you! There’s more stuff I need to figure out in terms of formatting other parts of these sections but hopefully I can use the above as a base to figure things out.

Hi @dobacco,

Thanks for the information. Please let us know if you need any further help for formatting.