WooCommerce product list layout

I'm editing post for screenshot link.
Thank you.

It should be possible.

First, I would set the image alignment to the left in Customize > Layout > WooCommerce.

Then if you can link me to your site, I may be able to do the rest with CSS.

Let me know :)

Thank you Tom,
can I send you the link by email? ;-)

If you edit your original post in this topic, you'll see a URL field which only admins can see :)

Done!

Alright, the HTML needs tweaking a bit.

Let's add this function:

add_action( 'after_setup_theme', 'tu_move_wc_elements' );
function tu_move_wc_elements() {
    remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_price', 30 );

    add_action( 'woocommerce_after_shop_loop_item', 'tu_before_wc_items', 7 );
    add_action( 'woocommerce_after_shop_loop_item', 'tu_after_wc_items', 40 );
}

function tu_before_wc_items() {
    echo '<div class="wc-items-container">';
}

function tu_after_wc_items() {
    echo '</div>';
}

Once we do that, the CSS should be a lot easier.

Let me know :)

Done, I added the function!

Sorry Tom,
I added the function but it only put the price below the button.
Do you need to work more on CSS?
Thank you. :-)

Yes, sorry! More complicated than I had hoped.

I had it working, but wasn't super happy with the code to achieve it.

I just adjusted the PHP above - can you replace the code you added with it?: https://generatepress.com/forums/topic/woocommerce-product-list-layout/#post-544879

That should give it a container which we can target better.

Let me know :)

Hi Tom,
code replaced!

If you can be useful this is a site that uses the layout that I would like (https://courseroot.com) but does not use WooCommerce.

I also saw a theme that allows me to have that layout with Woocommerce but I love Generatepress! :-)
Thank you

Give this a shot:

@media (min-width: 769px) {
    .archive li.product {
        display: flex;
    }

    .archive .woocommerce-LoopProduct-link.woocommerce-loop-product__link {
        flex-grow: 1;
    }

    .archive .wc-items-container {
        min-width: 200px;
        text-align: center;
    }
}

Depending on the browsers you need to support, you might want to run that code through this tool: https://autoprefixer.github.io/

Thank you Tom, code works fine!
Can I align title and short description to top and increase price font size?
Thank you

The CSS seems to be broken right now. display: flex is missing in the CSS I provided.

Hi Tom,
I restored display flex and I added some customization.
But sometimes in pagination the container is smaller then other page.
I edit original post with url.

Let me know :-)