Custom Woocommerce Shop Page

Hi @gamicord, thanks for giving L&L a try and I’m sorry to hear that you’re 100% confused! The main purpose of this plugin is to more easily work with the data that’s in your site’s database and display it or work with it on the front end of your site. It essentially takes a lot of the stuff you’d usually do with PHP (querying data from the database, evaluating logic, rendering data, etc.) and allow you to do that with simple HTML syntax instead. Each of the dynamic tags in L&L offers different functionality, so if you want an overview of what each tag can do, you can see an overview in the documentation here.

I assume the functionality you’re trying to replicate in the screenshot is the dropdown that allows users to filter content on the front end of your site. L&L templates get rendered when the page loads, so when it comes to adding interactivity to the front end of your site, that’s generally something you’d use Javascript for or another plugin. In other words, you can use L&L to create a dynamic grid of all your posts and then you can use Javascript to hide or show certain of those items based on how the user interacts with your site. If you’re not familiar with JS, I’ve also seen people use L&L to create their dynamic post grid and then use a plugin like?FacetWP?to handle the front-end filtering side of things. This requires some PHP tinkering to get it set up so it’s not the simplest approach, but FacetWP is really powerful so you get lots of functionality there. The other approach I’ve seen people use is instead of using a dropdown, you could create buttons that link to a page (maybe even the current page) with URL query parameters like?mysite.com/page/?category=type1. Then in your L&L template, you could use the?Url?tag’s?query?attribute?to modify your L&L template based on the value of the parameter in the current URL.

I hope that helps explain what parts of this you will be able to use L&L for and what parts you won’t. Thanks for your question!

I’m sorry that you didn’t get what I was asking for.

What I was asking for, is how to get the entire WooCommerce Product Loop in a Custom Design:

The Product Title
Image
Price
Description
Quantity Counter
Add to Cart button
Default Sorting Drop-down
and everything else related to WooCommerce.

When this Custom design of these WooCommerce Components is created,

My question is:

After creating a Custom design of these WooCommerce Components, How do we make each one of them to still function as expected— where for example, the Add to Cart button will still add items to Cart when clicked,

and yet these will be made to function as expected through Loops and Logic?

Regards.

Thanks for the clarification, I thought you were specifically referring to the sorting dropdown based on your screenshot.

As far as how you’d create a full WooCommerce product grid, you might want to check out this video since there are some examples in there of several of the ways you could create and customize a product loop.

To really quickly go over the pieces you mentioned, WooCommerce calls its custom post type product so you’d simply loop through all your products with the Loop tag with <Loop type=product />. Getting the data itself just requires knowing the field names so I found a list of them here that might be helpful to you. Within the Loop tag, you’d just write <Field title /> or <Field price /> to get the data about your products and then you can wrap those in some divs with CSS classes or anything you’d like to get the layout just the way you’d like it. I mentioned some of your options as to how you might achieve the sorting drop-down in my comment above. In the video linked to, I mentioned how you could add a dynamic add-to-cart link so definitely check that out. The only other thing that might be complicated would be the quantity counter, which I imagine would need to be done in JS.

You asked how you’d go abut creating a “custom design” and while I’d love to help you there, L&L simply handles getting the data from your database. The layout and styling with this plugin are done using regular HTML and CSS. I can’t give you a full front-end development course within this plugin’s support forum so you’ll have to do some Googling to learn how to work with those languages.

After you’ve watched the video I linked and gotten an idea of how you could go about creating your product grid, you can download the pre-styled template from the video using the instructions at this link. The template you’re looking for is called “Advanced – Styled blog post grid.”

On the other hand, if you’re not interested in learning the L&L language, then this plugin might simply not be for you. If that’s the case, then you might want to look into other plugins that handle all the layout and styling for you within the builder interface. There are hundreds of no-code plugins that are specifically designed to create WooCommerce product grids so you’ve got lots of options. L&L is really intended for those moments when you need total control and customization.

I hope that helps get you on the right track!

First, I’m shocked that you took time out, to explain this thing to me in detail.

I’m so shocked, and screaming “WoW” — extremely appreciate this.

2.) Now, don’t get me wrong. I don’t hate coding. I have done a brief stint in PHP. Then I’m taking a Udemy Course on Python, and JavaScript.

In JavaScript, I’m presently on EJS (a Templating Engine for JavaScript– which actually functions like Loops & Logic )

My challenge is that I’m not really good with CSS. And this means that, even if I master the Loops & Logic Language( which I have gone through, and believe I instinctively know it–due to my exposure to Python and JavaScript), I will still build ugly websites.

Now, I’ve paid and done this CSS Course to 65% as you can see here– https://prnt.sc/2np6z8Fxi7Tg —- while I’ve also paid for this{not started it yet} — ( https://www.udemy.com/course/css-animation-transitions-and-transforms-creativity-course/)

So, I know I have a CSS problem. That’s why I wanted to be sure that Loops & Logic had pre-built Components into which I can enter WooCommerce Data through Loops & Logic, to get a dynamic WooCommerce website, made of dynamic Components and parts.

Since you said we will have Tangible Blocks. I wait for this, hoping it’s a solution to my issue.

Regards.