WooCommerce: Rearranging Elements on Shop Page

5 Views

I’ve been developing a WordPress theme as part of my new job. It’s a WooCommerce build and I’ve pretty much finished. The last thing I’m stuck on – theme wise – is how to reorder the elements of the WooCommerce shop page.

The front page is a custom shop page, which uses the display products shortcodes to display the most recent and featured products. The current layout of the products is:

Read More
Thumbnail
Product Title
Price
Add to Cart button

I’ve already managed to remove the Add to Cart button and now I’m trying to rearrange it so it shows: 

Product Title
Thumbnail
Price

WooCommerce uses hooks and I cannot work out where the correct hook for the shop page/shortcodes is. It seems like a really simply thing, to rearrange the elements on a page, but I’ve been stuck on it for hours now.

Any help is greatly appreciated.

Post Views: 5

Related posts

Leave a Reply

3 comments

  1. In the content-product.php file, change the following code from:

        <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <h3><?php the_title(); ?></h3>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

    to

        <h3><?php the_title(); ?></h3>

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

    This will move the image to below the title. More specifically the do_action( 'woocommerce_before_shop_loop_item_title' ); piece of code is what is called to display the image. So moving that below the title (<?php the_title(); ?>) should achieve what you want.

  2. The markup for products inside the archive loop is dictated by the template content-product.php, which you can find in plugins/woocommerce/templates/. The good thing about WooCommerce is that you can duplicate any of the template files you find in that folder and put them in your theme folder instead; WC will then use that template instead, which you can customise to your heart’s content. All you need to do is create a new folder inside your theme folder called woocommerce and inside that save a copy of content-product.php. You can then tweak that one all you like; it won’t get overridden if you update WC.

  3. To re-layout WooCommerce anything, copy the original template to your theme’s root and make any modifications to the new php file.

    For example, take the original “individual item in the shop loop” template

    wp-content/plugins/woocommerce/templates/content-product.php

    and copy it to

    wp-content/themes/your_theme/content-product.php

    Make any changes to the copy. It’ll override the original layout and not be messed up with WooCommerce updates (generally).

    More Info