L&L for Woocommerce product pages?

Does anyone know how to use L&L to generate Woocommerce product pages?

I’m addicted to doing everything in L&L.

Anything that is saved directly in the posts table (like products) will work with L&L, but Woo is pretty complex so we’re building an integration with it for the upcoming premium version of L&L.
A draft version of this integration is present in the Tangible Blocks beta if ever you have access to that.

A big part of the problem with Woo is that their data structure is complex (not everything is in native WordPress data structures, so custom code is required to fetch certain data).
The other challenge is that Woo isn’t just about displaying data, but actually doing stuff with it.
For instance, you product page may have a bunch of options (if only a quantity field) and needs to allow you to do things like add to cart/checkout (it gets much more complex once you take addons into account too).

A large portion of our team is currently working on allowing L&L to process data instead of just displaying it, but it will take some time for those capabilities to come to market and once they do that’s just the starting line for us to be able to build a full Woo integration.

That being said, there are people on our team that have worked with L&L + Woo to some degree, so if there’s something specific you have questions about how to do we may be able to guide you in terms of what can be done with the current system.

Right now I believe just using the default loop for generic post types is often better than the beta integration anyway, so you should be able to get pretty far using just that depending on how complex your Woo installation is.

2 Likes

Given that the L&L WooCommerce integration is not ready for prime time I would consider this: https://bootscore.me/

It seems to provide a good foundation that can evolve with L&L over time. :slightly_smiling_face:

L&L should work well with just about any theme, but the more advanced theme layouts feature is primarily tested with Kadence so you’ll get the most L&L goodness with that theme currently.

Kadence WP is a full development ecosystem they want you to buy into while Bootscore is a basic starter theme to make your own. They both claim to provide a solid codebase so it may just depend on one’s objectives.

I also see lots of overlap between Kadence WP and current or planned Tangible features so that’s another thing to consider.

1 Like

Can you please advise when theme positions will be documented?

There’s really not much to document, you just select where you want to apply an L&L template within a theme’s available locations if you have a compatible theme like any theme builder. Unfortunately every theme does things differently so we need to make an explicit integration with each one we want to support, which means we can only support the most popular themes (currently Astra & Kadence). We’ll probably be able to do something more interesting and universal with modern block based FSE themes since that system is centralized and consistent between themes though.

Okay, so we can’t add theme positions into our own theme?

3rd party plugins can in theory extend L&L to add new loop types and compatibility with new themes and whatnot but it’s not something we expect people to do right now since the product is still in the early stages of development and a lot is subject to change. Once things are more set in stone we’ll certainly work on making that process easier for people, but if you’re a dev there’s nothing stopping you as far as I know.

Not quite sure if we are on the same page, but I will start a new topic rather than continue to hijack this one. :slight_smile:

Could you please create a link to the new topic here?

Actually, yes. How would I create a loop to show related products on a product page?

What kind of relationship do you want to use? Related products could be simply products from the same category or use specific product or variant data etc.

You can pretty much with woocommerce and L&L.

I’m just working on a project with both plugins. That said some thoughts about what is possibel and not.

  1. Product page
    I have done that with the classic woocommerce product page as this enabled me to use other plugins like product filter, etc. out of the box.
    I only used some woocommerce hooks to add L&L templates into the product page to be able to manipulate several parts of the woocommerce product page.

  2. Single Product
    Also here I mixed classic woocommerce and L&L. I use L&L to read and present out product attributes but also for AJAX calls to get delivery times, etc.

  3. Cart & Ceckout
    Also used hooks to implement L&L templates

  4. Woocommerce My-Account
    Here I use L&L in many cases. First I use it for a AJAX call to manipulate the wordpress login status in the menu - just to be able to show also logged in users mostly cached pages.
    Second I have created my own my-account pages with L&L and use woocommerce hooks to implement the templates.

If you use woocommerce hooks you can insert nearly at any place new content created with L&L templates.

4 Likes

Good question. I’m currently using Beaver Themer which has a woocommerce related products module, but I’m not sure how it works.

I could use product category or tag, except every product already has multiple entries for tag and category. I could create an ACF called ‘collection’ and link the products in each collection to each other.

Then I would need to grab the collection for the current product and create a loop from that.

Does that make sense, or am I doing this the hard way?

From Woo’s docs:

Related Products is a section on some templates that pulls products from your store that share the same tags or categories as the current product.

1 Like

Some of the more advanced related products plugins will look at what items people are putting in their cart and purchasing to gather data over time about what items are complementary etc.

You can do it based on tags but you need your tags well organised and you may not want to limit the tags used for recommendations.

It’s a fairly complex topic but you can get results with simple logic and then test and learn to figure out what works best for your store. :slightly_smiling_face:

2 Likes

My products naturally belong in collections which is what I wanted to show. Also, I wanted to style the Collection in the same way as it is on the Product Archive page which is done completely in L&L.

(I don’t like how product archive pages only show one product per row at mobile sizes. I would rather have smaller thumbnails that always show at least 2 per row. The code below does that.)

I created an ACF field called ‘collection’ and added this to the Single Product page. (Thanks again to @julia for the grid classes which are a minor miracle. but still a miracle.)

<If field="collection" exists>
  <h2>This Collection</h2>
  <div class="grid-cols-inner grid-xl-col-4 grid-md-col-4 grid-sm-col-2 grid-xs-col-2">
    <Loop type="product" paged=8 custom_field="collection" custom_field_compare=equal custom_field_value="{Field collection}">
      <Template name=product-core-web />
    </Loop>
   </div>
</If> 
3 Likes