[Resolved] WooCommerce product list layout

[Vincenzo Quarta]

Hi,
can I obtain a Woocommerce product list layout like this https://gyazo.com/79d205fb19e08e43aae85b06767250e3 with price and buy button on right?
Thanks.

[Vincenzo Quarta]

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

[Tom]

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 🙂

[Vincenzo Quarta]

Thank you Tom,
can I send you the link by email? 😉

[Tom]

If you edit your original post in this topic, you’ll see a URL field which only admins can see 🙂

[Vincenzo Quarta]

Done!

[Tom]

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 🙂

[Vincenzo Quarta]

Done, I added the function!

[Vincenzo Quarta]

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. 🙂

[Tom]

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 🙂

[Vincenzo Quarta]

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

[Tom]

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/

[Vincenzo Quarta]

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

[Tom]

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

[Vincenzo Quarta]

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 🙂

[Author]

Posts