[Resolved] Shop page – WooCommerce layout options

[Elisabeth]

Hi there
I’m using GP Pro and GP Blocks alongside Woo to create an online ordering system for a restaurant.

What I want to achieve is: shop page should display items by category, in order of my choosing (eg starting with starters, then mains, etc).

I’ve first specified the shop page in the Woo settings and added Woo Blocks to that page, with each block displaying 1 category of products. Then I’ve tried going into the Layout – > Woocommerce bit of the customizer and setting items to be displayed automatically to zero. However, when I go to the front end of the shop page (not the back end) it shows first all my Woo blocks and then loads of ‘automatically generated and in a random order’ products. I can’t seem to get rid of this…

Any pointers? And is this a GP Pro question or a Woo question?!

Thank you
Liz

[David]

Hi there,

its 99% a woo thing 🙂 – but:

first thing is to NOT set THAT Page as your Woocommerce Shop page – as Woo will automatically create the Product Archive, which is where the unexpected product list comes from.

Woo Blocks – for some crazy reason doesn’t use the same HTML or CSS that the Woocommerce templates use, so none of the styling controls in the Customizer will apply to them. I still use Woo shortcodes as the do use the woo templates. And they don’t load a TON of extra CSS like the Woo blocks do.

Now the last thing to deal with is the ‘Continue Shopping Link’ that appears in added to cart / cart notices. As this by default links to the shop page in the woo settings. Options:

1. Create a separate shop page for that purpose.
2. Or use this snippet to redirect it to another page:

function return_to_static_shop_page() {
    return 'http://yourdomain.com/your-page/';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'return_to_static_shop_page' );

[Elisabeth]

You are a star! That answers my actual question and a few more I knew would be coming up in the pipeline.
Thanks so much. Off to go and tinker and possibly come back with some follow up questions. Okay to keep this support topic open till I’m sure?
Cheers
Liz

[David]

For sure 🙂

[Elisabeth]

WP Show Posts would also be an option, right? Integrates with Woo okay I believe.

[David]

It will display them as a list of posts – it won’t display add to cart or pricing ( that would require code ) and it won’t respect the woocommerce settings as it doesn’t use those ( or any ) templates

[Elisabeth]

aha. Glad I didn’t waste my time. Thanks again…

[David]

You’re welcome

[Elisabeth]

Okay… That’s worked pretty well and been very helpful. Two issues…

1) I added the code snippet using the Code Snippets plugin recommended in the GP documentation. It seems to have cause the removal of the ‘continue shopping’ or ‘go back to shop’ link on the shopping cart…

2) In link below you can see two versions of the starter and main courses – one added by woo block and one by short code as you recommend above. I like the bigger font on the short code version, but I want the buttons to look like and be all horizontal next to each other like in the woo blocks version…

I’m now really not sure if I’m pushing it with Woo questions here or if this is a theme/customizer issue. Feel free to chase me over to the Woo support if you need to.

Thanks again

Liz

[David]

These are Woo questions – but happy to take a look 🙂

1. Remove the code temporarily so i can take a look at whats happening?

2. Can you switch the Structure to Flexbox in Customizer > General. Then i can take a look at the CSS required to align the buttons.

[Elisabeth]

Thank you so much!
I have removed the code snippet and have switched to flexbox.
I found I could change font size for those ‘shortcode’ sections (the dish name and the button text size) in the customizer, but not rounded edges and also not all centred beneath the image…
Thanks again.

[David]

Could you disable the SG optimizer ?

[Elisabeth]

Yup… Done that now.
Thank you

[David]

Try this CSS:

.page .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
}
.woocommerce ul.products li.product .button {
    font-size: 12.5px;
    padding: 6.5px 10px;
    border-radius: 25px;
    text-align: center;
}

[Elisabeth]

That looks really nice! Thanks very, very much.

Any thoughts about the ‘return to shop’ issue?

[Author]

Posts