WooCommerce Product Grid (Rearrange product details)

user_9306227 0
Viewed 777

I am needing a little guidance with this one if possible. So, I am using the Hello Elementor theme along with the WooCommerce plugin.

On my Shop page (Where my products are listed), I am wanting to rearrange the Product Data which displays within the looped product grid. E.g. I want to move the Product Title above the Product Image and so forth.

I usually have great success with figuring this out myself, although, I am unable to find the correct file within either the WooCommerce plugin or within the Hello Elementor theme to modify so that I can rearrange this data around.

Since i am using the "Products" widget (As apart of where I am displaying my products, initially, I thought perhaps it would be the content-widget-product.php file as the following code seems quite relevant to which displays from the frontend.

<li>
    <?php do_action( 'woocommerce_widget_product_item_start', $args ); ?>

    <a href="<?php echo esc_url( $product->get_permalink() ); ?>">
        <?php echo $product->get_image(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
        <span class="product-title"><?php echo wp_kses_post( $product->get_name() ); ?></span>
    </a>

    <?php if ( ! empty( $show_rating ) ) : ?>
        <?php echo wc_get_rating_html( $product->get_average_rating() ); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    <?php endif; ?>

    <?php echo $product->get_price_html(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

    <?php do_action( 'woocommerce_widget_product_item_end', $args ); ?>
</li>

Although, after removing the following lines of code (Just as a test to see if the image and product data would disappear, everything seems to remain as it is.

So I'm a little unsure on how to rearrange the data.

Any tips or guidance would be most appreciated!

Side Note: Just to confirm, it isn't the single-product page I am trying to modify, it's the Product Data displayed within a loop within the Products List grid on my Shop page.

elementor woocommerce wordpress
2 Answers

You could try CSS in the widget's advanced settings:

selector a.woocommerce-LoopProduct-link{
    display: flex !important;
    flex-direction: column !important;
}
selector .woocommerce-loop-product__title{
    order:1;
}
selector img{
    order:2;
}
selector .price{
    order:3;
}
user_17517660

content-product.php is the file responsible for the layout of product items within the loop, such as product archive pages.

Besides some HTML, that file contains several WooCommerce Hooks calls, responsible for the composition of the product item.

Each hook got several callbacks attached to it, which then return the related product items HTML.

There are 2 ways to change that product item layout within the loop:

  1. Override the template file content-product.php within your active (custom) theme. Then you could work with the order of those hook calls, e.g. have the title shown above the thumbnail:
    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );
  1. Though, best practice is to work with the hooks directly and get your wanted HTML displayed at the desired place within that layout by attaching your callbacks to the responsible hooks. That can be done from within your functions.php or a plugin. The latter being more elegant, because it doesn't depend on a certain activated theme.
user_85472140
Related